By Felix Kling


2013-11-29 06:13:11 8 Comments

I have a constructor function which registers an event handler:

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

// Mock transport object
var transport = {
    on: function(event, callback) {
        setTimeout(callback, 1000);
    }
};

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

However, I'm not able to access the data property of the created object inside the callback. It looks like this does not refer to the object that was created but to an other one.

I also tried to use an object method instead of an anonymous function:

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

MyConstructor.prototype.alert = function() {
    alert(this.name);
};

but it exhibits the same problems.

How can I access the correct object?

10 comments

@RobG 2014-06-01 00:44:37

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 than 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.

@Roamer-1888 2019-06-08 15:12:37

Can't agree with this answer. The existence of the term "execution context" does not outlaw other uses of "context" any more than it outlaws other uses of "execution". Maybe there is a better term to describe this but none is offered here, and it's arguably too late to shut the door on "context".

@RobG 2019-06-08 23:42:34

@Roamer-1888—thank you for the edit. You're right, but my argument doesn't rely on the existence of "execution context" precluding the of "context" for some other purpose. Rather, it's based on "context" being inappropriate from both a technical and semantic perspective. I also think the use of "context" instead of "this" is dying out. I don't see any reason to find an alternative term to this or thisBinding, it just obfuscates and means at some point you have to explain that "context" is actually this, and that it isn't in anyway "context". :-)

@Roamer-1888 2019-06-09 02:16:35

I don't think you can say that this isn't in any way "context", when you have already admittted that it's one part of an execution context, where "execution" is merely adjectival.

@RobG 2019-06-09 03:06:12

@Roamer-1888—I'm not going to continue this conversation past this point. Yes, this is part of an execution context. Saying it's the context is like saying one player of a team is the team.

@Roamer-1888 2019-06-09 03:43:01

RobG, pity you don't want to continue. It's an interesting debate. Thank you for giving me your time.

@Code_Mode 2019-02-18 09:10:09

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

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

As most of the answers suggest, we can use 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 unexpected additional arguments.

Google clearly recommends to use 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

@Felix Kling 2019-02-18 19:51:36

This question is specifically about using functions/methods as callbacks. Your answer might be a better fit for stackoverflow.com/q/3127429/218196 .

@Code_Mode 2019-02-19 05:15:24

@FelixKling Yes question is about using functions/methods as callbacks in that main issue was due to handling of this keyword thats why I divided my answer in two parts, one about this and second about using functions/methods as callbacks. Feel free to edit the answer.

@Ashish 2019-01-30 11:01:57

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 which don't provide their own this binding (it retains the 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 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/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: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

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

Method3: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: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind

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

@skyboyer 2018-09-22 13:38:59

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

@yeyeyerman 2019-02-17 17:36:44

This is exactly the way I got it working in Typescript: public methodName = (params) => { body } inside a class.

@Andrea Puddu 2018-08-28 09:10:52

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

@Felix Kling 2013-11-29 06:13:11

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

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 .bind [docs], which returns a new function with this bound to a value. The function has exactly the same behaviour 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);
}

In this case, we are binding the callback's this to the value of MyConstructor's this.

Note: When binding context for jQuery, use jQuery.proxy [docs] 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.

ECMAScript 6: Use arrow functions

ECMAScript 6 introduces 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 behaviour they have, please refer to the MDN documentation for more information.

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

Set this of the callback - part 2

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. Array#map [docs] is such a method. Its signature is:

array.map(callback[, thisArg])

The first argument is the callback and the second argument is the value this should refer to. Here is a contrived example:

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 $.ajax method [docs] describes an option called context:

This object will be made the context of all Ajax-related callbacks.


Common problem: Using object methods as callbacks/event handlers

Another common manifestation of this problem is when an object method is used as callback/event handler. Functions are first-class citizens in JavaScript and the term "method" is just a colloquial term for a function that is a value of an object property. But that function doesn't have a specific link to its "containing" object.

Consider the following example:

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

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

The function this.method is assigned as click event handler, but if the document.body is clicked, the value logged will be undefined, because inside the event handler, this refers to the document.body, not the instance of Foo.
As already mentioned at the beginning, what this refers to depends on how the function is called, not how it is defined.
If the code was like the following, it might be more obvious that the function doesn't have an implicit reference to the object:

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


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

Foo.prototype.method = method;

The solution is the same as mentioned above: If available, use .bind to explicitly bind this to a specific value

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

or explicitly call the function as a "method" of the object, by using an anonymous function as callback / event handler and assign the object (this) to another variable:

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

or use an arrow function:

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

@vol7ron 2014-09-12 15:39:03

Felix, I've read to this answer before but never replied. I grow concerned that people use self and that to refer to this. I feel this way because this is an overloaded variable used in different contexts; whereas self usually corresponds to the local instance and that usually refers to another object. I know you did not set this rule, as I've seen it appear in a number of other places, but it is also why I've started to use _this, but am not sure how others feel, except for the non-uniform practice that has resulted.

@zzzzBov 2015-03-19 15:51:40

@FelixKling, it allows you to be super lazy with code like $(...).on('click', $.proxy(obj, 'function')) and $(...).off('click', obj.function).

@ndugger 2015-10-02 14:06:27

Hey, any chance you'd add a section on the ES7 :: bind syntax proposal, or would you prefer to wait until it's more finalized than not?

@Felix Kling 2015-10-02 14:48:25

@Nick: No, I'm OK with adding it.... although, I just saw that it's still stage 0. I think waiting for stage 1 would make sense.

@andig 2015-12-28 15:57:28

@FelixKling would it be safe to assume that using this inside prototype functions will always have the expected behaviour regardless how they are (typically) called? When using callbacks inside prototype functions, is there an alternative to bind(), self or that?

@Nolo 2016-11-15 06:02:19

@FelixKling It can be useful at times to rely on Function.prototype.call () and Function.prototype.apply (). Particularly with apply () I've gotten a lot of mileage. I am less inclined to use bind () perhaps only out of habit though I am aware ( but not certain ) that there may be slight overhead advantages to using bind over the other options.

@rinogo 2017-01-06 20:15:13

If you're using Typescript, fix this using arrow functions. (This can be deduced from Felix Kling's answer, but it's somewhat long-winded, giving lots of (neat) options. The linked answer is much more direct for Typescript.)

@Aluan Haddad 2017-02-12 12:53:47

Great answer but consider adding an additional optional solution which is just to not use classes, new, or this at all.

@Patrick Evans 2017-09-13 18:57:55

Would it be worth exampling the use of EventListener interface in the cases of DOM events and other objects that might implement EventTarget? Or would that be straying off as it would only work for those cases.

@RobG 2018-03-03 08:03:45

I think the part "(aka "the context")" should be removed as I don't think anyone uses that erroneous term anymore to refer to "this".

@alphanumeric0101 2018-05-25 20:36:22

re arrow functions "Instead, this is looked up in scope just like a normal variable." totally made this click for me, thank you! () => this.clicked() ;)

@vsync 2018-06-14 13:21:29

How would you solve this common scenario: jsbin.com/cuyawiq/2/edit?js,output ?

@Felix Kling 2018-06-14 14:56:33

@vsync: this has been asked before but I’m on mobile, so I can’t really search for it. The only solution to this is to create a in the constructor so that each instance has its own copy with the “inner” function bound to the instance . Alternatively you could make it a getter and create a new object on the fly whenever a is accessed.

@RobG 2018-08-16 02:19:23

The phrase "…not affected by lexical scopes" should probably be qualified with "(except for arrow functions, see below)".

@TripeHound 2019-07-08 10:24:15

@FelixKling Great summary (of some things I knew; some new to me). Might be worth working in that within a class, you can use someFunc = someFunc.bind(this); within the constructor to expose a bound-to-the-class-instance's-this function. (I got this from this comment by Khauri on a different question).

@Datta Chanewad 2017-11-17 14:32:44

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

@Felix Kling 2017-11-17 15:17:07

How is this different than any of the existing answers?

@Mohan Dere 2016-08-13 10:26:53

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

@Stav Bodik 2019-03-13 11:31:10

The bind() option is amazing its just passing the pointer of this Object to be the this on the other object (: Thanks !

@AL-zami 2017-08-18 17:58:59

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)

@AL-zami 2017-08-19 08:55:33

any constructive criticism regarding the answer will be appreciated !

@Randall Flagg 2018-05-23 10:04:31

The this keyword in the global scope doesn't necessarily refer to the window object. That is true only in a browser.

@AL-zami 2018-07-09 00:14:20

@RandallFlagg i wrote this answer from a browser's perspective.Fell free to inhance this answer if necessary :)

@Guffa 2014-05-21 00:11:50

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

Related Questions

Sponsored Content

55 Answered Questions

[SOLVED] How do I check if an element is hidden in jQuery?

35 Answered Questions

[SOLVED] How do I return the response from an asynchronous call?

57 Answered Questions

[SOLVED] How do I include a JavaScript file in another JavaScript file?

3 Answered Questions

58 Answered Questions

[SOLVED] How do I redirect to another webpage?

79 Answered Questions

[SOLVED] How do I remove a particular element from an array in JavaScript?

  • 2011-04-23 22:17:18
  • Walker
  • 5836397 View
  • 7279 Score
  • 79 Answer
  • Tags:   javascript arrays

43 Answered Questions

[SOLVED] JavaScript closure inside loops – simple practical example

38 Answered Questions

[SOLVED] How do I remove a property from a JavaScript object?

86 Answered Questions

[SOLVED] How do JavaScript closures work?

16 Answered Questions

[SOLVED] How to get the children of the $(this) selector?

Sponsored Content