Here are several ways to access parent context inside child context -

1. You can use bind() function.


2. Store reference to context/this inside another variable(see below example).


3. Use ES6 Arrow functions.


4. Alter code/function design/architecture - for this you should have command over design patterns in javascript.

1. Use bind() function

function MyConstructor(data, transport) {

    this.data = data;

    transport.on('data', ( function () {

        alert(this.data);

    }).bind(this) );

}

// Mock transport object

var transport = {

    on: function(event, callback) {

        setTimeout(callback, 1000);

    }

};

// called as

var obj = new MyConstructor('foo', transport);

If you are using underscore.js - http://underscorejs.org/#bind

transport.on('data', _.bind(function () {

    alert(this.data);

}, this));

2 Store reference to context/this inside another variable

function MyConstructor(data, transport) {

  var self = this;

  this.data = data;

  transport.on('data', function() {

    alert(self.data);

  });

}

3 Arrow function

function MyConstructor(data, transport) {

  this.data = data;

  transport.on('data', () => {

    alert(this.data);

  });

}

It's all in the "magic" syntax of calling a method:

object.property();

When you get the property from the object and call it in one go, the object will be the context for the method. If you call the same method, but in separate steps, the context is the global scope (window) instead:

var f = object.property;

f();

When you get the reference of a method, it's no longer attached to the object, it's just a reference to a plain function. The same happens when you get the reference to use as a callback:

this.saveNextLevelData(this.setAll);

That's where you would bind the context to the function:

this.saveNextLevelData(this.setAll.bind(this));

If you are using jQuery you should use the $.proxy method instead, as bind is not supported in all browsers:

this.saveNextLevelData($.proxy(this.setAll, this));

The trouble with "context"

The term "context" is sometimes used to refer to the object referenced by this. Its use is inappropriate because it doesn't fit either semantically or technically with ECMAScript's this.

"Context" means the circumstances surrounding something that adds meaning, or some preceding and following information that gives extra meaning. The term "context" is used in ECMAScript to refer to execution context, which is all the parameters, scope and this within the scope of some executing code.

This is shown in ECMA-262 section 10.4.2:

Set the ThisBinding to the same value as the ThisBinding of the
calling execution context

which clearly indicates that this is part of an execution context.

An execution context provides the surrounding information that adds meaning to code that is being executed. It includes much more information that just the thisBinding.

So the value of this isn't "context", it's just one part of an execution context. It's essentially a local variable that can be set by the call to any object and in strict mode, to any value at all.

First, you need to have a clear understanding of scope and behaviour of this keyword in the context of scope.

this & scope :

there are two types of scope in javascript. They are :



   1) Global Scope



   2) Function Scope

in short, global scope refers to the window object.Variables declared in a global scope are accessible from anywhere.On the other hand function scope resides inside of a function.variable declared inside a function cannot be accessed from outside world normally.this keyword in global scope refers to the window object.this inside function also refers to the window object.So this will always refer to the window until we find a way to manipulate this to indicate a context of our own choosing.

--------------------------------------------------------------------------------

-                                                                              -

-   Global Scope                                                               -

-   ( globally "this" refers to window object)                                 -     

-                                                                              -

-         function outer_function(callback){                                   -

-                                                                              -

-               // outer function scope                                        -

-               // inside outer function"this" keyword refers to window object -                                                                              -

-              callback() // "this" inside callback also refers window object  -



-         }                                                                    -

-                                                                              -

-         function callback_function(){                                        -

-                                                                              -

-                //  function to be passed as callback                         -

-                                                                              -

-                // here "THIS" refers to window object also                   -

-                                                                              -

-         }                                                                    -

-                                                                              -

-         outer_function(callback_function)                                    -

-         // invoke with callback                                              -

--------------------------------------------------------------------------------

Different ways to manipulate this inside callback functions:

Here I have a constructor function called Person. It has a property called name and four method called sayNameVersion1,sayNameVersion2,sayNameVersion3,sayNameVersion4. All four of them has one specific task.Accept a callback and invoke it.The callback has a specific task which is to log the name property of an instance of Person constructor function.

function Person(name){



    this.name = name



    this.sayNameVersion1 = function(callback){

        callback.bind(this)()

    }

    this.sayNameVersion2 = function(callback){

        callback()

    }



    this.sayNameVersion3 = function(callback){

        callback.call(this)

    }



    this.sayNameVersion4 = function(callback){

        callback.apply(this)

    }



}



function niceCallback(){



    // function to be used as callback



    var parentObject = this



    console.log(parentObject)



}

Now let's create an instance from person constructor and invoke different versions of sayNameVersionX ( X refers to 1,2,3,4 ) method with niceCallback to see how many ways we can manipulate the this inside callback to refer to the person instance.

var p1 = new Person('zami') // create an instance of Person constructor

bind :

What bind do is to create a new function with the this keyword set to the provided value.

sayNameVersion1 and sayNameVersion2 use bind to manipulate this of the callback function.

this.sayNameVersion1 = function(callback){

    callback.bind(this)()

}

this.sayNameVersion2 = function(callback){

    callback()

}

first one bind this with callback inside the method itself.And for the second one callback is passed with the object bound to it.

p1.sayNameVersion1(niceCallback) // pass simply the callback and bind happens inside the sayNameVersion1 method



p1.sayNameVersion2(niceCallback.bind(p1)) // uses bind before passing callback

call :

The first argument of the call method is used as this inside the function that is invoked with call attached to it.

sayNameVersion3 uses call to manipulate the this to refer to the person object that we created, instead of the window object.

this.sayNameVersion3 = function(callback){

    callback.call(this)

}

and it is called like the following :

p1.sayNameVersion3(niceCallback)

apply :

Similar to call, first argument of apply refers to the object that will be indicated by this keyword.

sayNameVersion4 uses apply to manipulate this to refer to person object

this.sayNameVersion4 = function(callback){

    callback.apply(this)

}

and it is called like the following.Simply the callback is passed,

p1.sayNameVersion4(niceCallback)

We can not bind this to setTimeout(), as it always execute with global object (Window), if you want to access this context in the callback function then by using bind() to the callback function we can achieve as:

setTimeout(function(){

    this.methodName();

}.bind(this), 2000);

Another approach, which is the standard way since DOM2 to bind this within the event listener, that let you always remove the listener (among other benefits), is the handleEvent(evt)method from the EventListener interface:

var obj = {

  handleEvent(e) {

    // always true

    console.log(this === obj);

  }

};



document.body.addEventListener('click', obj);

Detailed information about using handleEvent can be found here: https://medium.com/@WebReflection/dom-handleevent-a-cross-platform-standard-since-year-2000-5bf17287fd38

Currently there is another approach possible if classes are used in code.

With support of class fields it's possible to make it next way:

class someView {

    onSomeInputKeyUp = (event) => {

        console.log(this); // this refers to correct value

    // ....

    someInitMethod() {

        //...

        someInput.addEventListener('input', this.onSomeInputKeyUp)

For sure under the hood it's all old good arrow function that bind context but in this form it looks much more clear that explicit binding.

Since it's Stage 3 Proposal you will need babel and appropriate babel plugin to process it as for now(08/2018).