Js继承方法

一、es5继承方法

1、原型链继承

优点：父类方法可以复用
缺点：
1、 父类所有的引用类型（对象数组）会被子类共享，更改一个子类的数据，其他数据会受到影响。
2、子类实例不能给父类构造函数传参

• 代码

/** 原型链继承 */
function Person(){
    
    this.name ='小李'
    this.eats =['apple']
    this.getName = function(){
    
        console.log(this.eats)
    }
}
Person.prototype.get =function(){
    
    console.log(this.name)
}

function Student(){
    
  
}

Student.prototype = new Person()


let stu = new Student()

stu.get()

stu.getName()

stu.eats.push('banana')

let stu2 = new Student()

stu2.getName()

• 运行效果

2、构造函数继承

优点：父类的引用类型的数据不会被子类共享，不会互相影响
缺点：子类不能访问父类原型属性上的方法和参数

• 代码

/** 构造函数继承 */
function Person(){
    
    this.name ='小李'
    this.eats =['apple']
    this.getName = function(){
    
        console.log(this.eats)
    }
}
Person.prototype.get =function(){
    
    console.log(this.name)
}

function Student(){
    
  
}

function Student(){
    
    Person.call(this)
}

let stu = new Student()

stu.getName()

stu.get()   //报错

• 运行效果
  

3、组合继承

优点：父类可以复用，父类构造函数的引用类型数据不会被共享
缺点：会调用两次父类的构造函数，会有两份一样的属性和方法，会影响性能

• 代码

/** 组合继承 */
function Person(){
    
    this.name ='小李'
    this.eats =['apple']
    this.getName = function(){
    
        console.log(this.eats)
    }
}
Person.prototype.get =function(){
    
    console.log(this.name)
}
function Student(){
    
    Person.call(this)
}


Student.prototype = new Person()


let stu = new Student()

stu.get()

stu.eats.push('banana')


stu.getName()

let stu2 = new Student()

console.log(stu2)

stu2.getName()

• 运行效果
  

4、寄生组合继承

目前最优的一个继承方法

/** 寄生组合继承 */
function Person(){
    
    this.name ='小李'
    this.eats =['apple']
    this.getName = function(){
    
        console.log(this.eats)
    }
}
Person.prototype.get =function(){
    
    console.log(this.name)
}
function Student(){
    
    Person.call(this)
}

function Fn(){
    

}

Fn.prototype = Person.prototype

Student.prototype = new Fn()


let stu = new Student()

stu.get()

stu.eats.push('banana')


stu.getName()

let stu2 = new Student()

console.log(stu2)

stu2.getName()

• 运行效果
  

二、es6继承方法

使用class类的extends继承

class Person{
    
	constructor(){
    
		this.name = '小李'
		this.eats =['apple']
   		this.getName = function(){
    
       		 console.log(this.eats)
        }
	}
}

class Stydent extends Person {
    

}