js中的原型、原型链、继承模式

js中的原型、原型链、继承模式

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


原型模式

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

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

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

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

code:

//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

code中原型与构造函数与实例的关系如下:

  • 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。

code:

//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

code中原型与构造函数与实例的关系如下:

  • 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);

完。

编辑于 2017-12-20