Question

我想知道如何在原型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>

Answer 1

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);

Answer 2

您可以创建构造函数来创建原型对象。可以使用局部变量模拟私有属性。在这里，我们创建了一个无法在count函数之外修改的本地Counter变量。

构造函数绑定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]) );
}

私人财产和封闭

2 个答案: