Javascript的ES5,ES6的7種繼承詳解

更新時間：2022年02月28日 11:20:35 作者：arzh

這篇文章主要為大家詳細介紹了Javascript的ES5,ES6的7種繼承，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

眾所周知，在ES6之前，前端是不存在類的語法糖，所以不能像其他語言一樣用extends關鍵字就搞定繼承關系，需要一些額外的方法來實現(xiàn)繼承。下面就介紹一些常用的方法，紅寶書已經(jīng)概括的十分全面了，所以本文基本就是對紅寶書繼承篇章的筆記和梳理。

原型鏈繼承

function Parent() {
    this.name = 'arzh'
}
Parent.prototype.getName = function () {
    console.log(this.name)
}
function Child() {
}
//主要精髓所在
Child.prototype = new Parent()
Child.prototype.constructor = Child
var arzhChild = new Child()
arzhChild.getName() // 'arzh'

原型鏈繼承缺點:

1.每個實例對引用類型屬性的修改都會被其他的實例共享

function Parent() {
    this.names = ['arzh','arzh1'];
}
function Child() {
}
//主要精髓所在
Child.prototype = new Parent()
Child.prototype.constructor = Child
var arzhChild2 = new Child()
arzhChild2.names.push('arzh2')
console.log(arzhChild2.names) //[ 'arzh', 'arzh1', 'arzh2' ]
var arzhChild3 = new Child()
arzhChild3.names.push('arzh3')
console.log(arzhChild3.names) //[ 'arzh', 'arzh1', 'arzh2', 'arzh3' ]

2.在創(chuàng)建Child實例的時候，無法向Parent傳參。這樣就會使Child實例沒法自定義自己的屬性（名字）

借用構造函數(shù)(經(jīng)典繼承)

function Parent() {
    this.names = ['arzh','arzh1']
}
function Child() {
    Parent.call(this)
}
var arzhChild2 = new Child()
arzhChild2.names.push('arzh2')
console.log(arzhChild2.names) //[ 'arzh', 'arzh1', 'arzh2' ]
var arzhChild3 = new Child()
arzhChild3.names.push('arzh3')
console.log(arzhChild3.names) //[ 'arzh', 'arzh1', 'arzh3' ]

優(yōu)點:

解決了每個實例對引用類型屬性的修改都會被其他的實例共享的問題
子類可以向父類傳參

function Parent(name) {
    this.name = name
}
function Child(name) {
    Parent.call(this, name)
}
var arzhChild = new Child('arzh');
console.log(arzhChild.name); // arzh
var arzhChild1 = new Child('arzh1');
console.log(arzhChild1.name); // arzh1

缺點:

無法復用父類的公共函數(shù)
每次子類構造實例都得執(zhí)行一次父類函數(shù)

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

function Parent(name) {
    this.name = name
    this.body = ['foot','hand']
}
function Child(name, age) {
    Parent.call(this, name)
    this.age = age
}
Child.prototype = new Parent()
Child.prototype.constructor = Child
var arzhChild1 = new Child('arzh1', '18')
arzhChild1.body.push('head1')
console.log(arzhChild1.name,arzhChild1.age) //arzh1 18
console.log(arzhChild1.body) //[ 'foot', 'hand', 'head1' ]
var arzhChild2 = new Child('arzh2', '20')
arzhChild2.body.push('head2')
console.log(arzhChild2.name,arzhChild2.age) //arzh2 20
console.log(arzhChild2.body) //[ 'foot', 'hand', 'head2' ]

優(yōu)點:

解決了每個實例對引用類型屬性的修改都會被其他的實例共享的問題
子類可以向父類傳參
可實現(xiàn)父類方法復用

缺點:

需執(zhí)行兩次父類構造函數(shù)，第一次是Child.prototype = new Parent(),第二次是Parent.call(this, name)造成不必要的浪費

原型式繼承

復制傳入的對象到創(chuàng)建對象的原型上，從而實現(xiàn)繼承

function createObj(o) {
    function F(){}
    F.prototype = o;
    return new F();
}
var person = {
    name : 'arzh',
    body : ['foot','hand']
}
var person1 = createObj(person)
var person2 = createObj(person)
console.log(person1) //arzh
person1.body.push('head') 
console.log(person2) //[ 'foot', 'hand', 'head' ]

