js实现继承的方法

js实现继承的方法

构造函数、原型和实例的关系：

构造函数是用来创建对象的函数，其本质也是函数，与普通函数的区别在于构造函数通过 new 操作符来调用
每个构造函数都有一个原型对象（prototype），原型对象都包含一个指向构造函数的指针（constructor），而实例都包含一个指向原型对象的内部指针（__ proto __）

原型链继承

//父类构造函数People
function People(name) {
    //属性
    this.name = name
    //方法
    this.say = function() {
        return "my name is " + this.name
    }
}
//父类构造函数原型
People.prototype.age = 18
People.prototype.play = function() {
    return this.name + "play"
}


//子类构造函数Peo
function Peo() {
    this.name = "廊坊吴彦祖"
}
//Peo通过原型链继承了People
Peo.prototype = new People()

//创建Peo的实例
var p = new Peo()
console.log(p.name)   //"廊坊吴彦祖"
console.log(p.age)   //18
console.log(p.say())   //"my name is 廊坊吴彦祖"
console.log(p.play())   //"廊坊吴彦祖play"
console.log(p instanceof People)   //true

原理：

让子类构造函数的原型对象等于父类构造函数的实例，利用原型让子类构造函数继承另父类构造函数的属性和方法

特点：

• 子类实例可以继承实例的构造函数的属性，父类构造函数属性，父类原型的属性（新实例不会继承父类实例的属性）

缺点：

• 创建子类实例时无法向父类构造函数传参
• 所有新实例都会共享父类实例的属性（原型上的属性是共享的，一旦实例修改了原型属性，另一个实例的原型属性也会被修改）
• 继承单一，无法实现多继承

借用构造函数继承

//父类构造函数People
function People(name) {
    //属性
    this.name = name
    //方法
    this.say = function() {
        return "my name is " + this.name
    }
}
//父类构造函数原型
People.prototype.age = 18
People.prototype.play = function() {
    return this.name + "play"
}

//子类构造函数Peo
function Peo() {
    //Peo通过call()或者apply()方法继承了People
    People.call(this, "廊坊吴彦祖")
    //People.apply(this, ["廊坊吴彦祖"])
}

//创建Peo的实例
var p = new Peo()
console.log(p.name)   //"廊坊吴彦祖"
console.log(p.age)   //undefined
console.log(p.say())   //"my name is 廊坊吴彦祖"
console.log(p.play())   //报错：Uncaught TypeError: p.play is not a function
console.log(p instanceof People)   //false

原理：

在子类型构造函数的内部调用父类型构造函数，用 call() 和 apply() 方法将父类构造函数引入子类构造函数

特点：

• 子类型构造函数可以向父类型构造函数传递参数
• 可以继承多个构造函数的属性（call() 或 apply() 多个构造函数）
• 解决了所有新实例都会共享父类实例的属性的问题

缺点：

• 只继承了构造函数的属性和方法，不能继承原型的属性和方法
• 无法实现构造函数的复用，每次都要重新调用
• 每个新实例都有父类构造函数的副本

组合继承（组合原型链继承和借用构造函数继承）（常用）

//父类构造函数People
function People(name) {
    //属性
    this.name = name
    //方法
    this.say = function() {
        return "my name is " + this.name
    }
}
//父类构造函数原型
People.prototype.age = 18
People.prototype.play = function() {
    return this.name + "play"
}

//子类构造函数Peo
function Peo() {
    //Peo通过call()方法继承了People
    People.call(this, "廊坊吴彦祖")
}
//Peo通过原型链继承了People 
Peo.prototype = new People()

//创建Peo的实例
var p = new Peo()
console.log(p.name)   //"廊坊吴彦祖"
console.log(p.age)   //18
console.log(p.say())   //"my name is 廊坊吴彦祖"
console.log(p.play())   //"廊坊吴彦祖play"
console.log(p instanceof People)   //true 

原理：

组合原型链继承和借用构造函数继承，通过原型链实现对原型属性和方法的继承，通过借用构造函数实现对实例属性和方法的继承

特点：

• 可以继承父类构造函数原型上的属性，向父类构造函数传参，实现父类构造函数的复用
• 每个新实例引用的构造函数属性都是私有的

