阅读 63

js常见的6种继承方式(js继承方式及其优缺点)

1、原型继承

实现:

function Super(){ this.a=1 } Super.prototype.say = function(){ console.log(‘hhh’) } function Sub(){} const test = new Sub() console.log( test.say() )// hhh 复制代码

优点:通过原型继承多个引用类型的属性和方法

缺点:Sub原型变成了Super的实例,如果Super的实例某个属性是引用值,该引用值就会被应用到所有Sub创建的实例中去,会有污染问题。如下

function Super(){ this.a=[1,2] } function Sub(){} Sub.prototype = new Super() const test1 = new Sub() test1.a.push(3) console.log(test1.a)// [1,2,3] const test2 = new Sub() console.log(test2.a)// [1,2,3] 复制代码

2、盗用构造函数

实现:构造函数模式+call

function Super = function(){ this.a = 1 } function Sub = function(){        Super.call(this)        this.b = 2 } const test = new Sub() 复制代码

优点:每个实例都会有自己的a属性,哪怕是引用值也不会被污染

缺点:Super构造函数中的方法在每个实例上都要创建一遍(除非该方法声明提到全局);Sub的实例无法访问Super原型上的方法

3、组合继承

实现:原型继承+盗用构造函数继承

function Super(){ this.a=[1,2] } Super.prototype.say = function(){ console.log(‘hhh’) } function Sub(){     Super.call(this)     this b=2 } Sub.prototype = new Super()   const test1 = new Sub() console.log( test1.say() )// hhh test1.a.push(3) console.log(test1.a)// [1,2,3] const test2 = new Sub() console.log(test2.a)// [1,2] 复制代码

优点:集合了【原型继承】和【盗用构造函数继承】的优点

缺点:存在效率问题,Super始终会被调用两次

4、原型式继承

实现:

es5之前

const obj = { a:1 } function createObj(o){     const Fn(){}     Fn.prototype = o     return new Fn() } const test = createObj(obj) 复制代码

es5之后

const obj = { a:1 } const test = Object.create(obj) 复制代码

优点:对一个对象进行浅克隆创建另一个对象,同时继承该对象的原型属性

缺点:由于是浅克隆,所以实例共享的对象属性如果是引用值,会受污染。如下

const obj = { a:[1,2], b:2 } const test1 = Object.create(obj) const test2 = Object.create(obj) test1.a.push(3) test1.b=3 console.log(test1.a, test2.a)// [1,2,3]  [1,2,3] console.log(test1.b, test2.b)// 3 2 复制代码

5、寄生式继承

实现:构造函数模式+工厂模式

function createObj(o){     let clone = Object.create(o)     clone.say=function(){         console.log(‘hhh’)     }     return clone } const obj = { a:1 } const test = createObj(obj) 复制代码

优点:根据一个对象浅克隆创建另一个对象,并增强对象

缺点:同【盗用构造函数继承】方法在每个实例上都要创建一遍

注意:Object.create不是必须的,返回任何新对象都可以

6、寄生式组合继承

实现:盗用构造函数继承 + 原型式继承

function Super(){ this.a=[1,2] } Super.prototype.say = function(){ console.log(‘hhh’) } function Sub(){     Super.call(this)     this b=2 } Sub.prototype = Object.create(Super.prototype) Sub.prototype.constructor = Sub const test = new Sub() 复制代码

优点:集合了【原型式继承】和【盗用构造函数继承】的优点,效率比【组合继承】更高。


作者:攻城狮小豪
链接:https://juejin.cn/post/7056339655041482788


文章分类
代码人生
文章标签
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