對于JavaScript繼承你到底了解多少

更新時間：2021年09月07日 09:25:28 作者：柒天后

js的繼承機制不同于傳統(tǒng)的面向?qū)ο笳Z言,采用原型鏈實現(xiàn)繼承,基本思想是利用原型讓一個引用類型繼承另一個引用類型的屬性和方法,下面這篇文章主要給大家介紹了關于JS繼承的相關資料,需要的朋友可以參考下

前言

關于繼承，你到底了解多少，什么樣的繼承是最最優(yōu)的，讓我們一起來學習一些關于繼承的那些知識點，帶你了解他們的實現(xiàn)過程，以及他們的優(yōu)缺點

構造函數(shù)，原型對象，實例對象三者之間的關系

先來了解他們的關系有助于對繼承更好的理解

原型鏈繼承

核⼼：將⽗類實例作為⼦類原型

代碼實現(xiàn)過程：

function Parent(name){
    this.name = name || 'xt',
    this.arr = [1]
}
function Son(age){
    this.age = age
}
Parent.prototype.say = function() { //將需要復⽤、共享的⽅法定義在⽗類原型上
    console.log('hello');
}
Son.prototype = new Parent()
let s1 = new Son(18)
let s2 = new Son(19)
console.log(s1.say() === s2.say()); //true
console.log(s1.name,s1.age); //xt 18
console.log(s2.name,s2.age); //xt 19
s1.arr.push(2)
console.log(s1.arr,s2.arr); // [ 1, 2 ] [ 1, 2 ]

優(yōu)點:

實例可繼承的屬性有：實例的構造函數(shù)的屬性，父類構造函數(shù)屬性，父類原型的屬性。（新實例不會繼承父類實例的屬性?。?/p>

缺點:

⼦類實例共享了⽗類構造函數(shù)的引⽤屬性，⽐如arr屬性(原型上的屬性是共享的，一個實例修改了原型屬性，另一個實例的原型屬性也會被修改！)
不能向⽗類構造函數(shù)傳參

借⽤構造函數(shù)繼承

核心：借⽤⽗類的構造函數(shù)來增強⼦類實例，等于是復制⽗類的實例屬性給⼦類

代碼實現(xiàn)：

function Parent(name) {
    this.name = name;
    this.arr = [1],
    this.say = function() { console.log('hello') }
}
function Son(name, age) {
    Parent.call(this, name) // 拷⻉了⽗類的實例屬性和⽅法
    this.age = age
}
let s1 = new Son('小譚', 18)
let s2 = new Son('小明', 19)
console.log(s1.say === s2.say) //false ⽅法不能復⽤ ⽅法是獨⽴，不是共享的
console.log(s1.name, s1.age); //小譚 18
console.log(s2.name, s2.age); //小明 19
s1.arr.push(2)
console.log(s1.arr, s2.arr); // [ 1, 2 ] [ 1 ]

優(yōu)點：

只繼承了父類構造函數(shù)的屬性，沒有繼承父類原型的屬性。
可以繼承多個構造函數(shù)屬性（call多個）
在子實例中可向父實例傳參。

缺點：

只能繼承父類構造函數(shù)的屬性。
無法實現(xiàn)構造函數(shù)的復用。（每次用每次都要重新調(diào)用）
每個新實例都有父類構造函數(shù)的副本，臃腫。

原型式繼承

核心：用一個函數(shù)包裝一個對象，然后返回這個函數(shù)的調(diào)用，這個函數(shù)就變成了個可以隨意增添屬性的實例或?qū)ο?/p>

function Parent(name) {
    this.name = 'xt';
    this.arr = [1]
}
function object(obj){
    function F(){}
    F.prototype = obj;
    return new F();
  }
let s1 = new Parent(object)
s1.name = '小明'
s1.arr.push(2)
let s2 = new Parent(object)
console.log(s1.name,s2.name); // 小明 xt
console.log(s1.arr, s2.arr); //[ 1, 2 ] [ 1 ]

缺點：

所有實例都會繼承原型上的屬性，無法傳遞參數(shù)
無法實現(xiàn)復用。（新實例屬性都是后面添加的）

寄生式繼承

核心：在原型式繼承的基礎上，增強對象，返回構造函數(shù)

function Parent(name) {
    this.name = 'xt';
    this.arr = [1]
}
function object(obj){
    function F(){}
    F.prototype = obj;
    return new F();
  }
let Son = new Parent()
function addobject(obj){
    var add = object(obj)
    add.name = '小白'
    return add
}
var s1 = addobject(Son)
console.log(s1.name); //小白

缺點:

沒用到原型，無法復用。
原型鏈繼承多個實例的引用類型屬性指向相同，存在篡改的可能。

