创建对象
- 工厂模式
function createPerson(name, age){
var o = new Object();
o.name = name;
o.age = age;
return o;
}
// 使用
var p1 = createPerson('zph', 18);
这样做就找不到原型关系了,没有解决对象识别问题。
- 构造函数
function Person(name, age){
this.name = name;
this.age = age;
this.showName = function(){ return this.name; };
}
// 使用
var p1 = new Person('zph', 18);
var p2 = new Person('zhh', 14);
解决了对象识别问题,但多个对象实例不能共享相同的方法,冗余。
- 原型模式
function Person(){
}
Person.prototype.name = '';
Person.prototype.age= 0;
// 使用
var p1 = new Person();
var p2 = new Person();
所有对象实例共享属性和方法,可能导致数据出错。
- 组合模式(组合使用构造函数和原型模式)
function Person(){
this.name = '';
this.age = 0;
}
Person.prototype.showName = function() { return this.name; };
// 使用
var p1 = new Person();
var p2 = new Person();
目前最流行的方式。
- 动态原型模式
function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
if (typeof this.showName != "function"){
Person.prototype.showName = function(){ return this.name; };
}
}
仅第一次初始原型。
- 寄生构造函数模式
function Person(name, age){
var o = new Object();
o.name = name;
o.age = age;
return o;
}
// 使用
var p1 = new Person('zph', 18);
与工厂函数唯一的不同,是使用了new
操作符,这会导致创建两次对象。
- 稳妥构造函数模式
function createPerson(name, age){
var o = new Object();
var _name = name;
var _age = age;
o.showName = function() { return _name; };
return o;
}
// 使用
var p1 = createPerson('zph', 18);
只可以通过指定方法获取相应的值,安全。
继承
- 原型链继承
function Animal() {
this.name = 'Animal';
}
Animal.prototype.showName = function () { return this.name; };
// 继承
function Cat () {
this.name = 'Cat';
}
Cat.prototype = new Animal();
引用类型会被共享。
- 借用构造函数继承
function SuperType(){
this.colors = ["red", "blue", "green"];
}
function SubType(){
//继承了SuperType
SuperType.call(this);
}
这就又没办法复用函数了,另外也失去了继承关系,由于没有原型链 ,无法识别 SubType
是 SuperType
的子类。。。
- 组合继承(原型链和构造函数组合)
function SuperType(name){
this.name = name;
this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function(){
alert(this.name);
};
function SubType(name, age){
// 继承属性
SuperType.call(this, name);
// 自身属性
this.age = age;
}
// 继承方法
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;
为了继承属性和共享方法,两次调用了 SuperType,同时对象自身和原型链都会保存一份属性,造成数据冗余。
- 原型式继承
function object(o){
function F(){}
F.prototype = o;
return new F();
}
// 使用
var p1 = {
name: "Nicholas",
friends: ["Shelby", "Court", "Van"]
};
// 基于已有的 p1 创建新对象 p2
var p2 = object(p1);
基于已有的对象创建新对象,ES5 将这种原型式继承规范化为 Object.create()
- 寄生式继承
function createAnother(original){
var clone = Object(original); // 通过调用函数创建一个新对象
clone.sayHi = function(){ // 增强这个对象
alert("hi");
};
return clone; // 返回这个对象
}
var person = {
name: "Nicholas",
friends: ["Shelby", "Court", "Van"]
};
// 使用
var anotherPerson = createAnother(person);
也是基于已有的对象创建新对象。(这里的 Object()
函数调用有疑问,见下)
- 寄生组合式继承(通过借用构造函数来继承属性,通过原型链的混成形式来继承方法)
function inheritPrototype(subType, superType){
var prototype = Object(superType.prototype); //创建对象
prototype.constructor = subType; //增强对象
subType.prototype = prototype; //指定对象
}
// 使用
function SuperType(name){
this.name = name;
this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function(){
alert(this.name);
};
// 子类
function SubType(name, age){
SuperType.call(this, name);
this.age = age;
}
inheritPrototype(SubType, SuperType);
SubType.prototype.sayAge = function(){
alert(this.age);
};
以上是高程上的摘抄(有少量改动),其中寄生组合式继承略有疑问,不知道是不是高程写错了,这样的方式破坏了原型链,因为:
Object(superType.prototype) === superType.prototype // true
Object(someObject)
是类型转换,而不是创建对象,我想这里是一个翻译错误,这里的 Object()
应该是指上文的 object()
函数,对应 Obect.create()
,已在图灵社区提交勘误,待续。
最后,记录下自己的继承实现方式:
function object(o){ // ES5 中 Object.create() 的 polyfill 函数,两者效果一致
function F(){}
F.prototype = o;
return new F();
}
function inheritPrototype(subType, superType){
subType.prototype = object(superType.prototype); // 指定对象原型,或使用 ES5 的 Object.create()
subType.prototype.constructor = subType; // 修正构造函数
}
function SuperType(name){
this.name = name;
this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function(){
alert(this.name);
};
function SubType(name, age){
SuperType.call(this, name);
this.age = age;
}
inheritPrototype(SubType, SuperType);
SubType.prototype.sayAge = function(){
alert(this.age);
};