Solution:

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

1. You can use thebind() function.
2. Store a reference to context/this inside another variable (see the below example).
3. Use ES6 Arrow functions.
4. Alter the code, function design, and architecture - for this you should have command over design patterns in JavaScript.

1. Use thebind() 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);
Copy code

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

transport.on('data', _.bind(function () {
    alert(this.data);
}, this));
Copy code

2. Store a reference to context/this inside another variable

function MyConstructor(data, transport) {
  var self = this;
  this.data = data;
  transport.on('data', function() {
    alert(self.data);
  });
}
Copy code

3. Arrow function

function MyConstructor(data, transport) {
  this.data = data;
  transport.on('data', () => {
    alert(this.data);
  });
}
Copy code

Solution:

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

object.property();
Copy code

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();
Copy code

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);
Copy code

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

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

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

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

Solution:

You should know about "this" Keyword.

As per my view you can implement "this" in three ways (Self|Arrow function|Bind Method)

A function'sthis keyword behaves a little differently in JavaScript compared to other languages.

It also has some differences between strict mode and non-strict mode.

In most cases, the value of this is determined by how a function is called.

It can't be set by assignment during execution, and it may be different each time the function is called.

ES5 introduced the bind() method to set the value of a function'sthis regardless of how it's called,

And ES2015 introduced arrow functions that don't provide their ownthis binding (it retains this value of the enclosing lexical context).

Method1: Self - Self is being used to maintain a reference to the original this even as the context is changing. It's a technique often used in event handlers (especially in closures).

Reference: this

function MyConstructor(data, transport) {
    this.data = data;
    var self = this;
    transport.on('data', function () {
        alert(self.data);
    });
}
Copy code

Method2: Arrow function - An arrow function expression is a syntactically compact alternative to a regular function expression, although without its own bindings to the this, arguments, super, or new.target keywords.

Arrow function expressions are ill-suited as methods, and they cannot be used as constructors.

Reference: Arrow function expressions

  function MyConstructor(data, transport) {
    this.data = data;
    transport.on('data',()=> {
        alert(this.data);
    });
}
Copy code

Method 3: Bind - The bind() method creates a new function that, when called, has itsthis keyword set to the provided value with a given sequence of arguments preceding any provided when the new function is called.

Reference: Function.prototype.bind()

  function MyConstructor(data, transport) {
    this.data = data;
    transport.on('data',(function() {
        alert(this.data);
    }).bind(this);
Copy code

Solution:

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 .

"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 , 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 the code that is being executed. It includes much more information than just the .

Solution:

First, you need to have a clear understanding of and behaviour of the {-code-2} keyword in the context of .

{-code-2} &:

There are two types of in JavaScript. They are:

1. Global Scope

2. Function Scope

In short, global refers to the window object. Variables declared in a global are accessible from anywhere.

On the other hand, function resides inside of a function. A variable declared inside a function cannot be accessed from the outside world normally.

The {-code-2} keyword in the global refers to the window object. {-code-2} inside a function also refers to the window object. So {-code-2} will always refer to the window until we find a way to manipulate {-code-2} to indicate a context of our own choosing.

Different ways to manipulatethis inside {-code-31}back functions:

Here I have a constructor function {-code-31}ed Person. It has a property {-code-31}ed {-code-12} and four method {-code-31}ed {-code-13}, {-code-14}, {-code-15}, and {-code-16}. All four of them has one specific task. Accept a {-code-31}back and invoke it. The {-code-31}back has a specific task which is to log the {-code-12} property of an instance of Person constructor function.

function Person({-code-12}){

    this.{-code-12} = {-code-12}

    this.{-code-13} = function({-code-31}back){
        {-code-31}back.bind(this)()
    }
    this.{-code-14} = function({-code-31}back){
        {-code-31}back()
    }

    this.{-code-15} = function({-code-31}back){
        {-code-31}back.{-code-31}(this)
    }

    this.{-code-16} = function({-code-31}back){
        {-code-31}back.{-code-40}(this)
    }

}

function {-code-19}(){

    // Function to be used as {-code-31}back

    var parentObject = this

    console.log(parentObject)
}
Copy code

Now let's create an instance from {-code-21} constructor and invoke different versions of {-code-18} (X refers to 1,2,3,4) method with {-code-19} to see how many ways we can manipulate the this inside {-code-31}back to refer to the {-code-21} instance.

{-code-22}
Copy code

this.{-code-13} = function({-code-31}back){
    {-code-31}back.bind(this)()
}
this.{-code-14} = function({-code-31}back){
    {-code-31}back()
}
Copy code

p1.{-code-13}({-code-19}) // pass simply the {-code-31}back and bind happens inside the {-code-13} method

p1.{-code-14}({-code-19}.bind(p1)) // uses bind before passing {-code-31}back
Copy code

this.{-code-15} = function({-code-31}back){
    {-code-31}back.{-code-31}(this)
}
Copy code

p1.{-code-15}({-code-19})
Copy code

this.{-code-16} = function({-code-31}back){
    {-code-31}back.{-code-40}(this)
}
Copy code

p1.{-code-16}({-code-19})
Copy code

Solution:

We can not bind this tosetTimeout(), as it always executes with the global object (Window). If you want to access thethis context in the callback function then by usingbind() to the callback function, we can achieve it as:

setTimeout(function(){
    this.methodName();
}.bind(this), 2000);
Copy code

Solution:

The question revolves around how thethis keyword behaves in JavaScript.this behaves differently as below,

1. The value ofthis is usually determined by a function execution context.
2. In the global scope,this refers to the global object (thewindow object).
3. If strict mode is enabled for any function then the value ofthis will beundefined as in strict mode, global object refers toundefined in place of thewindow object.
4. The object that is standing before the dot is what thethis keyword will be bound to.
5. We can set the value of this explicitly withcall(),bind(), andapply()
6. When thenew keyword is used (a constructor), this is bound to the new object being created.
7. Arrow functions don’t bindthis — instead,this is bound lexically (i.e., based on the original context)

As most of the answers suggest, we can use the arrow function orbind() Method or Self var. I would quote a point about lambdas (arrow function) from Google JavaScript Style Guide

Prefer using arrow functions over f.bind(this), and especially over goog.bind(f, this). Avoid writing const self = this. Arrow functions are particularly useful for callbacks, which sometimes pass unexpectedly additional arguments.

Google clearly recommends using lambdas rather than bind orconst self = this

So the best solution would be to use lambdas as below,

function MyConstructor(data, transport) {
  this.data = data;
  transport.on('data', () => {
    alert(this.data);
  });
}
Copy code

References:

1. https://medium.com/tech-tajawal/javascript-this-4-rules-7354abdb274c
2. arrow-functions-vs-bind

Solution:

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

With support of class fields, it's possible to make it the following way:

class someView {
    onSomeInputKeyUp = (event) => {
        console.log(this); // This refers to the correct value
    // ....
    someInitMethod() {
        //...
        someInput.addEventListener('input', this.onSomeInputKeyUp)
Copy code

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

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

Solution:

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

var obj = {
  handleEvent(e) {
    // always true
    console.log(this === obj);
  }
};

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

Detailed information about usinghandleEvent can be found here: DOM handleEvent: a cross-platform standard since year 2000

Solution:

I was facing a problem withNgx line chartxAxisTickFormatting function which was called from HTML like this:[xAxisTickFormatting]="xFormat".

I was unable to access my component's variable from the function declared. This solution helped me to resolve the issue to find the correct this.

Instead of using the function like this:

xFormat (value): string {
  return value.toString() + this.oneComponentVariable; //gives wrong result
}
Copy code

Use this:

 xFormat = (value) => {
   // console.log(this);
   // now you have access to your component variables
   return value + this.oneComponentVariable
 }
Copy code

Solution:

Some other people have touched on how to use the .bind() method, but specifically here is how you can use it with .then() if anyone is having trouble getting them to work together:

someFunction()
.then(function(response) {
    //'this' wasn't accessible here before but now it is
}.bind(this))
Copy code

As mentioned in the comments, an alternative would be to use an arrow function that doesn't have its own 'this' value

someFunction()
.then((response)=>{
    //'this' was always accessible here
})
Copy code

Solution:

this in JavaScript:

The value ofthis in JavaScript is 100% determined by how a function is called, and not how it is defined. We can relatively easily find the value ofthis by the 'left of the dot rule':

1. When the function is created using the function keyword the value ofthis is the object left of the dot of the function which is called
2. If there is no object left of the dot then the value ofthis inside a function is often the global object (global in Node.js andwindow in a browser). I wouldn't recommend using thethis keyword here because it is less explicit than using something likewindow!
3. There exist certain constructs like arrow functions and functions created using theFunction.prototype.bind() a function that can fix the value ofthis. These are exceptions of the rule, but they are really helpful to fix the value ofthis.

Example in Node.js

module.exports.data = 'module data';
// This outside a function in node refers to module.exports object
console.log(this);

const obj1 = {
    data: "obj1 data",
    met1: function () {
        console.log(this.data);
    },
    met2: () => {
        console.log(this.data);
    },
};

const obj2 = {
    data: "obj2 data",
    test1: function () {
        console.log(this.data);
    },
    test2: function () {
        console.log(this.data);
    }.bind(obj1),
    test3: obj1.met1,
    test4: obj1.met2,
};

obj2.test1();
obj2.test2();
obj2.test3();
obj2.test4();
obj1.met1.call(obj2);
Copy code

Output:

Solution:

You can use arrow function to avoid the issue with this .

const functionToTest = (dataToSet , transport) => {
  this.dataToSet = dataToSet ;
  transport.on('dataToSet ', () => {
    console.log(this.dataToSet);
  });
}
Copy code

Solution:

This is how I solved the problem

class myClass
{
    constructor(parent)
    {
        this.callback = (function() { 
            this.callbackFunctionOfParent();             
        }).bind(parent);
    }

    callCallback() {
         this.callback();
    }
}

class Class2
{
       constructor()
       {
            this.Name = "CLASS 2";

            this.test = new myClass(this);

            this.test.callCallback();
       } 

       callbackFunctionOfParent()
       {
           console.log("parent is: " + this.Name);
       }
}

var c2 = new Class2;Copy code

Share

Similar questions

Find the answer in similar questions on our website.