JS中常见的几种继承方法

1.原型链继承

 // 1.原型链继承
 /*
     缺点：所有属性被共享，而且不能传递参数
 */
 function Person(name,age){
     this.name = name
     this.age = age
 }
 Person.prototype.sayName = () =>{
     console.log(this.name)
 }
 function Man(name){

 }
 Man.prototype = new Person()
 Man.prototype.name = 'zhangsan'
 var zhangsan = new Man('zhangsan')
 console.log(zhangsan.name) //zhangsan

2.构造函数继承（经典继承）

// 构造函数继承（经典继承）
/*
    优点：可以传递参数
    缺点：所有方法都在构造函数内，每次创建对象都会创建对应的方法，大大浪费内存
*/
function Perent(name,age,sex){
    this.name = name
    this.age = age
    this.sex = sex
    this.sayName = function(){
        console.log(this.name)
    }
}

function Child(name,age,sex){
    Perent.call(this,name,age,sex)
}
let child = new Child('lisi' , 18, '男')
console.log(child)   //Child { name: 'lisi', age: 18, sex: '男', sayName: [Function] }

3.组合方式继承（构造函数 + 原型链）

// 3.组合模式（构造函数 + 原型链）
/*
    这种方式充分利用了原型链与构造函数各自的优点，是JS中最常用的继承方法

*/
function Animal(name,age){
    this.name = name
    this.age = age
}
Animal.prototype.sayName = function () {
    console.log(this.name)
}
function Cat(name,age,color){
    Animal.call(this,name,age)
    this.color = color
}
Cat.prototype = Animal.prototype  //将Cat的原型指向Animal的原型
Cat.prototype.constructor = Cat   //将Cat的构造函数指向Cat
let cat = new Cat('xiaobai',3,'white')
console.log(cat) //Cat { name: 'xiaobai', age: 3, color: 'white' }
cat.sayName()   //xiaobai

4.es6方法继承

// 4.es6继承方法
class Per {
    constructor(name){
        this.name = name
    }
    sayName(){
        console.log(this.name)
    }
}

class Son extends Per{
    constructor(name,age){
        super(name)
        this.age = age
    }
}
let son = new Son('zhangsan',18)
console.log(son) //Son { name: 'zhangsan', age: 18 }
son.sayName() //zhangsan