众所周知，在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'
原型链继承缺点:
1.每个实例对引用类型属性的修改都会被其他的实例共享
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' ]
2.在创建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' ]
优点:
function Parent(name) {
this.name = name
}
function Child(name) {
Parent.call(this, name)
}
var arzhChild = new Child('arzh');
console.log(arzhChild.name); // arzh
var arzhChild1 = new Child('arzh1');
console.log(arzhChild1.name); // arzh1
缺点:
function Parent(name) {
this.name = name
this.body = ['foot','hand']
}
function Child(name, age) {
Parent.call(this, name)
this.age = age
}
Child.prototype = new Parent()
Child.prototype.constructor = Child
var arzhChild1 = new Child('arzh1', '18')
arzhChild1.body.push('head1')
console.log(arzhChild1.name,arzhChild1.age) //arzh1 18
console.log(arzhChild1.body) //[ 'foot', 'hand', 'head1' ]
var arzhChild2 = new Child('arzh2', '20')
arzhChild2.body.push('head2')
console.log(arzhChild2.name,arzhChild2.age) //arzh2 20
console.log(arzhChild2.body) //[ 'foot', 'hand', 'head2' ]
优点:
缺点:
Child.prototype = new Parent(),第二次是Parent.call(this, name)造成不必要的浪费复制传入的对象到创建对象的原型上，从而实现继承
function createObj(o) {
function F(){}
F.prototype = o;
return new F();
}
var person = {
name : 'arzh',
body : ['foot','hand']
}
var person1 = createObj(person)
var person2 = createObj(person)
console.log(person1) //arzh
person1.body.push('head')
console.log(person2) //[ 'foot', 'hand', 'head' ]
缺点: 同原型链继承一样，每个实例对引用类型属性的修改都会被其他的实例共享
我们可以使用Object.create来代替上述createObj的实现，原理基本上是一样的。寄生式继承其实就是在createObj的内部以某种形式来增强对象（这里的增强可以理解为添加对象的方法），最后返回增强之后的对象。
function createEnhanceObj(o) {
//代替原型式继承的createObj
var clone = Object.create(o)
clone.getName = function () {
console.log('arzh')
}
return clone;
}
通过createEnhanceObj就可以在创建对象的时候，把对象方法也通过此种方式继承。
缺点: 同借用构造函数一样，无法复用父类函数，每次创建对象都会创建一遍方法
不需要为了子类的原型而多new了一次父类的构造函数，如Child.prototype = new Parent() 只需要复制父类原型的一个副本给子类原型即可
function inheritPrototype(Parent, Child){
Child.prototype = Object.create(Parent.prototype) //创建父类原型的一个副本,把副本赋值给子类原型
Child.prototype.constructor = Child;
}
function Parent(name) {
this.name = name
}
Parent.prototype.getName = function () {
console.log(this.name)
}
function Child(color) {
Parent.call(this, 'arzh')
this.color = color
}
inheritPrototype(Parent, Child)
var arzhChild = new Child('red')
console.log(arzhChild.name) // 'arzh'
优点: 不必为了指定子类型的原型而调用父类型的构造函数
ES6支持通过类来实现继承，方法比较简单，代码如下
class Point {
constructor(x, y) {
this.x = x
this.y = y
}
toString() {
return this.x + '' + this.y
}
}
class ColorPoint extends Point {
constructor(x, y, color) {
super(x, y) //调用父类的constructor(x, y)
this.color = color
}
toString() {
return this.color + ' ' + super.toString() // 调用父类的toString()
}
}
var colorPoint = new ColorPoint('1', '2', 'red')
console.log(colorPoint.toString()) // red 12
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注插件窝的更多内容!