Question

我有一个Stream对象来处理XML请求：

/**
 * 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();

问题是，在load事件监听器上 - 当我尝试控制日志this时（想要引用Stream） - 我得到了XMLHttpRequest对象。我该如何检索我的范围？

正如你所知，Vanilla JS不是我的强项，但我决定继续努力;）

指导赞赏！

Answer 1

在注册事件之前添加var that = this;，在事件处理程序中使用console.log(that);

Answer 2

使用以下代码使用.bind()修改.complete()：

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

当请求对象使用您的this.complete函数时，它会使用请求对象（XMLHttpRequest实例）的上下文调用它。
this.complete.bind(this)创建了一个新的绑定函数，确保this具有Stream的实例。

您可以在the following article中查看有关此问题的更多信息。

Answer 3

另一种方式可能是;

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

Javascript：将对象'this'范围保留在事件处理程序

3 个答案: