从嵌套函数访问嵌套变量

Question

<script>
const counter ={
cnt: 0,
inc: function(){
cnt++;
console.log(cnt);
}        
}
const button = document.getElementsByTagName('button')[0];
button.addEventListener('click', counter.inc, false);
</script>

如果我按原样运行这段代码，我会得到一个未定义变量的错误。所以我可以通过在函数中添加couner.cnt来解决这个问题。然而，我不想这样做。还有别的办法吗？

Answer 1

除非在counter之外定义全局变量，否则没有其他方法。

像这样：

var cnt = 0;
const counter = {
inc: function () {
cnt++;
console.log(cnt);
}
}
const button = document.getElementsByTagName('button')[0];
button.addEventListener('click', counter.inc, false);

<button name="button">click me</button>

但是有更好的方法。您需要使用counter.cnt而不是cnt:

const counter ={
cnt: 0,
inc: function(){
counter.cnt++;
console.log(counter.cnt);
}        
}
const button = document.getElementsByTagName('button')[0];
button.addEventListener('click', counter.inc, false);

<button name="button">click me</button>

Answer 2

const counter = {
cnt: 0,
inc: function() {
this.cnt++;
console.log(this.cnt);
}        
}
const button = document.getElementsByTagName('button')[0];
button.addEventListener('click', () => counter.inc(), false);

<button name="button">click me</button>