js中的繼承

方式一、原型鏈繼承

function Person(name,age){
    this.name = name;
    this.age = age;
    this.num = [1,2,3,4]
}//父類
Person.prototype.test = function(){
    this.mm = 'jsksjk';
}
function Student(price){
    this.price = price;
    this.play = function(){
    }
}//子類
Student.prototype = new Person(); // 子類型的原型為父類型的一個實(shí)例對象?。。。?！

var s1 = new Student(1000);
s1.num.push(88);

var s2 = new Student(1999);
console.log(s1);
console.log(s2);
image.png
分析：

這種方式實(shí)現(xiàn)的本質(zhì)是通過將子類的原型指向了父類的實(shí)例，子類的實(shí)例就可以通過proto訪問到 Student.prototype 也就是Person的實(shí)例，這樣就可以訪問到父類的私有方法，然后再通過proto指向父類的prototype就可以獲得到父類原型上的方法。于是做到了將父類的私有、公有方法和屬性都當(dāng)做子類的公有屬性。
但是，如果說父類的私有屬性中有引用類型的屬性，那它被子類繼承的時(shí)候會作為公有屬性，這樣子類1操作這個屬性的時(shí)候，就會影響到子類2。
例如我們上面Person里面的num作為數(shù)組，是引用類型，s1,s2的這個屬性是在相同的，所以通過s1去更改num的時(shí)候，s2的num也是會改變的。

特點(diǎn)：

  • 父類新增原型方法/原型屬性，子類都能訪問到
  • 簡單，易于實(shí)現(xiàn)
    缺點(diǎn)：
  • 無法實(shí)現(xiàn)多繼承
  • 來自原型對象的所有屬性被所有實(shí)例共享
  • 創(chuàng)建子類實(shí)例時(shí)，無法向父類構(gòu)造函數(shù)傳參
  • 要想為子類新增屬性和方法，必須要在Student.prototype = new Person() 之后執(zhí)行，不能放到構(gòu)造器中

方式二：

這種方式關(guān)鍵在于:在子類型構(gòu)造函數(shù)中通用call()調(diào)用父類型構(gòu)造函數(shù)

function Person(name,age){
    this.name = name;
    this.age = age;
}

Person.prototype.test = function(){
    this.mm = '范冰冰'
}
function Student(name,age,price){
    Person.call(this,name,age); //相當(dāng)于: this.Person(name, age)
    this.price = price;
}

var s3 = new Student('小軍',22,999);
console.log(s3)
image.png

發(fā)現(xiàn)問題了嗎？？子類是拿不到父類的原型還有方法和屬性
console.log(s3.test())//Uncaught TypeError: s3.test is not a function

特點(diǎn)：

  • 解決了原型鏈繼承中子類實(shí)例共享父類引用屬性的問題
  • 創(chuàng)建子類實(shí)例時(shí)，可以向父類傳遞參數(shù)
  • 可以實(shí)現(xiàn)多繼承(call多個父類對象)
    缺點(diǎn)：
  • 實(shí)例并不是父類的實(shí)例，只是子類的實(shí)例
  • 只能繼承父類的實(shí)例屬性和方法，不能繼承原型屬性和方法
  • 無法實(shí)現(xiàn)函數(shù)復(fù)用，每個子類都有父類實(shí)例函數(shù)的副本，影響性能

方法三： 原型鏈+借用構(gòu)造函數(shù)的組合繼承

function Person(name,age){
    this.name = name;
    this.age = age;
    this.num = [2,4,1]
}

Person.prototype.test = function(){
    console.log('111');
}

function Student(name,age,price){
    Person.call(this,name,age);
    this.price = price;
}

Student.prototype = new Person();
Student.prototype.constructor = Student;
var s5 = new Student('小工',23,9102);
console.log(s5)
s5.num.push(22);
var s6 = new Student('小生',22,901);
console.log(s6)
image.png

為什么要加上Student.prototype.constructor = Student

image.png

student原型上面的constuctor應(yīng)該是Student。
image.png

分析：

