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创建一个 new 函数，该函数具有绑定的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.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';
}
});

Javascript .bind（）在此示例中不起作用？

3 个答案: