I cannot figure out why the following does not work:
var foo = { f1: () => 5, f2: this.f1() }
I get this error:
TypeError: this.f1 is not a function
It seems that this refers to the global scope instead of foo. Everything works fine with the following:
var foo = { f1: () => 5, f2() { return this.f1 } }
Is there a way to refer to f1 without wrapping it in a new function?
The scope where you're executing the assignment is global scope, so this is not foo. One might think that this would then fix it:
var foo = { f1: () => 5, f2: foo.f1() }
but it doesn't - because at the time when the literal is constructing the object, the assignment hasn't happened, and foo is still undefined.
You need to take timing into account, and write one of the following:
var foo = { f1: () => 5 }
foo.f2 = foo.f1
or
var f = () => 5
var foo = { f1: f, f2: f }
Of course, if you want to simply resolve to f1 at runtime, and don't want to explicitly invoke a function with parentheses, you can still sneak in a function as a getter:
var foo = { f1: () => 5, get f2() { return foo.f1 } }
foo.f2
# => [Function: f1]
This answer is probably helpful:
How does the "this" keyword in Javascript act within an object literal?
This answer also has useful comments on the difference between arrow and regular functions, particularly how this is affected in each:
Arrow functions vs Fat arrow functions
var testOne = {
a: 'hello',
b: () => console.log(this.a)
}
var testTwo = {}
testTwo.a = 'hello'
testTwo.b = function() {console.log(this.a)}
console.log(testOne.a)
testOne.b()
console.log(testTwo.a)
testTwo.b()