在传递成员时,在JavaScript中丢失"this"上下文

Question

我在这里有一个简单的JSFiddle 来演示我的问题.

我有这个JavaScript代码:

var b = document.getElementById("b");

function A() {
    this.f = "1";
}

A.prototype.t = function() {
    b.innerHTML = this.f;
};

var a = new A();

var l = a.t;
l();

this当我试着打电话时为什么未定义？如何在不过度冗长或存储太多的情况下恢复该上下文？

Answer 1

当我试着打电话时为什么这个未定义？

因为在JavaScript中,this主要是通过如何调用函数来设置,而不是在它定义的位置.a.t()设置this为a在调用内,但l()设置this为undefined(在严格模式下)或全局对象(在松散模式下).

更多(在我的博客上):

• 神话方法
• 你必须记住 this

唯一的例外是"绑定"函数(如同Function#bind)或ES6的"箭头"函数(this从它们定义的上下文中获取它们).

如何在不过度冗长或存储太多的情况下恢复该上下文？

Function#bind 通常是一个很好的答案:

var l = a.t.bind(a);
l();

它返回一个新函数,在调用时,调用原始函数并将其this设置为您给出的第一个参数bind.(你也可以绑定其他参数.)这是一个ES5函数,但如果你需要支持真正的旧浏览器,你可以轻松地填充它.

如果您只需要使用特定值进行调用 ,而不是总是使用该值,正如Robert Rossmann指出您可以使用或:lthisFunction#callFunction#apply

l.call(this, 'a', 'b', 'c');    // Calls `l` with `this` set to `a` and args 'a', 'b', and 'c'
l.apply(this, ['a', 'b', 'c']); // Calls `l` with `this` set to `a` and args 'a', 'b', and 'c' -- note they're specified in an array