2010四月8
JavaScript Creating Objects — The Factory Pattern
本文，参考自NC的《JavaScript 高级程序设计 第二版》。
在JavaScript中，创建对象的最简单方法就是去 new 一个 Object 对象的实例，并给它添加属性和方法。早期的JavaScript工程师，经常使用这种方式创建JavaScript对象。例如：
var person = new Object();
person.name = “Nicholas”;
person.age = 29;
person.job = “Software Engineer”;
person.sayName = function(){
alert(this.name);
};
person.name = “Nicholas”;
person.age = 29;
person.job = “Software Engineer”;
person.sayName = function(){
alert(this.name);
};
看看人家，NC写这本书的时候才29岁，真牛。
当创建多个具有相同接口的对象时，就要写好多重复的代码。为了解决这个问题，开发者开始使用一种“工厂模式”的变种。
function createPerson(name, age, job){
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function(){
alert(this.name);
};
return o;
}
var person1 = createPerson("Nicholas", 29, "Software Engineer");
var person2 = createPerson("Greg", 27, "Doctor");
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function(){
alert(this.name);
};
return o;
}
var person1 = createPerson("Nicholas", 29, "Software Engineer");
var person2 = createPerson("Greg", 27, "Doctor");
我们把一切参数都扔给了这个工厂，让工厂来生产一个模子刻出来的产品。看起来很完美，解决了创建对象类的问题。但是，这种方法创建类有两大弊端：
- the factory pattern didn ’ t address the issue of object identification，即使用instanceof 运算符检验，其并不属于createPerson类
- 其为每个对象都创建了相同的函数属性，占用了过多的空间
同时，使用工厂模式创建的JavaScript对象类，总是感觉在语义上有些不爽，不像那些使用构造函数方式，用new运算符创建对象那样正规，有点不走寻常路的感觉。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Js Factory Pattern</title>
</head>
<body>
<script type="text/javascript">
function createPerson(name,age,job){
var oPerson = new Object;
oPerson.name = name;
oPerson.age = age;
oPerson.job = job;
oPerson.sayName = function(){
alert(this.name);
}
return oPerson;
}
var person1 = createPerson('simaopig','25','phper');
var person2 = createPerson('虫zi','25','jser');
person1.sayName();
person2.sayName();
</script>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Js Factory Pattern</title>
</head>
<body>
<script type="text/javascript">
function createPerson(name,age,job){
var oPerson = new Object;
oPerson.name = name;
oPerson.age = age;
oPerson.job = job;
oPerson.sayName = function(){
alert(this.name);
}
return oPerson;
}
var person1 = createPerson('simaopig','25','phper');
var person2 = createPerson('虫zi','25','jser');
person1.sayName();
person2.sayName();
</script>
</body>
</html>
让我们验证一下其占用过多内存的问题吧：
js factory pattern
js factory pattern debug
图中我们可以看到，每个createPerson对象的实例，都拥有各自的sayName()副本。上面的图有点不恰当，因为Prototype的函数，在该图看起来也是两个属性。虽然使用prototype其函数指向的是同一个地址。
如何解决这个问题呢？同学们，期待我后面的日志吧（卖个关子，嘿嘿）。。
文章作者：simaopig
本文地址：http://www.xiaoxiaozi.com/2010/04/08/1741/
版权所有 © 转载时必须以链接形式注明作者和原始出处！
写完代码才想起来，其实我26了。。骗人了。 :sad:
[回复]
26没考虑转行吗？
[回复]
@卢松松
能转啥呢？呵呵。这行挺喜欢的啊。先干着吧。
[回复]
国外的代码控就是厉害，牛人一堆堆的，29岁出书
[回复]
这是什么调试工具呢？
[回复]
跟我的域名 太想了
[回复]
@JS领事
IE7、IE8自带的 IEDEVELOPER
[回复]
@Four eyes
哈哈，猿粪啊。猿粪。。。
[回复]
使用的调试软件是什么？
[回复]
抽空更新下我博客链接吧。。。
[回复]
@陶陶
已经更新完了。呵呵。
[回复]
@Brhum
看我给楼上的回复。呵。
[回复]
@减肥食谱
嗯。29岁，而且出的是第二版。。第一版也是人家的。牛呗。
[回复]
是啊现在 写js 也喜欢 直接封装好 ！ 然后 调用即可
[回复]
来过了，支持一下。
[回复]
支持一下啊
[回复]
:x 你还卖关子,太过份了…
[回复]
@十年灯
哈哈。话说你的域名咋又变回jo2了呢？脚儿网。呵呵。我还是很怀念你这个域名的。 :smile:
[回复]