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';
}
});