目錄

• 前言
• 1、原型繼承
• 2、盜用建構函式
• 3、組合繼承
• 4、原型式繼承
• 5、寄生式繼承
• 6、寄生式組合繼承
• 總結

前言

是門靈活的語言，實現一種功能往往有多種做法,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,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]

優點：集合了【原型繼承】和【盜用建構函式繼承】的優點

缺點：存在效率問題，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)

test1www.cppcns.com.a.push(3)
test1.b=3
console.log(test1.a,test2.a)// [1,3]  [1,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)

優點：根據一個物件克隆建立另一個物件，並增強物件

缺點：同【盜用建構函式繼承】方法在每個例項上都要www.cppcns.com建立一遍

注意：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種繼承方式內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！