ES5、ES6的7种继承

在ES6之前,前端是不存在类的语法糖,所以不能像其他语言一样用extends关键字就搞定继承关系,需要一些额外的方法来实现继承。下面就介绍一些常用的方法,红宝书已经概括的十分全面了,所以本文基本就是对红宝书继承篇章的笔记和梳理。

原型链继承

function Parent() {
    this.name = 'arzh'
}

Parent.prototype.getName = function () {
    console.log(this.name)
}

function Child() {

}

//主要精髓所在

Child.prototype = new Parent()

Child.prototype.constructor = Child

var arzhChild = new Child()

arzhChild.getName() // 'arzh'

原型链继承缺点:

每个实例对引用类型属性的修改都会被其他的实例共享 function Parent() { this.names = ['arzh','arzh1']; }

function Child() {

}

//主要精髓所在

Child.prototype = new Parent()

Child.prototype.constructor = Child

var arzhChild2 = new Child()

arzhChild2.names.push('arzh2')

console.log(arzhChild2.names) //[ 'arzh', 'arzh1', 'arzh2' ]

var arzhChild3 = new Child()

arzhChild3.names.push('arzh3')

console.log(arzhChild3.names) //[ 'arzh', 'arzh1', 'arzh2', 'arzh3' ]


在创建Child实例的时候,无法向Parent传参。这样就会使Child实例没法自定义自己的属性(名字)

借用构造函数(经典继承)**

function Parent() {

    this.names = ['arzh','arzh1']
}

function Child() {

    Parent.call(this)
}

var arzhChild2 = new Child()

arzhChild2.names.push('arzh2')

console.log(arzhChild2.names) //[ 'arzh', 'arzh1', 'arzh2' ]

var arzhChild3 = new Child()

arzhChild3.names.push('arzh3')

console.log(arzhChild3.names) //[ 'arzh', 'arzh1', 'arzh3' ]

优点: 解决了每个实例对引用类型属性的修改都会被其他的实例共享的问题

子类可以向父类传参

实战面试的链接 :

更多面试答题可以前往智一面,海量面试答题,供你所选。