組合繼承（組合原型鏈繼承和借用構造函數(shù)繼承）

核心:通過調(diào)⽤⽗類構造函數(shù)，繼承⽗類的屬性并保留傳參的優(yōu)點；然后通過將⽗類實例作為⼦類原型，實現(xiàn)函數(shù)復⽤。

代碼實現(xiàn)：

function Parent(name) {
    this.name = name;
    this.arr = [1]
}
Parent.prototype.say = function () { console.log('hello') }
function Son(name, age) {
    Parent.call(this, name) // 二次
    this.age = age
}
Parent.prototype = new Son() // 一次
let s1 = new Son('小譚', 18)
let s2 = new Son('小明', 19)
console.log(s1.say === s2.say) // true
console.log(s1.name, s1.age); //小譚 18
console.log(s2.name, s2.age); //小明 19
s1.arr.push(2)
console.log(s1.arr, s2.arr); // [ 1, 2 ] [ 1 ] 不共享⽗類的引⽤屬性，

優(yōu)點：

保留構造函數(shù)的優(yōu)點：創(chuàng)建⼦類實例，可以向⽗類構造函數(shù)傳參數(shù)。
保留原型鏈的優(yōu)點：⽗類的⽅法定義在⽗類的原型對象上，可以實現(xiàn)⽅法復⽤。
不共享⽗類的引⽤屬性。⽐如arr屬性

缺點：

由于調(diào)⽤了2次⽗類的構造⽅法，會存在⼀份多余的⽗類實例屬性

寄生組合式繼承

核心：結合借用構造函數(shù)傳遞參數(shù)和寄生模式實現(xiàn)繼承

function Parent(name){
    this.name = name || 'xt',
    this.arr = [1]
}
function Son(name,age){
    Parent.call(this,name) // 核⼼
    this.age = age
}
Parent.prototype.say = function() {  
    console.log('hello');
}
Son.prototype = Object.create(Parent.prototype) // 核心 通過創(chuàng)建中間對象，⼦類原型和⽗類原型，就會隔離開。
Son.prototype.constructor = Son
let p1 = new Parent()

let s1 = new Son("小紅",18)
let s2 = new Son("小黑",19)
console.log(p1.constructor); //[Function: Parent]
console.log(s1.constructor); // [Function: Son]
console.log(s1.say() === s2.say()); //true
console.log(s1.name,s1.age); // 小紅 18
console.log(s2.name,s2.age); //小黑 19
s1.arr.push(2)
console.log(s1.arr,s2.arr); // [ 1, 2 ] [ 1, 2 ]

寄生式組合繼承可以算是引用類型繼承的最佳繼承

總結

到此這篇關于JS繼承的文章就介紹到這了,更多相關JS繼承的理解內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

js
繼承

詳解JavaScript中typeof與instanceof用法
typeof用以獲取一個變量或者表達式的類型而instanceof用于判斷一個變量是否某個對象的實例，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧
2018-10-10
javascript命名約定(變量?函數(shù)?類?組件)
這篇小文章主要是通過一些例子來介紹一些Javascript中一些關于命名變量，函數(shù)，類或者是組件的通用約定，雖然這些規(guī)則并不是強制性的，但是呢，他們卻被一些JS社區(qū)所廣泛采用，所以，了解他們還是很有必要的
2023-03-03
JavaScript中${pageContext.request.contextPath}取值問題及解決方案
這篇文章主要介紹了JavaScript中${pageContext.request.contextPath}取值問題及解決方案的相關資料,需要的朋友可以參考下
2016-12-12
js中定義一個變量并判斷其是否為空的方法
這篇文章主要介紹了js中定義一個變量 var params=null;判斷params 為/不為空的方法 ,需要的朋友可以參考下
2014-05-05
JS字符串常用操作方法實例小結
這篇文章主要介紹了JS字符串常用操作方法,結合實例形式總結分析了javascript字符串獲取、返回、拼接、替換、搜索、計算等相關操作技巧,需要的朋友可以參考下
2019-06-06
localStorage實現(xiàn)便簽小程序
這篇文章主要為大家詳細介紹了localStorage實現(xiàn)便簽小程序的相關資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-11-11
js回溯法計算最佳旅行線路代碼實例
這篇文章主要介紹了js回溯法計算最佳旅行線路代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2019-09-09
Javascript柯里化實現(xiàn)原理及作用解析
這篇文章主要介紹了Javascript柯里化實現(xiàn)原理及作用解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-10-10
用js來格式化字符串示例模仿css
用js來格式化字符串示例模仿css...
2007-04-04
淺談JS for循環(huán)中使用break和continue的區(qū)別
這篇文章主要介紹了淺談for循環(huán)中使用break和continue的區(qū)別，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-07-07