缺点：

• 调用了两次父类构造函数（耗内存），子类的构造函数会代替原型上的那个父类构造函数

原型式继承

//父类构造函数People
function People(name) {
    //属性
    this.name = name
    //方法
    this.say = function() {
        return "my name is " + this.name
    }
}
//父类构造函数原型
People.prototype.age = 18
People.prototype.play = function() {
    return this.name + "play"
}

//用函数封装子类
function create(obj) {
	//子类构造函数Peo
    function Peo() {}
    //Peo通过原型链继承了传入的参数
    Peo.prototype = obj
    //返回Peo的实例
    return new Peo()
}

//创建People的实例
var people = new People()
//使用封装好的函数创建Peo的实例
var p = create(people)
console.log(p.age)   //18
console.log(p.say())   //"my name is 廊坊吴彦祖"
console.log(p.play())   //"廊坊吴彦祖play"
console.log(p instanceof People)   //true

原理：

使用函数包装子类构造函数，让这个构造函数的原型指向要继承的对象，返回这个构造函数的实例

特点：

• 使用函数封装，类似 Object.create() 的原理，对传入其中的对象进行浅拷贝

缺点：

• 与原型链继承相似，所有新实例都会共享父类实例的属性
• 无法实现复用

寄生式继承

//父类构造函数People
function People(name) {
    //属性
    this.name = name
    //方法
    this.say = function() {
        return "my name is " + this.name
    }
}
//父类构造函数原型
People.prototype.age = 18
People.prototype.play = function() {
    return this.name + "play"
}

//用函数封装子类
function create(obj) {
	//子类构造函数Peo
    function Peo() {}
    //Peo通过原型链继承了传入的参数
    Peo.prototype = obj
    //返回Peo的实例
    return new Peo()
}
//创建People的实例
var people = new People()

//再次用函数封装并传递参数
function createPeo(obj, name) {
    var peo = create(obj)
    peo.name = name
    return peo
}

//使用封装好的函数创建Peo的实例
var p = createPeo(people, "廊坊吴彦祖")
console.log(p.name)   //"廊坊吴彦祖"
console.log(p.age)   //18
console.log(p.say())   //"my name is 廊坊吴彦祖"
console.log(p.play())   //"廊坊吴彦祖play"
console.log(p instanceof People)   //true

原理：

封装了原型式继承，创建一个仅用于封装继承过程的函数，该函数在内部创建并以某种方式来增强构造函数的实例，最后再返回这个实例

特点：

• 子类型构造函数可以向父类型构造函数传递参数
• 可以添加属性和方法

缺点：

• 没使用到原型，无法实现复用

寄生组合式继承（常用）

//父类构造函数People
function People(name) {
    //属性
    this.name = name
    //方法
    this.say = function() {
        return "my name is " + this.name
    }
}
//父类构造函数原型
People.prototype.age = 18
People.prototype.play = function() {
    return this.name + "play"
}

//用函数封装子类
function create(obj) {
	//子类构造函数P
    function P() {}
    //Peo通过原型链继承了传入的参数
    P.prototype = obj
    //返回P的实例
    return new P()
}
//实例的原型继承了父类构造函数People的原型
var pp = create(People.prototype)

//组合
//子类构造函数Peo
function Peo() {
    //Peo通过call()方法继承了People
    People.call(this, "廊坊吴彦祖")
}
//Peo通过原型链继承了实例
Peo.prototype = pp

//创建Peo的实例
var p = new Peo()
console.log(p.name)   //"廊坊吴彦祖"
console.log(p.age)   //18
console.log(p.say())   //"my name is 廊坊吴彦祖"
console.log(p.play())   //"廊坊吴彦祖play"
console.log(p instanceof People)   //true

原理：

通过借用构造函数来继承属性，通过原型链的混成形式来继承方法，就是使用寄生式继承来继承父类构造函数的原型，然后再将结果指定给子类构造函数的原型

特点：

• 子类构造函数继承了父类构造函数的属性，原型的属性和方法
• 解决了组合继承的问题，只调用了一次父类构造函数