[英]Creating Multiple Instances of a Module
我以为我开始很好地理解 JavaScript,但显然不是。 让我用一个例子来解释我的问题。 首先,我定义了以下模块:
var Test = function() {
var counter = 0;
function init() {
alert(counter);
}
return {
counter: counter,
init: init
}
};
然后我创建了 2 个实例:
var test1 = new Test();
var test2 = new Test();
现在我更新计数器变量(因为它是公开的)并发出一些警报。 到现在为止还挺好。
alert(test1.counter); // Alerts 0
test1.counter = 5;
alert(test2.counter); // Alerts 0
test2.counter = 10;
alert(test1.counter); // Alerts 5
现在我最后说以下几点:
test1.init(); // Alerts 0
test2.init(); // Alerts 0
这是我不明白的一点。 为什么这个警报是 0? 我以为第一个警报是 5 个,第二个是 10 个。
如果有人可以解释上述内容如何工作或为我指明正确的方向,我将不胜感激。 谢谢
它保持0
是因为您没有更改Test
的变量,而是更改了函数返回的对象。 counter
保持“私有”,只有Test
的函数可以访问它。
var Test = function() {
var counter= 0;
function init() {
alert(counter);
}
function changeNum(n){
counter = n; //add a function inside `Test` so that it can
} //access the variable
return {
counter: counter,
init: init,
changeNum: changeNum
}
};
现在它将起作用: http : //jsfiddle.net/DerekL/pP284/
var test1 = new Test();
alert(test1.counter); //0
test1.init(); //0
test1.changeNum(5);
alert(test1.counter); //5
test1.init(); //5
有关更多信息,请参阅JavaScript 闭包。
这是发生的事情:
counter
变量做了一个闭包,持有对它的引用。counter
设置为内部counter
值。counter
,但 init() 仍然保留对原始变量的引用。这就是为什么您会看到旧值。
我不确定你在你的帖子中是否犯了错误,但你可以将上面的代码重写如下
var Test = function() {
this.counter = 0;
}
Test.prototype.init = function() {
alert(this.counter);
}
var test1 = new Test();
var test2 = new Test();
test1.counter = 5;
test2.counter = 10;
test1.init(); // alerts 5
test2.init(); // alerts 10
在您的示例中,您没有将计数器设置为 Test 对象/函数的属性,而是当您调用test1.counter
您实际上是在设置一个以前不存在的新属性,并且您的 init 函数没有引用该属性财产。
正如德里克斯的回答所示,您似乎对我的回答所遵循的一种和他的回答之间的两种不同模式有些混淆。
alert(test1.counter); // Alerts 0 ????? It's "0" because you call it before change counter to 5
test1.counter = 5;
alert(test2.counter); // Alerts 0 ????? It's "0" because you call it before change counter to 10
test2.counter = 10;
alert(test1.counter); // Alerts 5 | It's 5 because you call it AFTER change counter to 5
这是我会做的:
function Test() {
this.counter = 0;
this.init = function() { console.log(this.counter); }
};
var test1 = new Test();
var test2 = new Test();
console.log(test1.counter); //0
test1.counter = 5;
console.log(test2.counter); //0
test2.counter = 10;
console.log(test1.counter); //5
test1.init(); //5
test2.init(); //10
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.