Javascript：将对象“ this”的作用域保留在事件处理程序中

Question

I have a Stream object taking care of an XML request:

/**
 * Init stream class.
 *
 * @param array actions
 * @param object options
 * @return void
 */
var Stream = function(actions, options)
{
    this.actions = !actions ? [] : actions;
    this.options = options;
}

/**
 * Stream completion handler.
 *
 * @param object evt
 * @return void
 */
Stream.prototype.complete = function(evt)
{
    console.log(this);
    // this is not the Stream object we're within,
    // instead it's the XMLHttpRequest object :(
}

/**
 * Start flowing the stream!
 *
 * @param void
 * @return void
 */
Stream.prototype.flow = function()
{
    var req = new XMLHttpRequest();
    req.addEventListener('load', this.complete);
    req.open('GET', '/stream.php');
    req.send();   
}

new Stream([], {}).flow();

Problem is, on the load event listener - when I try to console log this (wanting to refer to Stream ) - I get the XMLHttpRequest object instead. How do I go about retrieving my scope?

As you can tell, Vanilla JS is not my forte, but I've decided to work on it ;)

Guidance appreciated!

Answer 1

add var that = this; before registering event and in event handler use console.log(that);

Answer 2

Use the following code to modify .complete() using .bind() :

req.addEventListener('load', this.complete.bind(this));

When the request object uses your this.complete function, it invokes it with the context of the request object ( XMLHttpRequest instance).
this.complete.bind(this) makes a new bound function that makes sure to have this an instance of Stream .

You can check more about this problem in the following article .

Answer 3

另一种方法可能是：

req.addEventListener('load', function(e){e.target.complete()});