JS-繼承(es5,es6)

首先須要瞭解原型鏈機制: 原型鏈做爲實現繼承的主要方法,其基本思想就是利用原型讓一個引用類型繼承另 一個引用類型的屬性和方法.函數

構造函數、原型、實例之間的關係: 每一個構造函數都有一個原型對象(prototype),原型對象都包含一個指向構造函數的指針(constructor),而實例都包含一個指向原型對象的內部指針(__propto__).this

自我理解: 其實每一個Function都是Object基類的一個實例,因此每一個Function上都有一個__proto__指向了Object.prototype.當查找一個實例的屬性時,會先從這個實例的自定義屬性上找,若是沒有的話經過__proto__去實例所屬類的原型上去找,若是尚未的話再經過原型(原型也是對象,只要是對象就有__proto__屬性)的__proto__到Object的原型上去找,一級一級的找,若是沒有就undefined(Object的__proto__返回undefined).prototype

(一) 原型鏈繼承 :

function Parent(name) { 
    this.name = name;
 }
 Parent.prototype.printName = function() {
    console.log('parent name:', this.name);
}
function Child(name) {
    this.name = name;
}
Child.prototype = new Parent('father');
Child.prototype.constructor = Child;//因爲Child.prototype繼承Parent,致使constructor丟失
Child.prototype.printName = function() {
    console.log('child name:', this.name);
}
var child = new Child('son');
child.sayName();    // child name: son

這種方法存在兩個缺點:指針

1.子類型沒法給超類型傳遞參數;
2.Child.prototype.sayName 必須寫在 Child.prototype = new Parent('father'); 
以後,否則就會被覆蓋掉。
(二) 類式繼承:

function Parent(name) { 
    this.name = name;
 }
 Parent.prototype.printName = function() {
    console.log('parent name:', this.name);
 }
 Parent.prototype.doSomthing = function() {
    console.log('parent do something!');
 }
function Child(name, parentName) {
    Parent.call(this, parentName);
    this.name = name;
}
Child.prototype.printName = function() {
    console.log('child name:', this.name);
}
var child = new Child('son');
child.printName();   // child name: son
child.doSomthing();   // TypeError: child.doSomthing is not a function

至關於 Parent 這個函數在 Child 函數中執行了一遍,而且將全部與 this 綁定的變量都切換到了 Child 上,這樣就克服了第一種方式帶來的問題。
缺點:沒有原型,每次建立一個 Child 實例對象時候都須要執行一遍 Parent 函數,沒法複用一些公用函數。code

(三) 組合式繼承:前兩種方式的結合

function Parent(name) {

    this.name = name;
}

Parent.prototype.printName = function() {
    console.log('parent name:', this.name);
}
Parent.prototype.doSomething = function() {
    console.log('parent do something!');
}
function Child(name, parentName) {
    Parent.call(this, parentName);// 第二次調用
    this.name = name;
}

Child.prototype = new Parent();// 第一次調用      
Child.prototype.constructor = Child;
Child.prototype.printName = function() {
    console.log('child name:', this.name);
}

var child = new Child('son');
child.printName();    // child name: son
child.doSomething();   // parent do something!

組合式繼承是比較經常使用的一種繼承方法,其背後的思路是使用原型鏈實現對原型屬性和方法的繼承,而經過借用構造函數來實現對實例屬性的繼承。對象

這樣,既經過在原型上定義方法實現了函數複用,又保證每一個實例都有它本身的屬性。繼承

組合式繼承是 JS 最經常使用的繼承模式,但組合繼承使用過程當中會被調用兩次:一次是建立子類型的時候,另外一次是在子類型構造函數的內部。原型鏈

第一次調用構造函數顯然是沒有必要的,由於第一次調用構造函數時候不須要函數內部的那些實例屬性,這麼寫只是想得到其原型上的方法罷了,因此這時候你可能會這樣寫:get

Child.prototype = Parent.prototype;原型

這樣寫顯然是不對的:
1.首先,你這樣寫的話至關因而子類和父類都指向同一個對象,這時候若是你添加了新的方法給 Child 但實際上 Parent 並不須要,至關於強行給 Parent 添加了一個未知的方法。
2.其次,仔細想一想,這樣體現不出繼承的多態性,好比此時子類想要重寫父類的 getName 的方法,那麼父類的方法也就會隨之修改,這顯然違背了多態性。

也就是說咱們第一次調用構造函數的時候,實際上是無論構造函數裏面的內容,這是咱們能夠new一個空函數,將其prototype指向Parent.prototype,代碼以下:

(四) 寄生組合式繼承:

function Parent(name) {
    this.name = name;
}
Parent.prototype.printName = function() {
    console.log('parent name:', this.name);
}

function Child(name, parentName) {
    Parent.call(this, parentName);  
    this.name = name;    
}

function inheritPrototype(Parent, Child) {
    Child.prototype = Object.create(Parent.prototype);   //修改
    Child.prototype.constructor = Child;
}

inheritPrototype(Parent, Child);
Child.prototype.printName = function() {
    console.log('child name:', this.name);
}
Child.prototype.constructor = Child;

var parent = new Parent('father');
parent.printName();    // parent name: father

var child = new Child('son', 'father');
child.printName();     // child name: son
(五) ES 6 繼承:

class Parent {
    constructor(name) {
        this.name = name;
    }
    doSomething() {
        console.log('parent do something!');
    }
    printName() {
        console.log('parent name:', this.name);
    }
}

class Child extends Parent {
    constructor(name, parentName) {
        super(parentName);
        this.name = name;
    }
    printName() {
         console.log('child name:', this.name);
    }
}
const child = new Child('son', 'father');
child.printName();            // child name: son
child.doSomething();        // parent do something!
const parent = new Parent('father');
parent.printName();           // parent name: father
相關文章
相關標籤/搜索