javascript - 'this'关键字如何在函数调用中解析

Question

对于刚接触 Javascript 的人来说，这可能是一个典型的问题。我确实研究了许多类似的问题，但无法解释我所看到的行为。

下面的代码应该说明我正在尝试做什么。我有 2 个对象 MyObjectA 和 MyObjectB。

MyObjectB 有一个方法 echo，它只记录一条消息。它在消息前加上 this.name 前缀，试图知道谁在执行该方法。它还打印 this 的值。

MyObjectA 有一个名为 callAFunctionWithMessage 的方法，它就是这样做的。它接受一条消息和一个函数并调用它。

在全局范围内，对象被实例化和调用。我看到的是 this.name 是 undefined。当在浏览器中执行时，this 的值为 DOMWindowObject，而在 nodejs 中执行时，则为一些类似基础设施的大型对象。有人可以帮助我了解这种行为吗？鉴于 MyObjectA 正在调用 echo，我希望“this”指向 MyObjectA。

我也执行 MyObjectB.echo('hello')，其中 this 按预期指向 MyObjectB。

function MyObjectA(name) {
    this.name=name;
}

MyObjectA.prototype = {
    name : "",
    callAFunctionWithMessage: function (msg, callback) {
        callback(msg);
    }
}

function MyObjectB(name) {
    this.name = name;
    }

MyObjectB.prototype = {
    name :"",
    echo: function(msg) {
        var messageToPrint='[from '+this.name+']'+msg;
        console.log(messageToPrint, " : " + this);
    }
}

var a = new MyObjectA("ObjA");
var b = new MyObjectB("objB");

a.callAFunctionWithMessage('hello from A!', b.echo);
// => [from result]hello from A! : [object Window]

b.echo('hello!');
// => [from objB]hello! : [object Object]

Answer 1

当你这样做时:

a.callAFunctionWithMessage('hello from A!', b.echo);

函数 b.echo 正在通过全局上下文(在您的例子中是窗口)传递。所以 this.name 不会成为对象 a 的名称属性，但它将成为全局上下文的 name 属性，因此您将其视为未定义。您可以改为使用 function.bind 将其更改为在 a 本身的上下文中调用

 a.callAFunctionWithMessage('hello from A!', b.echo.bind(a)); //now you set the callback with the context of b itself.

在您的情况下，当在回调方法内时，this 将代表全局范围。

fiddle

或者通过将上下文设置为 current 来更改调用回调的方式，以确保它采用没有上下文绑定(bind)的上下文。

MyObjectA.prototype = {
    name : "",
    callAFunctionWithMessage: function (msg, callback) {
        callback.call(this, msg);
    }
}

Fiddle