快捷導(dǎo)航

對(duì)于JavaScript繼承你到底了解多少

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

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

前言

關(guān)于繼承，你到底了解多少，什么樣的繼承是最最優(yōu)的，讓我們一起來(lái)學(xué)習(xí)一些關(guān)于繼承的那些知識(shí)點(diǎn)，帶你了解他們的實(shí)現(xiàn)過(guò)程，以及他們的優(yōu)缺點(diǎn)

構(gòu)造函數(shù)，原型對(duì)象，實(shí)例對(duì)象三者之間的關(guān)系

先來(lái)了解他們的關(guān)系有助于對(duì)繼承更好的理解

原型鏈繼承

核⼼：將⽗類實(shí)例作為⼦類原型

代碼實(shí)現(xiàn)過(guò)程：

function Parent(name){
    this.name = name || 'xt',
    this.arr = [1]
}
function Son(age){
    this.age = age
}
Parent.prototype.say = function() { //將需要復(fù)⽤、共享的⽅法定義在⽗類原型上
    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)點(diǎn):

實(shí)例可繼承的屬性有：實(shí)例的構(gòu)造函數(shù)的屬性，父類構(gòu)造函數(shù)屬性，父類原型的屬性。（新實(shí)例不會(huì)繼承父類實(shí)例的屬性！）

缺點(diǎn):

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

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

核心：借⽤⽗類的構(gòu)造函數(shù)來(lái)增強(qiáng)⼦類實(shí)例，等于是復(fù)制⽗類的實(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) // 拷⻉了⽗類的實(shí)例屬性和⽅法
    this.age = age
}
let s1 = new Son('小譚', 18)
let s2 = new Son('小明', 19)
console.log(s1.say === s2.say) //false ⽅法不能復(fù)⽤ ⽅法是獨(dú)⽴，不是共享的
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)點(diǎn)：

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

缺點(diǎn)：

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

原型式繼承

核心：用一個(gè)函數(shù)包裝一個(gè)對(duì)象，然后返回這個(gè)函數(shù)的調(diào)用，這個(gè)函數(shù)就變成了個(gè)可以隨意增添屬性的實(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 ]

缺點(diǎn)：

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

寄生式繼承

核心：在原型式繼承的基礎(chǔ)上，增強(qiáng)對(duì)象，返回構(gòu)造函數(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); //小白

缺點(diǎn):

沒(méi)用到原型，無(wú)法復(fù)用。
原型鏈繼承多個(gè)實(shí)例的引用類型屬性指向相同，存在篡改的可能。

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

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

代碼實(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)點(diǎn)：

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

缺點(diǎn)：

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

寄生組合式繼承

核心：結(jié)合借用構(gòu)造函數(shù)傳遞參數(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) // 核心 通過(guò)創(chuàng)建中間對(duì)象，⼦類原型和⽗類原型，就會(huì)隔離開(kāi)。
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 ]

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