Context "this" is not kept at object methods

Question

I believe (may be I wrong) method definition at ECMA6 uses arrow functions (internally) and "this" (context) must be kept. But

class Foo {
    methodOne() {
        console.log("MethodOne is called")
    }

    methodTwo() {
        console.log("MethodTwo is called");
        this.methodOne();
    }
}

var foo = new Foo();

var executing = function (someMethod) {someMethod()};

executing(foo.methodTwo)

It raises error "Uncaught TypeError: Cannot read property 'methodOne' of undefined(…)"

So, either I understood specification incorrect or browsers (Chrome, FF) and nodejs does not support this yet?

Where in the spec does it say something like _"uses arrow functions (internally)"_ or _"'this' (context) must be kept"_? And why should it have changed with ES6? — a better oliver, Apr 06 '16 at 11:39
Arrow functions and method definitions are two different things. — Felix Kling, Apr 06 '16 at 13:33

Dmitri Pavlutin · Accepted Answer · 2016-08-11T07:50:47.670

3

Classes in ES6 are just syntactic sugar over prototypal inheritance. This way the method declarations in the class are attached to the prototype object.

1) The problem in the example is in the way the function is invoked. To keep the context this, you still need to invoke it as a method on an object:

var foo = new Foo();

var executing = function (someMethod, context) {someMethod.apply(context)};

executing(foo.methodTwo, context);

2) But if you invoke it as a regular function, then you'll have this as undefined in strict mode:

 methodTwo() {
        console.log("MethodTwo is called");
        this.methodOne(); // <---- `this` is `undefined`
 }

this in a function call is determined by the way it is invoked:

as regular function (makes this as undefined or global object in non strict mode): someMethod(); or var m = foo.methodTwo; m();
as a method on an object (makes this the object): foo.methodTwo()
as constructor (makes this the newly created object): new Foo()
indirect invocation (using apply(newContext) and call(newContext)): someMethod.apply(context).

Notice that bound() method can modify the context before invocation. It will cancel any later context modifications on invocation for cases 1, 2 and 4. For constructor invocation the bound context is ignored and still used the newly created object.

Check this nice post about the function context and invocation in JavaScript.

edited Aug 11 '16 at 07:50

answered Apr 06 '16 at 11:22

Dmitri Pavlutin

18,122
8
37
41

In the latter case, isn't it the global object instead of undefined? – RemcoGerlich Apr 06 '16 at 11:27
1

@RemcoGerlich In strict mode undefined, in non strict global object. – Dmitri Pavlutin Apr 06 '16 at 11:31
@DmitriPavlutin how do you get undefined if you are calling it as `foo.method`? – The Reason Apr 06 '16 at 11:32
@The You're not calling `foo.method`, you're just taking the reference to function object. And later this object is invoked as regular function with `this` as `undefined`. Contrary to `foo.method()`: an method invocation on `foo` object. – Dmitri Pavlutin Apr 06 '16 at 11:34
@DmitriPavlutin what do you mean under _regular function_? something like `method()`? – The Reason Apr 06 '16 at 11:41
_"this in a function call is always determined by the way it is invoked"_ That's not correct. A function can be bound to a certain `this` value and arrow functions use the value of the surrounding environment. – a better oliver Apr 06 '16 at 11:41
@zeroflagL Thanks for the note. Made the clarification in the answer. – Dmitri Pavlutin Apr 06 '16 at 11:48

score 1 · Answer 2 · edited May 23 '17 at 10:28

1

So, either I understood specification incorrect or browsers (Chrome, FF) and nodejs does not support this yet?

Whichever part of the spec you read, you misunderstood it. Methods and arrow functions are two different things, and even if methods had arrow function semantics, you wouldn't get the behavior you expected (since arrow functions resolve this lexically).

No, methods work like normal function declararions/expressions wrt to this.

See also How to access the correct `this` context inside a callback?

edited May 23 '17 at 10:28

Community

1
1

answered Apr 06 '16 at 13:38

Felix Kling

795,719
175
1,089
1,143

You are right. I have read spec again and it becomes clear for me. – vmusulainen Apr 06 '16 at 14:20

Context "this" is not kept at object methods

2 Answers2