不要将 Array、Object 等类型指定给 prototype

作者:vkvi 来源:ITPOW(原创) 日期:2009-6-25

在 JavaScript 中,注意不要将 Array、Object 等类型指定给 prototype,除非您的应用需要那么做。先观察如下代码:

function Foo()
{
}
Foo.prototype.n = 123;
Foo.prototype.date = { year:2009, month:6, day:25 };
 
var f1 = new Foo();
var f2 = new Foo();
f1.n = 456;
f1.date.day = 24;
alert(f2.n); // 结果为 123
alert(f2.date.day);

f2.date.day 结果是多少?25?错,应该是 24。

这是由于 Array、Object 等与数字、字符串等基本的类型在内存中存储方式不同:

var items = new Array();

items 存储的并不是数组的内容,数组的内容存的另一个地方,而 items 变量只是存储这个数组的内存地址。

所以 Foo.prototype.date = { year:2009, month:6, day:25 }; 这句实际上已经指定了该 Object 的内存,证据

f1、f2 的 date 的内存位置不同,但其内存中指向的都是同一个 Object(date) 的内存,所以造成了上述的答案。

要让每个实例的 date 不同,可以这么解决:

function Foo()
{
}
Foo.prototype.date = null;
Foo.prototype.ini = function ()
{
    this.date = { year:2009, month:6, day:25 };
}
 
var f1 = new Foo();
f1.ini();
var f2 = new Foo();
f2.ini();
f1.date.day = 24;
alert(f2.date.day); // 结果为 25

或者直接放在“构造函数”中:

function Foo()
{
    this.date = { year:2009, month:6, day:25 };
}
Foo.prototype.date = null;
 
var f1 = new Foo();
var f2 = new Foo();
f1.date.day = 24;
alert(f2.date.day); // 结果为 25

当然,这两种解决办法中,实际上都可以将 Foo.prototype.date = null; 去掉,因为在为 this.date 赋值时,如果 this.date 不存在,会创建,相当于只要第一次使用 this.date 就创建了这个属性。

只不过加上 Foo.prototype.date = null; 可以在一些编辑器中自动感知 Foo 的属性,方便编程罢了。(更新:Visual Web Developer 2008 SP1 已经能够感知 this. 的东西,所以也可以去掉 Foo.prototype.date = null)

相关阅读

相关文章