javascript - How to access the correct `this` inside a callback

Solution:

What you should know about this

this (aka "the context") is a special keyword inside each function and its value only depends on how the function was called, not how/when/where it was defined. It is not affected by lexical scopes like other variables (except for arrow functions, see below). Here are some examples:

function foo() {
    console.log(this);
}

// normal function call
foo(); // `this` will refer to `window`

// as object method
var obj = {bar: foo};
obj.bar(); // `this` will refer to `obj`

// as constructor function
new foo(); // `this` will refer to an object that inherits from `foo.prototype`

To learn more about this, have a look at the MDN documentation.

How to refer to the correct this

Use arrow functions

ECMAScript 6 introduced arrow functions, which can be thought of as lambda functions. They don't have their own this binding. Instead, this is looked up in scope just like a normal variable. That means you don't have to call .bind. That's not the only special behavior they have, please refer to the MDN documentation for more information.

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

Don't use this

You actually don't want to access this in particular, but the object it refers to. That's why an easy solution is to simply create a new variable that also refers to that object. The variable can have any name, but common ones are self and that.

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

Since self is a normal variable, it obeys lexical scope rules and is accessible inside the callback. This also has the advantage that you can access the this value of the callback itself.

Explicitly set this of the callback - part 1

It might look like you have no control over the value of this because its value is set automatically, but that is actually not the case.

Every function has the method , which returns a new function with this bound to a value. The function has exactly the same behavior as the one you called .bind on, only that this was set by you. No matter how or when that function is called, this will always refer to the passed value.

function MyConstructor(data, transport) {
    this.data = data;
    var boundFunction = (function() { // parenthesis are not necessary
        alert(this.data);             // but might improve readability
    }).bind(this); // <- here we are calling `.bind()` 
    transport.on('data', boundFunction);
}

Note: When a binding context for jQuery, use instead. The reason to do this is so that you don't need to store the reference to the function when unbinding an event callback. jQuery handles that internally.

Some functions/methods which accept callbacks also accept a value to which the callback's this should refer to. This is basically the same as binding it yourself, but the function/method does it for you. is such a method. Its signature is:

array.map(callback[, thisArg])

var arr = [1, 2, 3];
var obj = {multiplier: 42};

var new_arr = arr.map(function(v) {
    return v * this.multiplier;
}, obj); // <- here we are passing `obj` as second argument

Note: Whether or not you can pass a value for this is usually mentioned in the documentation of that function/method. For example, jQuery's describes an option called context:

function Foo() {
    this.data = 42,
    document.body.onclick = this.method;
}

Foo.prototype.method = function() {
    console.log(this.data);
};

function method() {
    console.log(this.data);
}


function Foo() {
    this.data = 42,
    document.body.onclick = this.method;
}

Foo.prototype.method = method;

document.body.onclick = this.method.bind(this);

var self = this;
document.body.onclick = function() {
    self.method();
};

document.body.onclick = () => this.method();

1. You can use the bind() 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 the 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 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);
  });
}

3. Arrow function

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

Solution:

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

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's this 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's this regardless of how it's called,

And ES2015 introduced arrow functions that don't provide their own this 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);
    });
}

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);
    });
}

Method 3: Bind - The bind() method creates a new function that, when called, has its this 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);

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 .

Answer
Answer
Answer
Answer
Answer
Answer
Answer
Answer-                                                                              -
-   Global Scope                                                               -
-   (globally "{-code-2}" refers to window object)                                  -
-                                                                              -
-   function outer_function({-code-31}back){                                         -
-                                                                              -
-       // Outer function                                                 -
-       // Inside the outer function, the "{-code-2}" keyword                       -
-       //  refers to window object                                            -
-       {-code-31}back() // "{-code-2}" inside {-code-31}back also refers to the  window object -
-   }                                                                          -
-                                                                              -
-   function {-code-31}back_function(){                                              -
-                                                                              -
-       // Function to be passed as {-code-31}back                                   -
-                                                                              -
-       // Here "THIS" refers to the window object also                        -
-   }                                                                          -
-                                                                              -
-   outer_function({-code-31}back_function)                                          -
-   // Invoke with {-code-31}back                                                    -
-                                                                              
Answer
Answer
Answer
Answer
Answer
Answer
Answer
Answer-

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)
}

{-code-22}

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

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

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

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

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

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

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

As most of the answers suggest, we can use the arrow function or bind() 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 or const 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);
  });
}

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)

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 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: DOM handleEvent: a cross-platform standard since year 2000

Solution:

I was facing a problem with Ngx line chart xAxisTickFormatting 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
}

Use this:

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

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))

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
})

Solution:

this in JavaScript:

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

1. When the function is created using the function keyword the value of this 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 of this inside a function is often the global object (global in Node.js and window in a browser). I wouldn't recommend using the this keyword here because it is less explicit than using something like window!
3. There exist certain constructs like arrow functions and functions created using the Function.prototype.bind() a function that can fix the value of this. These are exceptions of the rule, but they are really helpful to fix the value of this.

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

Output:

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

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;