JavaScript的.bind（）不在这个例子中工作？

Question

这是代码：

var num = 0
window.onload = function() {
    var button = document.getElementById('button')
    button.onclick = function() {
        addNum.bind(this)
  }
}
function addNum() {
    num++
    this.textContent = `hit ${num} times`
}

addNum.apply(this)和addNum.call(this)都可以。 我很困惑。 有人可以帮忙吗？ 非常感谢！

Answer 1

bind创建一个新函数，并绑定this值（可能还有参数）。 如果要执行该函数，请使用()调用：

button.onclick = function() {
  addNum.bind(this)();
}

但是，当.call完成相同的功能而无需额外的()时，这样做是很愚蠢的：

button.onclick = function() {
  addNum.call(this);
}

在不执行创建的函数的情况下调用.bind类似于：

button.onclick = function() {
  const someFn = () => console.log('foo');
}

在这里，您创建了一个名为someFn的函数，但从未调用过它。 除非调用结果函数，否则它将不使用。

Answer 2

虽然您可以看到addNum.call()和addNum.apply()的addNum()执行了addNum()函数并更改了页面上的某些内容），但addNum.bind(this)没有任何副作用。

Function.bind()不调用用于调用它的函数，而是创建并返回另一个函数。 但是您的代码只是忽略了返回值。

您的代码应遵循以下原则：

window.onload = function() {
    var button = document.getElementById('button')
    var boundAddNum = addNum.bind(this);
    button.onclick = function() {
        boundAddNum();
  }
}

Answer 3

var num = 0;
$(function() {
var button = document.getElementById('button');
button.onclick = function() {
var addNumX  = addNum.bind(this);
addNumX();
}
var addNum = function() {
num++;
alert("OK");
this.textContent = 'hit ${num} times';
}
});