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

Question

这个问题已经有答案了:

How to access the correct `this` inside a callback (15 个回答)

已关闭 8 年前。

我有一个简单的 JSFiddle here展示我的问题。

我有这个 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当我尝试调用 a.t 时未定义？如何恢复该上下文而不过于冗长或存储太多内容？

Answer 1

Why is this undefined when I try to call a.t?

因为在 JavaScript 中，this 主要是根据函数的调用方式来设置的，而不是根据函数的定义位置来设置。 a.t() 在调用中将 this 设置为 a，但 l() 设置 this 要么是 undefined (在严格模式下)，要么是全局对象(在松散模式下)。

更多(在我的博客上):

• Mythical methods
• You must remember this

唯一的异常(exception)是“绑定(bind)”函数(如 Function#bind)或 ES6 的“箭头”函数(从它们所在的上下文中获取它们的 this重新定义)。

How do I recover that context without being overly verbose or storing too much?

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

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

它返回一个新函数，调用时会调用原始函数，并将 this 设置为您提供的 bind 的第一个参数。 (您还可以绑定(bind)其他参数。)这是一个 ES5 函数，但如果您需要支持非常旧的浏览器，您可以轻松地填充它。

<小时/>

如果您只需要使用特定的 this 值调用 l，而不总是让它使用该值，如 Robert Rossmann points out您可以使用Function#call或Function#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