将函数引用到变量时等于 this 的 Javascript

Question

是的，这是另一个关于将 this 存储在变量 (that) 中的问题，但我对此感到困惑：

function Constructor(){
    this.key = 'my key'
};


Constructor.prototype.start = function(){
    var that = this;
    return (function (){
        console.log(that.key)
    }());

};

foo = new Constructor;
foo.start()

bar = new Constructor;
newFoo = bar.start
newFoo()

我想既然this 被存储为一个变量，我可以在不丢失范围的情况下传递start() 方法吗？ 我知道这已被经常讨论，但我找不到适合这种特定情况的答案。

如何在不使用Constructor.apply(this) 的情况下取回newFoo() 中的范围？

谢谢

Answer 1

我想既然这是作为变量存储的，我可以绕过 start() 方法而不会失去作用域？

不，因为您仍在使用 this 的值，就像调用 start 时一样，只是间接调用。你可以在 inside Constructor:

function Constructor() {
    // ...other stuff...

    var that = this;
    this.start = function(){
         console.log(that.key)
    };

    // ...other stuff...
}

（...并删除你放在原型上的那个）。

现在你可以随心所欲地传递start； that 将是调用构造函数时 this 的值。 start 有一个持久的引用，该引用来自对构造函数的调用中的that 变量。

当然，代价是通过Constructor 创建的每个实例都有其自己的 的start 函数副本。大多数现代 JavaScript 引擎都足够聪明，可以重用函数的代码（但它们需要为每个 start 创建单独的函数实例，这只是它们可以重用的幕后代码）。

您的另一个选择不是在Constructor 或start 内处理此问题，而是在/当您在其他地方提供start 的副本时使用Function#bind 处理它。 Function#bind 是 ECMAScript5 (ES5) 功能，但可以在旧引擎上进行填充。

例子：

// Nice boring constructor with `start` on the prototype
// Note I've made the key an argument; in your code, all of them had the same key
function Constructor(key) {
    this.key = key;
}
Constructor.prototype.start = function() {
    console.log(this.key);
};

// **********

// Using it
var c1 = new Constructor("c1");

// Use it normally
c1.start();                       // "c1" as you'd expect

// Use it forgetting that `this` will change
setTimeout(c1.start, 0);          // "undefined" - doh!

// Use it via Function#bind
setTimeout(c1.start.bind(c1), 0); // "c1"

更多（在我的博客上）：

• Closures are not complicated