快捷導(dǎo)航

JavaScript中的常見繼承總結(jié)

更新時(shí)間：2022年09月21日 08:54:13 作者：陸榮濤

這篇文章主要介紹了JavaScript中的常見繼承總結(jié)，繼承其實(shí)就是構(gòu)造函數(shù)和構(gòu)造函數(shù)之間的一種關(guān)系，更多相關(guān)介紹，需要的小伙伴可以參考下面文章內(nèi)容

前言

我們?cè)趯W(xué)習(xí)前端的過程中一定會(huì)遇到繼承這個(gè)問題

繼承其實(shí)就是構(gòu)造函數(shù)和構(gòu)造函數(shù)之間的一種關(guān)系

當(dāng)一個(gè)構(gòu)造函數(shù)A的實(shí)例使用構(gòu)造函數(shù)B身上的屬性和方法，這個(gè)時(shí)候我們就說構(gòu)造函數(shù)A繼承至構(gòu)造函數(shù)B。

我們一般把構(gòu)造函數(shù)A稱之為子類，構(gòu)造函數(shù)B稱之為父類。

想要弄明白繼承就要先弄明白原型鏈

原型鏈

  function Person() {
            // 屬性
            this.name = 'Jack'
            this.age = 18
            this.gender = '男'
        }
		// 實(shí)例
        const p = new Person()


        // 1.p 的 __proto__ 指向了誰?
        console.log(p.__proto__ === Person.prototype)

        // 2.Person 的 __proto__ 指向了誰 ?
        console.log(Person.__proto__ === Function.prototype)

        // 3.Person.prototpye 的 __proto__ 指向了誰 ?
        console.log(Person.prototype.__proto__ === Object.prototype)

        // 4.Function.prototype 的 __proto__ 指向了誰 ?
        console.log(Function.prototype.__proto__ === Object.prototype)

        // 5.Function 的 __proto__ 指向了誰 ?
        console.log(Object.prototype.__proto__)

        // 6.Object.prototype 的 __proto__ 指向了誰 ?
        console.log(Function.__proto__ === Function.prototype)

        // 7.Object 的 __proto__ 指向了誰 ?
        console.log(Object.__proto__ === Function.prototype)

常用的繼承方法

我們?cè)诿嬖嚮蛘唛_發(fā)過程中使用做多的繼承有：

原型繼承
原型鏈繼承
組合繼承

當(dāng)然還有一些別的繼承,其它的繼承相對(duì)于上面的三種情況使用的就少了很多：

主要介紹上面的三種繼承

原型繼承

原理

原型繼承的核心原理:子類的原型指向父類的實(shí)例
這個(gè)也可以理解成把父類的實(shí)例賦值給子類的原型對(duì)象

優(yōu)點(diǎn)

父類構(gòu)造函數(shù)體內(nèi)的屬性和原型上的方法都可以實(shí)現(xiàn)繼承

缺點(diǎn)

繼承下來的屬性不在自己身上, 在自己的原型上
一個(gè)構(gòu)造函數(shù)的實(shí)例, 需要在兩個(gè)地方傳遞參數(shù)
所有子類的實(shí)例, name 和 age 一模一樣

 ? ? ? ?// 父類
 ? ? ? ?function Person(name, age) {
 ? ? ? ? ? ?//屬性
 ? ? ? ? ? ?this.name = name
 ? ? ? ? ? ?this.age = age
 ? ? ?  }
        // 方法
 ? ? ? ?Person.prototype.paly = function () { console.log('玩游戲'); }
?
 ? ? ? ?// 子類
 ? ? ? ?function Students(classRoom) {
 ? ? ? ? ? ?// 屬性
 ? ? ? ? ? ?this.classRoom = classRoom
 ? ? ?  }
?
 ? ? ? ?// 把子類的原型指向父類的實(shí)例對(duì)象
 ? ? ? ?// 把父類的實(shí)例賦值給子類的原型(原型對(duì)象)
 ? ? ? ?// 創(chuàng)建一個(gè)父類的實(shí)例
 ? ? ? ?const p = new Person('Jack', 25)
 ? ? ? ?// 子類的實(shí)例指向父類的原型對(duì)象
 ? ? ? ?Students.prototype = p
?
 ? ? ? // 實(shí)例化一個(gè)對(duì)象
 ? ? ? let s = new Students('高級(jí)1班')
 ? ? ? console.log(s);
 ? ? ? let s1 = new Students('高級(jí)2班')
 ? ? ? console.log(s1);

執(zhí)行結(jié)果

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

原理

把我們的父類夠構(gòu)造函數(shù)當(dāng)做普通函數(shù)在子類構(gòu)造函數(shù)體內(nèi)調(diào)用
利用 call 方法改變函數(shù)內(nèi)的 this 指向

優(yōu)點(diǎn)

子類的所有繼承下來的屬性都在自己身上
子類的所有參數(shù)在一個(gè)地方傳遞
子類的所有實(shí)例都可以給繼承下來的屬性賦不一樣的值

缺點(diǎn)

父類的原型上的方法沒有繼承下來：

// 父類
function Person(name, age) {
    // 屬性
    this.name = name
    this.age = age
}
// 原型對(duì)象上添加一個(gè)方法
Person.prototype.paly = function () { console.log('玩游戲'); }
// 子類
function Students(name, age,classRoom) {
    this.classRoom = classRoom
    // 因?yàn)檫@個(gè)this指向的就是子類的實(shí)例
    Person.call(this, name, age)
}
// 實(shí)例化一個(gè)對(duì)象
let s = new Students('張三',25,'高級(jí)1班')
console.log(s);
let s1 = new Students('李四',20,'高級(jí)2班')
console.log(s1);

執(zhí)行結(jié)果

組合繼承

原理

把原型繼承和借用構(gòu)造函數(shù) 繼承放在一起使用

優(yōu)點(diǎn)

把原型繼承和借用構(gòu)造函數(shù)繼承放在一起使用
既達(dá)到了全都繼承下來又能把屬性繼承在自己身上

缺點(diǎn)

子類的原型上有一套多余的屬性：

// 父類
function Person(name, age) {
 ? ?// 屬性
 ? ?this.name = name
 ? ?this.age = age
}
// 原型對(duì)象上添加一個(gè)方法
Person.prototype.paly = function () { console.log('玩游戲'); }
// 子類
function Students(name, age,classRoom) {
 ? ?this.classRoom = classRoom
 ? ?// 借用構(gòu)造函數(shù)繼承
 ? ?Person.call(this, name, age)
}
// 原型繼承
// 主要的目的就是為了使用父類身上的方法
Students.prototype = new Person()
?
// 實(shí)例化一個(gè)對(duì)象
let s = new Students('張三',25,'高級(jí)1班')
console.log(s);
?
let s1 = new Students('王五',24,'高級(jí)2班')
console.log(s1);
s1.play()