前端开发，必知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 = Childvar arzhChild = new Child()arzhChild.getName() // 'arzh'

原型链继承缺点:

每个实例对引用类型属性的修改都会被其他的实例共享

function Parent() {this.names = ['arzh','arzh1'];
}function Child() {}//主要精髓所在
Child.prototype = new Parent()
Child.prototype.constructor = Childvar 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' ]

优点:

解决了每个实例对引用类型属性的修改都会被其他的实例共享的问题
子类可以向父类传参

function Parent(name) {this.name = name
}function Child(name) {Parent.call(this, name)
}var arzhChild = new Child('arzh');console.log(arzhChild.name); // arzhvar arzhChild1 = new Child('arzh1');console.log(arzhChild1.name); // arzh1

缺点:

无法复用父类的公共函数
每次子类构造实例都得执行一次父类函数
组合式继承(原型链继承和借用构造函数合并)

function Parent(name) {this.name = namethis.body = ['foot','hand']
}function Child(name, age) {Parent.call(this, name)this.age = age
}Child.prototype = new Parent()
Child.prototype.constructor = Childvar 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) {//代替原型式继承的createObjvar 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.getNmae = 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继承
ES6支持通过类来实现继承，方法比较简单，代码如下

class Point {constructor(x, y) {this.x = xthis.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

点此链接：最后我自己是一名从事了多年开发的web前端老程序员，今年年初我花了一个月整理了一份最适合2020年学习的前端学习干货，想分享给每一位喜欢前端的小伙伴

前端开发，必知ES5、ES6的7种继承相关推荐

前端开发应知网站(转载)
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/weixin_43606158/arti ...
web前端入门必知的10个技术
随着HTML5的发展和普及,了解HTML5将成为Web开发人员的必修课.如何把网页做得更美观,对用户更有吸引力,不仅是企业对前端开发人员要求,更是一个合格的web前端工程师的自我修行.今天小编就跟大家 ...
《安卓开发必知的50个技巧》读书笔记
记录一下看<安卓开发必知的50个技巧>认为实用的一下技巧. include标签使用注意事项假设想在标签中覆盖被包括布局所指定的不论什么android:layout_*属性,必须在标签中同 ...
网站前端开发必会基础知识有哪些？
自己工作做得好好的,怎么非要去搞前端?" 很多人离职的时候,可能印象最深的就是爸妈每天说的这句话.起因很简单,就是自己辞了爸妈眼中的"铁饭碗". 他也是如此,毅然辞去了一 ...
Web开发必知的八种隔离级别
Web开发必知的八种隔离级别转自:http://www.infoq.com/cn/articles/eight-isolation-levels ACID性质是数据库理论中的奠基石,它定义了一个理论 ...
linux后台开发必知的io优化知识总结
尊重原创版权: https://www.hanzhangsy.com/hot/105435.html 更多内容参考: https://www.hanzhangsy.com/ linux后台开发必知的i ...
前端开发应知网站(Marksheng)
文章目录一.搜索技巧二.接下来笔者与大家分享一下我个人积累的网站: 1.基础学习类网站 2.开发文档类网站 3.解决开发难点类网站[各种库,插件,开源网站介绍] 4.想要实现快速开发不可不知的 5 ...
2020！前端开发应知网站(墙裂推荐！)
文章目录一.搜索技巧二.接下来笔者与大家分享一下我个人积累的网站: 1.基础学习类网站 2.开发文档类网站 3.解决开发难点类网站[各种库,插件,开源网站介绍] 4.想要实现快速开发不可不知的 5 ...
Web前端开发必学15大技术
快进到现在,我发现现代web开发再一次将发生压倒性的改变.信息资讯的铺天盖地令人迷惑,尤其对于初学者而言.首要原因是新的框架,例如 Angular 2和ReactJs出现了,使用了尚未完全定型的ECM ...
Spring Boot + Redis 实现接口幂等性 | 分布式开发必知！
点击蓝色"程序猿DD"关注我回复"资源"获取独家整理的学习资料! 来源:http://tinyurl.com/y5k2sx5t >>阿里云8月最新 ...

前端开发，必知ES5、ES6的7种继承

前端开发，必知ES5、ES6的7种继承相关推荐

最新文章

热门文章