javascript - 在 JavaScript 原型(prototype)函数中保留对 "this"的引用

Question

<分区>

Answer 1

为了保留上下文，bind 方法非常有用，它现在是最近发布的 ECMAScript 5th Edition 的一部分。规范，这个函数的实现很简单(只有8行):

// The .bind method from Prototype.js 
if (!Function.prototype.bind) { // check if native implementation available
  Function.prototype.bind = function(){ 
    var fn = this, args = Array.prototype.slice.call(arguments),
        object = args.shift(); 
    return function(){ 
      return fn.apply(object, 
        args.concat(Array.prototype.slice.call(arguments))); 
    }; 
  };
}

你可以像这样在你的例子中使用它:

MyClass.prototype.myfunc = function() {

  this.element.click((function() {
    // ...
  }).bind(this));
};

另一个例子:

var obj = {
  test: 'obj test',
  fx: function() {
    alert(this.test + '\n' + Array.prototype.slice.call(arguments).join());
  }
};

var test = "Global test";
var fx1 = obj.fx;
var fx2 = obj.fx.bind(obj, 1, 2, 3);

fx1(1,2);
fx2(4, 5);

在第二个示例中，我们可以观察到更多关于 bind 的行为。

它基本上生成一个新函数，负责调用我们的函数，保留函数上下文(this 值)，它被定义为 bind.

其余的参数只是传递给我们的函数。

请注意，在此示例中，调用函数 fx1 时没有任何对象上下文 (obj.method() )，就像简单的函数调用，在这种调用中，里面的this关键字会引用到Global对象，会提示“global test”。

现在，fx2 是 bind 方法生成的新函数，它会调用我们的函数，保留上下文并正确传递参数，它会警告“obj test 1, 2, 3, 4, 5"因为我们调用它时添加了两个额外的参数，它已经绑定(bind)了前三个。