javascript对象中的“this”，闭包行为不一致

Question

所以，这个网站的某个地方可能已经回答了这个问题，但我找不到它，如果是的话。

我无法弄清楚为什么当我创建对象时我的函数内部的this 引用之一似乎已解决，而当我调用其中包含引用的函数时似乎解决了一个问题。这是一些代码：

function MyObj (name) {
    this.locked = false;
    this.name = name;
    this.elem = null;
    this.func1 = function () {
        if (this.locked) return;
        /* code that changes this.name here */
        this.elem.innerHTML = this.name;
    };
    this.func2 = function () {
        this.locked = !this.locked;
        if (this.locked) this.elem.className = "locked";
        else this.elem.className = "unlocked";
    };
}

var myObjGlobal = new MyObj("foo");

function callFunc1 () {
    myObjGlobal.func1();
}

然后我有一个在文档加载时调用的函数：

function onLoad() {
    var myElem = document.getElementById("myElem");
    myObjGlobal.elem = myElem;
    myElem.onclick = myObjGlobal.func2;
    document.getElementById("myButton").onclick = callFunc1;
}

我已确保我所有的 html 元素都有正确的 ID。当我单击myButton 时，我没有收到任何错误。然而，当我点击myElem 时，我得到Uncaught TypeError: Cannot set property 'className' of undefined。

为什么我调用函数时设置了第一个this，创建对象时设置了第二个this？ （或者看起来是这样？）

这里有一个working jsfiddle 显示问题（使用给定的示例代码）。

提前致谢！

Answer 1

myElem.onclick = myObjGlobal.func2;

这与你想象的 JavaScript 不同。它不会给你func2 以任何方式“附加”到它的对象；它只是给你func2。后面调用的时候，作为myElem的方法调用，所以this就是这样。

这是 JS 中一个巨大而可怕的疣。 :)

您可以将其包装在另一个函数中：

myElem.onclick = function() {
    myObjGlobal.func2();
};

或者使用.bind，它实际上做同样的事情，并且现在几乎得到普遍支持：

myElem.onclick = myObjGlobal.func2.bind(myObjGlobal);

还要注意，分配给onclick 有点粗鲁，因为您会破坏任何现有的点击处理程序。你可能想要addEventListener。

Answer 2

myElem.onclick = myObjGlobal.func2;

这完全失去了myObjGlobal； myObjGlobal.func2 只是一个函数，没有任何东西将其 this 与任何东西联系起来。在 JavaScript 中，函数的 this 在调用时确定，而不是在定义时确定。这是 JavaScript 的一个奇妙而有用的特性，它比 Python 更直观。当myElem.onclick 被调用时，它会被绑定到myElem 的this 调用。

Function.prototype.bind 是一个实用程序，可以用callFunc1 做你正在做的事情，顺便说一句：

myElem.onclick = myObjGlobal.func2.bind(myObjGlobal);