缺點: 同原型鏈繼承一樣，每個實例對引用類型屬性的修改都會被其他的實例共享

寄生式繼承

我們可以使用Object.create來代替上述createObj的實現(xiàn)，原理基本上是一樣的。寄生式繼承其實就是在createObj的內(nèi)部以某種形式來增強對象（這里的增強可以理解為添加對象的方法），最后返回增強之后的對象。

function createEnhanceObj(o) {
    //代替原型式繼承的createObj
    var clone = Object.create(o)
    clone.getName = function () {
        console.log('arzh')
    }
    return clone;
}

通過createEnhanceObj就可以在創(chuàng)建對象的時候，把對象方法也通過此種方式繼承。

缺點: 同借用構造函數(shù)一樣，無法復用父類函數(shù)，每次創(chuàng)建對象都會創(chuàng)建一遍方法

寄生組合式繼承

不需要為了子類的原型而多new了一次父類的構造函數(shù)，如Child.prototype = new Parent() 只需要復制父類原型的一個副本給子類原型即可

function inheritPrototype(Parent, Child){
	Child.prototype = Object.create(Parent.prototype) //創(chuàng)建父類原型的一個副本,把副本賦值給子類原型
	Child.prototype.constructor = Child;
}
function Parent(name) {
    this.name = name
}
Parent.prototype.getName = function () {
    console.log(this.name)
}
function Child(color) {
    Parent.call(this, 'arzh')
    this.color = color
}
inheritPrototype(Parent, Child)
var arzhChild = new Child('red')
console.log(arzhChild.name) // 'arzh'

優(yōu)點: 不必為了指定子類型的原型而調(diào)用父類型的構造函數(shù)

ES6繼承

ES6支持通過類來實現(xiàn)繼承，方法比較簡單，代碼如下

class Point {
    constructor(x, y) {
        this.x = x
        this.y = y
    }
    toString() {
        return this.x + '' + this.y
    }
}
class ColorPoint extends Point {
    constructor(x, y, color) {
        super(x, y) //調(diào)用父類的constructor(x, y)
        this.color = color
    }
    toString() {
        return this.color + ' ' + super.toString() // 調(diào)用父類的toString()
    }
}
var colorPoint = new ColorPoint('1', '2', 'red')
console.log(colorPoint.toString())  // red 12

總結

本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關注腳本之家的更多內(nèi)容!

您可能感興趣的文章:

JavaScript DOM進階方法
這篇文章主要介紹了JavaScript DOM進階,需要的朋友可以參考下
2015-04-04
javascript編程起步（第五課）
javascript編程起步（第五課）...
2007-01-01
javascript操作html控件實例(javascript添加html)
幾乎HTML所有標記都可以說是HTML的控件,如select, input, div, table等。html標簽便捷的操作，深受大家的喜歡。如何使用javascript來操作HTML控件，下面我介紹下比較麻煩的幾個控件
2013-12-12
詳解原生JS動態(tài)添加和刪除類
這篇文章主要介紹了原生JS動態(tài)添加和刪除類，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-03-03
JavaScript常用全局屬性與方法記錄積累
在學習javascript的過程中記錄下常用的全局屬性與方法，就當是知識的積累，以備日后使用，感興趣的朋友可以了解下哈
2013-07-07
javascript之函數(shù)直接量(function(){})()
javascript之函數(shù)直接量(function(){})()...
2007-06-06
淺析javascript操作 cookie對象
這篇文章主要簡單分析介紹了javascript操作 cookie對象的方法及示例，有需要的小伙伴參考下
2014-12-12
全面了解js中的script標簽
下面小編就為大家?guī)硪黄媪私鈐s中的script標簽。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-07-07
javascript學習筆記(二) js一些基本概念
javascript學習筆記之js一些基本概念，學習js的朋友可以參考下
2012-06-06
理解javascript中的原型和原型鏈
這篇文章介紹了javascript中的原型和原型鏈,需要的朋友可以參考下
2015-07-07