简体   繁体   中英

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

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.

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM