javascript - 如何创建一个保留 var 值的函数？

Question

我有这个代码

<input type="button" id="buttona" onClick="myFunction('this is buttonA')" />
<input type="button" id="buttonb" onClick="myFunction('this is buttonB')" />
<script>
function myFunction(message) {
  var count=10;
  count = count + 1;
  alert(message + ":" + count);
}
</script>

我想要的是当用户点击buttonA时，显示消息“this is buttonA:11”，如果用户再次点击buttonA，显示“this is buttonA:12”，如果用户点击buttonB，则显示消息“这是按钮 B:11”。我不想定义全局计数器变量，我想在函数上“封装”。 IE。如果我添加:

<input type="button" id="buttonc" onClick="myFunction('this is buttonC')" />;

无需定义几乎 任何其他东西即可拥有相同的功能。

一个计数器相互独立并保存值。理解我的问题？

提前致谢

Answer 1

您可以考虑使用闭包。基本思想是创建一个创建“myFunctions”的函数，而不是单个“myFunction”。

function makeCounter(message){
    //We move count outside the onclick handler, so it can increment
    //but its not a global since we are inside another function!
    var count = 10; 
    return function(){
        count = count + 1;
        alert(message + ":" + count);
    };
}

//now use makeCounter to create encapsulated onclick handlers:

document.getElementById("buttona").onclick = makeCounter("This is button A");
document.getElementById("buttonb").onclick = makeCounter("This is button B");