Context "this" is not kept at object methods

vmusulainen

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?

Dmitri Pavlutin

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:

  1. as regular function (makes this as undefined or global object in non strict mode): someMethod(); or var m = foo.methodTwo; m();
  2. as a method on an object (makes this the object): foo.methodTwo()
  3. as constructor (makes this the newly created object): new Foo()
  4. 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.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

boolean context of a python object

From Dev

Where is information about methods of Java objects kept?

From Dev

Aliasing object methods in D

From Dev

Passing Context to Interface Methods

From Dev

execution context and (( this object ))

From Dev

scope of the object literal methods

From Dev

Jasmine test for object methods

From Dev

Reference of object in array not kept

From Dev

Calling object methods with promises and the 'this' context

From Dev

passing object values to methods

From Dev

difference in jQuery object context

From Dev

Accessing object methods with composition?

From Dev

Using $this when not in object context without the use of static methods

From Dev

Hoisting object methods into a class

From Dev

Getting error using $this when not in object context to all methods in a class except __construct() method

From Dev

Inject context with Hilt: this field leaks a context object

From Dev

Calling methods concept in PHP: static call versus object context

From Dev

Javascript: Object context overwritten?

From Dev

Using $this when not in object context?

From Dev

Where is information about methods of Java objects kept?

From Dev

Javascript - usage of this in object methods

From Dev

Invoking interface object methods

From Dev

Object with methods and own return

From Dev

scope of the object literal methods

From Dev

Add dynamically methods to an object

From Dev

Execution context and the execution context object in Javascript

From Dev

Create object with methods

From Dev

Business object methods

From Dev

How to reference Context object in provided class methods?