创建对象
- 工厂模式
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 = '';
thia.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);
};
网友评论