javascript - 'this' 关键字未被 function.prototype.call 重新分配

Question

考虑这个模块:

//Adder component
(function init() {

//Initilize variables
const addButton = document.getElementById('add-btn');
const userInput = document.getElementById('user-input');
const userOutput = document.getElementById('user-output');

const App = {
    //Register event handlers
    registerHandlers() {
        addButton.addEventListener('click', function () {
            this.addKeyValue.call(App, userInput.value);
        });
    },

    addKeyValue(input) {
        userOutput.value = input;
    },

};

App.registerHandlers();

})();

当点击事件被触发时，这会失败，因为 this.addKeyValue 是未定义的，因为在该函数的运行时 this 指的是输入元素而不是 App 对象。但这不是 Function.prototype.call 函数的用途吗？为什么我的调用函数没有将 this 绑定(bind)到 App？

Answer 1

But isn't that what the call function is for?

没有。

this.addKeyValue.call会得到this.addKeyValue的值，需要是一个函数，然后调用它。 this inside that function call 的值将是您指定的值。

在您调用 call 函数之前，它不会更改 this 的值。您可以为此使用 bind。

addButton.addEventListener('click', function () {
    this.addKeyValue(userInput.value);
}.bind(App));