首页 > 网络编程 > JavaScript > javascript技巧 > js的6种继承方式

js中常见的6种继承方式总结

2022-01-24 14:51:20 作者：攻城狮小豪

js中的继承与其说是对象的继承,但更像是让函数的功能和用法的复用,下面这篇文章主要给大家介绍了关于js中常见的6种继承方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

前言

js是门灵活的语言，实现一种功能往往有多种做法,ECMAScript没有明确的继承机制，而是通过模仿实现的，根据js语言的本身的特性,js实现继承有以下通用的几种方式

温馨提示：本文中Super函数都是指父类，Sub函数都是代表子类。同时文中会涉及到“构造函数模式”和“工厂模式”，如果不熟悉的小伙伴，可以先看看这篇介绍 js常见的4种创建对象方式。

1、原型继承

实现：

function Super(){ this.a=1 }
Super.prototype.say = function(){ console.log(‘hhh') }
function Sub(){}
Sub.prototype = new Super()

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 = objectCopy(o)
    clone.say=function(){
        console.log(‘hhh')
    }
    return clone
}

const obj = { a:1 }
const test = createObj(obj)

优点：根据一个对象克隆创建另一个对象，并增强对象

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

注意：objectCopy是对入参对象的复制

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()

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

总结

到此这篇关于js中常见的6种继承方式的文章就介绍到这了,更多相关js的6种继承方式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！