原型、原型链、继承模式

摘要: 系统的总结一下原型、原型链及组合继承、原型继承、寄生式继承、寄生组合继承

原型模式

原型模式是js对继承的一种实现

prototype：构造函数中的属性，指向该构造函数的原型对象。

constructor：原型对象中的属性，指向该原型对象的构造函数

_proto_：实例中的属性，指向new这个实例的构造函数的原型对象

例子：

//Person构造函数
function Person() {
name = 'Person';
this.height = '160cm';
}
//在其原型对象中添加age属性
Person.prototype.age = '18';
//Person的实例p1
var p1 = new Person();
p1.age;//18
p1.name;//undefined
p1.height;//160cm

上图中原型与构造函数与实例的关系如下：



Person为构造函数

Person prototype为原型

p1虽然是通过newPerson获得的，但是p1的原型却直接指向Person Prototype，并且只得到了Person中的this的属性。

** var p1 = new Person()都发生了什么？
1.var p1 = new Object(); //此时p1._proto_ = Object Prototype
2.p1._proto_ = Person.prototype;
3.Person.call(p1);//使用新对象p1调用函数Person，将this作用域给p1

原型链

在定义构造函数的prototype属性的时候，直接吧一个对象赋值给prototype。

例子：

//Person构造函数
function Person(){
name = 'Person';
this.height = '160cm';
}
//原型为一个Object实例，并有age属性
Person.prototype = {
age: '18'
}
//Person的实例p1
var p1 = new Person();
p1.age;//18
p1.name;//undefined
p1.height;//160cm

Person Prototype直接变成了Object的一个实例，并且其中不再有constructor参数

Person Prototype直接变成了Object的一个实例，也就是说Person Prototype中有一个_proto_参数，指向Object Prototype

上图中原型与构造函数与实例的关系如下：



在实例p1中想要调用一个方法或者属性的时候会沿原型链向上查找。

借用构造函数

原型链存在的问题，如下：

//父类构造函数
function Super(){
this.color = ['red','black','blue'];
}
//子类构造函数
function Sub(){}
//子类继承父类
Sub.prototype = new Super();
//新建一个子类的实例
var ins1 = new Sub();
ins1.color.push('green');

var ins2 = new Sub();
//因为color为一个引用对象，ins1和ins2的color都指向同一个地址，修改一个就会修改所有实例的color
ins2.color;//'red,belck,blue,green'

防止在原型链模式中，所有子类的实例公用一个父类构造函数的引用对象。

使用 借用构造函数 的方式实现继承。在子类构造函数的内部，调用超类的构造函数构造。如下：

//父类构造函数
function Super(){
this.color = ['red','black','blue'];
}
//子类构造函数
function Sub(){
//调用父类构造函数实现继承
Super.call(this);
}
//新建一个子类的实例
var ins1 = new Sub();
ins1.color.push('green');
ins1.color;//'red,belck,blue,green'

//在实例ins2上重新执行Super构造函数，重新初始化对象，ins2拥有自己的color属性
var ins2 = new Sub();
ins2.color;//'red,belck,blue'

继承

1.组合继承

结合 原型链+借用构造函数 方式，实现组合继承。

借用构造函数使每个实例拥有自己的属性；原型链使每个实例可以共用方法，实现方法的复用。

//Super中定义属性name
function Super(name){
this.name = name;
this.color = ['red','green'];
}
//Super的原型中定义方法
Super.prototype.sayname = function(){
console.log(this.name);
}
function Sub(name, age){
//通过构造函数的方式继承Super的属性
Super.call(this, name);
//定义自己的属性
this.age = age;
}
//通过原型链的方式继承方法
Sub.prototype = new Super();
Sub.prototype.constructor = Sub;

var ins1 = new Sub('ins1',18);

缺点：会调用两次超类的构造函数，一次在Super.call(this, name); 一次在Sub.prototype = new Super();

导致Sub原型上有属性name、age，Sub实例上也有属性name、age。

2.原型式继承

借助原型，基于已有的对象创建新对象。

object.Create(参数1，参数2); 参数1用作新对象的原型对象，参数2为新对象定义额外属性的对象。

传入一个参数的情况：

var person = {
name: 'person'
}
//基于已有的person对象，创建一个新的anthorp对象
var anthorp = Object.create(person);
//相当于如下语句
function object(o){
function F(){};
F.prototype = o;
return new F();
}
//得到一个以person为原型的构造函数的实例
var anthorp = object(person);

传入两个参数的情况：

var person = {
name: 'person'
}
//基于已有的person对象，创建一个新的anthorp对象,覆盖之前的name，并新增age
var anthorp = Object.create(person,{
name: {
value: 'anthorp'
},
age: {
value: 18
}
});
anthorp.name; //anthorp

3.寄生继承

创建一个用于封装继承过程的函数，在函数内部增强对象。并返回对象。

talk is cheap， show me code。

//创建一个用于封装继承过程的函数，传入obj
function create(obj){
//通过调用object方法以obj为基础创建一个新对象。此处object表示任何能够返回新对象的函数
var clone = object(obj);
//以为对象新增方法的方式增强对象
clone.sayHi = function(){
console.log('hi');
};
//返回对象
return clone;
}

//使用create函数
//一个基础对象person
var person = {
name: 'person'
};
//基于基础对象使用寄生模式生成的新对象
var anthorp = create(person);
anthorp.sayHi();

4.寄生组合式继承

上面讲到组合继承的缺点：会调用两次超类的构造函数。

寄生组合式继承：借用构造函数来继承属性，通过原型链混成来继承方法。不必在子类原型中调用超类的构造函数。使用寄生继承来继承超类的原型，再将结果制定给子类的原型。

//寄生组合式继承
function inheritProto(Sub, Super){
//根据Super的原型创建一个新的对象proto
var proto = object(Super.prototype);
//增强新对象，为其赋construtor值
proto.constructor = Sub;
//将新对象赋值给子类的原型。
Sub.prototype = proto;
}
//使用
//Super中定义属性name
function Super(name){
this.name = name;
this.color = ['red','green'];
}
//Super的原型中定义方法
Super.prototype.sayname = function(){
console.log(this.name);
}
function Sub(name, age){
//通过构造函数的方式继承Super的属性,只在此处调用一次Super构造函数
Super.call(this, name);
//定义自己的属性
this.age = age;
}
//调用函数，实现继承。代替之前的Sub.prototype = new Super();语句，防止Super构造函数调用两次
inheritProto(Sub,Super);