私有属性和闭包
私有属性和闭包
提问于 2013-12-11 06:20:54
我想知道如何使用原型obeject和闭包的私有属性来创建JS计数器(如下所示)。如果有人可以告诉我如何，但也评论它，以便我可以理解的步骤和过程，我会非常感谢。
<!DOCTYPE html>
<html>
<body>
<button name="button" class="click-tracking">Click Me</button>
<script>
var counts = {},
track = document.getElementsByClassName('click-tracking');
for (var i = 0, max = track.length; i < max; i++) {
track[i].addEventListener('click', function() {
var name = this.name,
ele = document.getElementById(name + '-count') || false;
if (typeof counts[name] === 'undefined') {
counts[name] = 0;
}
if (!ele) {
var ele = document.createElement('div');
ele.id = name + '-count';
this.parentNode.insertBefore(ele, this.nextSibling);
}
ele.innerHTML = counts[name]++;
});
}
</script>
</body>
</head>
</html>回答 2
Stack Overflow用户
发布于 2013-12-11 08:12:03
prototype是在多个实例之间共享的，因为您只能通过闭包来模拟private，所以您不能在Prototype上具有特定于实例的私有值。
有关构造函数和原型的介绍，您可以阅读this answer。
创建一个可以启动和停止的计数器的构造函数看起来像这样(我使用_private命名约定而不是闭包。
var Counter = function(name){
//instance specific values
this._intervalid=false;
this._counter=0;
this.name=name;
};
Counter.prototype.start=function(){
//create closure for invoking object
var me=this;
this._intervalid=setInterval(function(){
me._counter++;
console.log(me.name,me._counter);
},100);
};
Counter.prototype.stop=function(){
if(this._intervalid){
clearInterval(this._intervalid);
}
};
var c1=new Counter("counter1");
var c2=new Counter("counter2");
setTimeout(function(){c2.start();},200);
c1.start();
setTimeout(function(){c2.stop();c1.stop();},2000);Stack Overflow用户
发布于 2013-12-11 08:15:45
您可以创建一个构造函数来创建原型对象。私有属性可以用局部变量来模拟。这里我们创建了一个不能在Counter函数外部修改的本地count变量。
构造函数绑定click处理程序并创建一个getter方法来返回当前计数。getCount和事件处理程序关闭每个实例的计数值。
function Counter(trackElement) {
var count = 0;
this.getCount = function() { return count; }
trackElement.addEventListener('click', function() {
count++;
});
}
var counters = [],
track = document.getElementsByClassName('click-tracking');
for (var i = 0, i < track.length; i++) {
counters.push( new Counter(track[i]) );
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20506576
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号