我需要更正此代码，以使其在每次点击时递增。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Clicker</title>
<meta name="description" content="">
<style></style>
</head>
<body>
<button>Click!</button>
<script>
const counter = {
cnt: 0,
inc: function() {
cnt++;
console.log(cnt);
}
};
const button = document.getElementsByTagName('button')[0];
button.addEventListener('click', counter.inc, false);
</script>
</body>
</html>
我现在拥有的解决方案可以正常工作，但是不确定其背后的概念是什么，解决方案是：
inc: function() {
counter.cnt++;
console.log(counter.cnt);
}
最佳答案
这只是一个scoping问题，
//Right approach would be,
const counter = {
cnt: 0,
inc: function() {
this.cnt++;
console.log(this.cnt);
}
};
您的错误代码将查找在当前作用域中声明的变量
cnt，并遍历直到全局变量。如果找不到参考，它将引发错误。由于要传递
inc作为事件侦听器，因此必须为其绑定范围，否则，该函数内部的this将指向触发事件的元素。在这种情况下，元素将是button。button.addEventListener('click', counter.inc.bind(counter), false);
或最易读的方法是
button.addEventListener('click', function() {
counter.inc()
}, false);
避免使用
.bind的另一个原因是，一次使用.bind将上下文绑定到函数。之后，您将无法覆盖它的上下文。即使使用.call/.apply