CODEWITHSUNDEEP
javascriptnode.jsthis
metis
metis

Reputation: 1044

this keyword inside an object's function

I didn't understand the var self = this; in the below code. I know that "The value of this, when used in a function, is the object that "owns" the function.".Then this keyword inside the object's function refer to that object,right?However the comments of below codes says the opposite of that.

I'm confused about why we cannot use this keyword inside an object's function, in the below code? What does this refer to in below codes? 

var util = require('util');
var EventEmitter = require('events').EventEmitter;

// @station - an object with `freq` and `name` properties
var Radio = function(station) {

    // we need to store the reference of `this` to `self`, so that we can use the current context in the setTimeout (or any callback) functions
    // !!!! -> using `this` in the setTimeout functions will refer to those funtions, not the Radio class
    var self = this;

    // emit 'close' event after 5 secs
    setTimeout(function() {
        self.emit('close', station);
    }, 5000);

    // EventEmitters inherit a single event listener, see it in action
    this.on('newListener', function(listener) {
        console.log('Event Listener: ' + listener);
    });
};

// extend the EventEmitter class using our Radio class
util.inherits(Radio, EventEmitter);

// we specify that this module is a refrence to the Radio class
module.exports = Radio;

I read similar posts and understood, however i couldn't understand the comments of below codes. Also, nobody mentioned about the this keyword inside a function's function argument inside a constructor. Especially the second sentence which is written bold makes me confused totaly :

We need to store the reference of this to self, so that we can use the current context in the setTimeout (or any callback) functions. using this in the setTimeout functions will refer to those funtions, not the Radio class

Quoted from : http://www.hacksparrow.com/node-js-eventemitter-tutorial.html

Upvotes: 0

Views: 350

Answers (2)

Michael Lyons
Michael Lyons

Reputation: 584

The purpose of 'this' in a function is a reference to the object that called the function. Since you're passing an anonymous function to the window with setTimeout, any 'this' call within that function will be referencing the window object.

You could use the Javascript Bind function to preserve the context of 'this' within the callback function regardless of where it's called.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

Your setTimeout function would look like this:

setTimeout(function() {
    this.emit('close', station);
}.bind(this), 5000);

Upvotes: 0

kentis
kentis

Reputation: 61

The value og the this keyword will change value based on the current context. The complete description of how this works is somewhat complicated. See MDN for more details.

In your case, this will have a different value when the anonymous function inside the setTimeout call is eventually called. However, the self variable will still be available.

Upvotes: 1

Related Questions