欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js中常見的6種繼承方式總結(jié)

 更新時間:2022年01月24日 15:12:15   作者:攻城獅小豪  
js中的繼承與其說是對象的繼承,但更像是讓函數(shù)的功能和用法的復用,下面這篇文章主要給大家介紹了關于js中常見的6種繼承方式,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

前言

js是門靈活的語言,實現(xiàn)一種功能往往有多種做法,ECMAScript沒有明確的繼承機制,而是通過模仿實現(xiàn)的,根據(jù)js語言的本身的特性,js實現(xiàn)繼承有以下通用的幾種方式

溫馨提示:本文中Super函數(shù)都是指父類,Sub函數(shù)都是代表子類。同時文中會涉及到“構(gòu)造函數(shù)模式”和“工廠模式”,如果不熟悉的小伙伴,可以先看看這篇介紹 js常見的4種創(chuàng)建對象方式。

1、原型繼承

實現(xiàn):

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

優(yōu)點:通過原型繼承多個引用類型的屬性和方法

缺點:Sub原型變成了Super的實例,如果Super的實例某個屬性是引用值,該引用值就會被應用到所有Sub創(chuàng)建的實例中去,會有污染問題。如下

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、盜用構(gòu)造函數(shù)

實現(xiàn):構(gòu)造函數(shù)模式+call

function Super = function(){ this.a = 1 }
function Sub = function(){
       Super.call(this)
       this.b = 2
}

const test = new Sub()

優(yōu)點:每個實例都會有自己的a屬性,哪怕是引用值也不會被污染

缺點:Super構(gòu)造函數(shù)中的方法在每個實例上都要創(chuàng)建一遍(除非該方法聲明提到全局);Sub的實例無法訪問Super原型上的方法

3、組合繼承

實現(xiàn):原型繼承+盜用構(gòu)造函數(shù)繼承

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]

優(yōu)點:集合了【原型繼承】和【盜用構(gòu)造函數(shù)繼承】的優(yōu)點

缺點:存在效率問題,Super始終會被調(diào)用兩次

4、原型式繼承

實現(xiàn):

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)

優(yōu)點:對一個對象進行淺克隆創(chuàng)建另一個對象,同時繼承該對象的原型屬性

缺點:由于是淺克隆,所以實例共享的對象屬性如果是引用值,會受污染。如下

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、寄生式繼承

實現(xiàn):構(gòu)造函數(shù)模式+工廠模式

function createObj(o){
    let clone = objectCopy(o)
    clone.say=function(){
        console.log(‘hhh')
    }
    return clone
}

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

優(yōu)點:根據(jù)一個對象克隆創(chuàng)建另一個對象,并增強對象

缺點:同【盜用構(gòu)造函數(shù)繼承】方法在每個實例上都要創(chuàng)建一遍

注意:objectCopy是對入?yún)ο蟮膹椭?/p>

6、寄生式組合繼承

實現(xiàn):盜用構(gòu)造函數(shù)繼承 + 原型式繼承

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

優(yōu)點:集合了【原型式繼承】和【盜用構(gòu)造函數(shù)繼承】的優(yōu)點,效率比【組合繼承】更高。

總結(jié)

到此這篇關于js中常見的6種繼承方式的文章就介紹到這了,更多相關js的6種繼承方式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • 解決JS組件bootstrap table分頁實現(xiàn)過程中遇到的問題

    解決JS組件bootstrap table分頁實現(xiàn)過程中遇到的問題

    這篇文章主要介紹了JS組件bootstrap table分頁實現(xiàn)過程中遇到的問題,感興趣的小伙伴們可以參考一下
    2016-04-04
  • javascript 獲取iframe里頁面中元素值的方法

    javascript 獲取iframe里頁面中元素值的方法

    本篇文章主要是對javascript獲取iframe里頁面中元素值的方法進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助
    2014-02-02
  • Javascript中的基本類型和引用類型概述說明

    Javascript中的基本類型和引用類型概述說明

    這篇文章主要介紹了Javascript中的基本類型和引用類型的相關資料,包括基本類型和引用類型的概念及區(qū)別,數(shù)據(jù)類型檢測給大家詳細介紹了js基本類型和引用類型,非常不錯,需要的朋友可以參考下
    2022-11-11
  • js前端實現(xiàn)登錄拼圖驗證功能

    js前端實現(xiàn)登錄拼圖驗證功能

    行為驗證碼通過用戶的操作來完成驗證,常見的行為驗證碼有拖動式和點觸式,下面這篇文章主要給大家介紹了關于js前端實現(xiàn)登錄拼圖驗證功能的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2023-02-02
  • JS+DIV實現(xiàn)的卷簾效果示例

    JS+DIV實現(xiàn)的卷簾效果示例

    這篇文章主要介紹了JS+DIV實現(xiàn)的卷簾效果,結(jié)合具體實例形式對比分析了javascript響應鼠標事件動態(tài)操作頁面元素屬性實現(xiàn)展開與折疊效果的相關操作技巧,需要的朋友可以參考下
    2017-03-03
  • JavaScript ES2019中的8個新特性詳解

    JavaScript ES2019中的8個新特性詳解

    這篇文章主要介紹了JavaScript ES2019中的8個新特性詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-02-02
  • JTrackBar水平拖動效果

    JTrackBar水平拖動效果

    JTrackBar水平拖動效果...
    2007-07-07
  • JavaScript編寫開發(fā)動態(tài)時鐘

    JavaScript編寫開發(fā)動態(tài)時鐘

    這篇文章主要為大家詳細介紹了JavaScript編寫開發(fā)動態(tài)時鐘,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-07-07
  • JS使用onerror捕獲異常示例

    JS使用onerror捕獲異常示例

    這篇文章主要介紹了JS使用onerror捕獲異常的方法,結(jié)合實例形式分析了javascript基于onerror事件處理器捕獲異常的具體流程與相關操作技巧,需要的朋友可以參考下
    2016-08-08
  • fckeditor部署到weblogic出現(xiàn)xml無法讀取及樣式不能顯示問題的解決方法

    fckeditor部署到weblogic出現(xiàn)xml無法讀取及樣式不能顯示問題的解決方法

    這篇文章主要介紹了fckeditor部署到weblogic出現(xiàn)xml無法讀取及樣式不能顯示問題的解決方法,分析了問題出現(xiàn)的原因及相關配置文件設置技巧,需要的朋友可以參考下
    2017-03-03

最新評論