在javascript中没有调用构造函数时绑定

时间:2013-05-29 16:15:23

标签: javascript prototype this

此代码是javascript中构造函数体的一部分:

window.addEventListener("load", function(){
    this._updateFilter();
}.bind(this));

_updateFilter 方法属于该构造函数的原型对象:

Constructor.prototype._updateFilter = function(){
    //  some code
};

我对创建新的构造函数之前调用 _updateFilter 的事感到困惑。所以没有:

var obj = new Constructor();

但是 _updateFilter 是在onload上调用的吗?有人可以解释一下吗?

由于

1 个答案:

答案 0 :(得分:1)

仅仅因为定义了侦听器回调甚至构造函数本身并不意味着它在定义时被调用。实际上,构造函数只是一个函数。与任何函数声明一样,它定义了调用时将发生的事情。如果我们不调用它,则没有任何反应。对于构造函数,在我们创建它的新实例时调用它。最终,您的应用程序将调用构造函数,这是当时会发生的事情:

  1. 使用特殊的new关键字,我们告诉JavaScript解释器调用构造函数并为其提供一个新对象。

  2. 解释器将构造函数内的this设置为内存中对该新对象的引用。

  3. 接下来,在window上创建一个事件侦听器。我们将回调函数传递给该侦听器,该侦听器是对this对象的闭包,使我们的当前this引用可用。但是该回调还没有执行,直到窗口的load事件触发为止。

  4. 想象一下它立即开火,(即实际上不是回调)我们会遇到问题。即使this当时存在并且实际上已经从Constructor.prototype继承,但它没有这样的方法_updateFilter。然后,解释器将检查原型链,并发现Constructor.prototype上也没有这样的功能。它会继续向上链,找不到函数,并会抛出错误。但请记住,回调还没有发生。

  5. 回到实际发生的事情:接下来我们使用新方法Constructor扩展_updateFilter的原型。

  6. 因此,最终窗口的load事件会触发,并且实际上会调用回调。解释器检查_updateFilter上是否存在this,发现它不存在,然后检查其原型链。现在它发现函数确实存在于Constructor.prototype上,并运行该代码。