JavaScript回调范围

问题描述

 我在回调函数中引用我的对象时遇到了一些简单的旧JavaScript（没有框架） function foo（id）{
 this.dom = document.getElementById（id）; 
 this.bar = 5; 
 var self = this; 
 this.dom.addEventListener（click，self.onclick，false）; 
} 
 
 foo.prototype = {
 onclick：function（）{
 this.bar = 7; 
} 
}; 
  

现在，当我创建一个新对象（DOM加载后，使用span＃test） / p>

  var x = new foo（'test'）; 
  

onclick函数内的'this'指向span＃test而不是foo对象。 / p>

如何在onclick函数中引用我的foo对象？

解决方案

（提取了一些在其他答案中的评论中隐藏的解释）

问题出在以下行：

  this.dom.addEventListener（click，self.onclick，false）; 
  

这里，传递一个函数对象作为回调。当事件触发时，该函数被调用，但现在它与任何对象没有任何关联（this）。

问题可以通过包装函数来解决参考）在一个关闭如下：

  this.dom.addEventListener（
click，
 function（event）{self.onclick（event）}，
 false）; 
  

由于在创建关闭时，变量self被分配了这个关闭函数会在以后调用时记住自变量的值。

解决这个问题的一个替代方法是创建一个效用函数（并避免使用变量用于绑定

  function bind（scope，fn）{
 return function （）{
 fn.apply（scope，arguments）; 
}; 
} 
  

更新后的代码将如下所示：

  this.dom.addEventListener（click，bind（this，this.onclick），false）; 
  

---

是ECMAScript 5的一部分并提供相同的功能。所以你可以这样做：

  this.dom.addEventListener（click，this.onclick.bind（this），false） ; 
  

对于不支持ES5的浏览器，：

 code> if（！Function.prototype.bind）{
 Function.prototype.bind = function（oThis）{
 if（typeof this！==function）{
 //最接近ECMAScript 5内部IsCallable函数
抛出新的TypeError（Function.prototype.bind  - 试图绑定什么是不可调用）; 
} 
 
 var aArgs = Array.prototype.slice.call（arguments，1），
 fToBind = this，
 fNOP = function（）{}，
 fBound = function（）{
 return fToBind.apply（this instanceof fNOP 
？this 
：oThis || window，
 aArgs.concat（Array.prototype.slice .CALL（参数）））; 
}; 
 
 fNOP.prototype = this.prototype; 
 fBound.prototype = new fNOP（）; 
 
 return fBound; 
}; 
} 
  

I'm having some trouble with plain old JavaScript (no frameworks) in referencing my object in a callback function.

function foo(id) {
    this.dom = document.getElementById(id);
    this.bar = 5;
    var self = this;
    this.dom.addEventListener("click", self.onclick, false);
}

foo.prototype = {
    onclick : function() {
        this.bar = 7;
    }
};

Now when I create a new object (after the DOM has loaded, with a span#test)

var x = new foo('test');

The 'this' inside the onclick function points to the span#test and not the foo object.

How do I get a reference to my foo object inside the onclick function?

解决方案

(extracted some explanation that was hidden in comments in other answer)

The problem lies in the following line:

this.dom.addEventListener("click", self.onclick, false);

Here, you pass a function object to be used as callback. When the event trigger, the function is called but now it has no association with any object (this).

The problem can be solved by wrapping the function (with it's object reference) in a closure as follows:

this.dom.addEventListener(
  "click",
  function(event) {self.onclick(event)},
  false);

Since the variable self was assigned this when the closure was created, the closure function will remember the value of the self variable when it's called at a later time.

An alternative way to solve this is to make an utility function (and avoid using variables for binding this):

function bind(scope, fn) {
    return function () {
        fn.apply(scope, arguments);
    };
}

The updated code would then look like:

this.dom.addEventListener("click", bind(this, this.onclick), false);

---

Function.prototype.bind is part of ECMAScript 5 and provides the same functionality. So you can do:

this.dom.addEventListener("click", this.onclick.bind(this), false);

For browsers which do not support ES5 yet, MDN provides the following shim:

if (!Function.prototype.bind) {
  Function.prototype.bind = function (oThis) {
    if (typeof this !== "function") {
      // closest thing possible to the ECMAScript 5 internal IsCallable function
      throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
    }

    var aArgs = Array.prototype.slice.call(arguments, 1),
        fToBind = this,
        fNOP = function () {},
        fBound = function () {
          return fToBind.apply(this instanceof fNOP
                                 ? this
                                 : oThis || window,
                               aArgs.concat(Array.prototype.slice.call(arguments)));
        };

    fNOP.prototype = this.prototype;
    fBound.prototype = new fNOP();

    return fBound;
  };
}

这篇关于JavaScript回调范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！