问题描述
这是代码：
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)都可以。
我很困惑。
有人可以帮忙吗？
非常感谢！
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的函数，但从未调用过它。
除非调用结果函数，否则它将不使用。
2楼
虽然您可以看到addNum.call()和addNum.apply()的addNum()执行了addNum()函数并更改了页面上的某些内容），但addNum.bind(this)没有任何副作用。
不调用用于调用它的函数，而是创建并返回另一个函数。 但是您的代码只是忽略了返回值。
您的代码应遵循以下原则：
window.onload = function() {
var button = document.getElementById('button')
var boundAddNum = addNum.bind(this);
button.onclick = function() {
boundAddNum();
}
}
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';
}
});