這種方式融合原型鏈繼承和構(gòu)造函數(shù)的優(yōu)點(diǎn)，是 JavaScript 中最常用的繼承模式。不過也存在缺點(diǎn)就是無論在什么情況下，都會調(diào)用兩次構(gòu)造函數(shù)：一次是在創(chuàng)建子類型原型的時(shí)候，另一次是在子類型構(gòu)造函數(shù)的內(nèi)部，子類型最終會包含父類型對象的全部實(shí)例屬性，但我們不得不在調(diào)用子類構(gòu)造函數(shù)時(shí)重寫這些屬性

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

  • 可以繼承實(shí)例屬性/方法，也可以繼承原型屬性/方法
  • 不存在引用屬性共享問題
  • 可傳參
  • 函數(shù)可復(fù)用
    缺點(diǎn)：
  • 調(diào)用了兩次父類構(gòu)造函數(shù)，生成了兩份實(shí)例

方式四: 組合繼承優(yōu)化1

function Person(name,age){
    this.name = name;
    this.age = age;
    this.num = [1,2,3]
}
Person.prototype.test = function(){
    console.log('222')
}

function Student(name,age,price){
    Person.call(this,name,age);
    this.price = price;
}
Student.prototype = Person.prototype;
var s7 = new Student('小騰',44,2301);
s7.num.push(321)
var s8 = new Student('小飛',99,1099)
console.log(s7)
console.log(s8)
分析：

為了是父類構(gòu)造函數(shù)不要兩次調(diào)用，這種方式通過父類原型和子類原型指向同一對象，子類可以繼承到父類的公有方法當(dāng)做自己的公有方法，而且不會初始化兩次實(shí)例方法/屬性，避免的組合繼承的缺點(diǎn)。

但這種方式?jīng)]辦法辨別是對象是子類還是父類實(shí)例化

console.log(s7 instanceof Person) //true
console.log(s7 instanceof Student) //true
console.log(s7.constructor) //Person
優(yōu)點(diǎn)：

  • 不會初始化兩次實(shí)例方法/屬性，避免的組合繼承的缺點(diǎn)
    缺點(diǎn)：
  • 沒辦法辨別是實(shí)例是子類還是父類創(chuàng)造的，子類和父類的構(gòu)造函數(shù)指向是同一個。

方式五: 組合繼承優(yōu)化2（可能是目前最好的方法了）

function Person(name,age){
    this.name = name;
    this.age = age;
    this.num = [1,2,3]
}

Person.prototype.test = function(){
    console.log('222')
}
function Student(name,age,price){
    Person.call(this,name,age);
    this.price = price;
}
Student.prototype = Object.create(Person.prototype) //核心代碼
Student.prototype.constructor = Student; //核心代碼
var s9 = new Student('小亨',19,1099);
console.log(s9);
console.log(s9 instanceof Person );//true
console.log(s9 instanceof Student);//true
console.log(s9.constructor) //Student
image.png
分析：

借助原型可以基于已有的對象來創(chuàng)建對象，var B = Object.create(A)以A對象為原型，生成了B對象。B繼承了A的所有屬性和方法。然后再修正Student.prototype.constructor就可以了。Student繼承了所有的Person原型對象的屬性和方法。目前來說是最完美的方法了

方式六：ES6中class 的繼承

class Person{
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
        //定義一般的方法
        showName() {
            console.log("調(diào)用父類的方法")
            console.log(this.name, this.age);                  
        }
    }
class Student extends Person{
    constructor(age,name,price){
        super(age,name);
        this.price = price;
    }
    showName(){
        console.log('調(diào)用子類的方法')
        console.log(this.name,this.age)
    }
}

let s10 = new Student('小米',999,10922);
console.log(s10)
image.png
分析：

ES5 的繼承，實(shí)質(zhì)是先創(chuàng)造子類的實(shí)例對象this，然后再將父類的方法添加到this上面（Parent.apply(this)）。ES6 的繼承機(jī)制完全不同，實(shí)質(zhì)是先將父類實(shí)例對象的屬性和方法，加到this上面（所以必須先調(diào)用super方法），然后再用子類的構(gòu)造函數(shù)修改this。
需要注意的是，class關(guān)鍵字只是原型的語法糖，JavaScript繼承仍然是基于原型實(shí)現(xiàn)的。
優(yōu)點(diǎn)：

  • 語法簡單易懂,操作更方便
    缺點(diǎn)：
  • 并不是所有的瀏覽器都支持class關(guān)鍵字

參考文章：
https://segmentfault.com/a/1190000016708006?utm_source=weekly&utm_medium=email&utm_campaign=email_weekly#articleHeader11

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容