看了都知道繼承也就那麼回事兒

前言

各位大佬們都來了就花點時間看看吧 看了以後來個當心心吧 否則沒有動力繼續寫下去呀 哈哈

開始

預備知識

原型鏈知識---話很少說先上圖，一圖勝千言

如今來寫一個基本的函數實例來解釋這幅圖

function Test () {
    this.name = 'test'; 
}
var fn = new Test;
console.log(fn.name);
//咱們稱Test爲構造函數  fn爲構造函數Test的實例
//Test的prototype（原型）和實例的__proto__（原型）都指向了原型同一個原型對象  
//原型對象的constructor指向了構造函數
複製代碼

Object.create 再來一張圖片很清晰的解釋它的做用

下面開始玩轉繼承

第一類 最簡單的繼承---原型繼承

// 原型繼承
function A() {
    this.x = 'test';
}

A.prototype.getX = function () {
    console.log(this.x);
    
};

function B() {
    this.y = 'test2';
}

B.prototype = new A;
var fn = new B;
console.log(fn.x);//=>test
console.log(fn.y);//=>test2
fn.getX();//=>test
複製代碼

總結

這樣就實現了B的實例fn繼承了父類（A）中的全部屬性和方法。咱們把A本身的屬性和方法（x）叫作私有屬性，父類（A）原型上的方法和屬性（getX）叫作公有屬性。這種繼承方式就是把父類（A）的公有屬性和私有屬性都繼承到了子類（B）的公有屬性中。

優勢：簡單實用

缺點：由於只是改變了prototype的指向致使constructor都指向了A，且都變成了本身的公有屬性

改進方法

// 原型繼承
function A() {
    this.x = 'test';
}

A.prototype.getX = function () {
    console.log(this.x);
    
};

function B() {
    this.y = 'test2';
}

B.prototype = new A;
B.prototype.constructor = B;//手動改變constructor
var fn = new B;
console.log(fn.x);//=>test
console.log(fn.y);//=>test2
fn.getX();//=>test
複製代碼

第二種 利用call改變this指向---call繼承

// call繼承
function A() {
    this.x = 'test';
}

A.prototype.getX = function () {
    console.log(this.x);

};

function B() {
    this.y = 'test2';
    A.call(this);
}

var fn = new B;
console.log(fn.x);//=>test
console.log(fn.y);//=>test2
複製代碼

總結

這樣就實現了B的實例fn繼承了A中的私有屬性和方法。這種繼承方式就是把A的私有有屬性繼承到了B的私有屬性中。

優勢：簡單

缺點：只能繼承父類的私有屬性

第三種 複製屬性實現繼承---冒充對象繼承

//冒充對象繼承
function A() {
    this.x = 'test';
}

A.prototype.getX = function () {
    console.log(this.x);

};

function B() {
    this.y = 'test2';
    var temp = new A;
    for (key in temp) {
        // this=>實例fn
        this[key] = temp[key];
    }
    temp = null;
}
var fn = new B;
console.log(fn.x);//=>test
console.log(fn.y);//=>test2
複製代碼

總結

這樣就實現了B的實例fn繼承了A中的私有屬性和方法。這種繼承方式就是把A的私有有屬性繼承到了B的私有屬性中。

缺點：只能繼承父類的私有屬性

第四種 混合模式繼承

//混合模式繼承
function A() {
    this.x = 'test';
}

A.prototype.getX = function () {
    console.log(this.x);

};

function B() {
    this.y = 'test2';
    A.call(this);
    
}

B.prototype = new A;
B.prototype.constructor = B;//手動改變constructor
var fn = new B;
console.log(fn.x);//=>test
console.log(fn.y);//=>test2
fn.getX();//=>test
複製代碼

總結

這樣就實現了B的實例fn繼承了A中的全部屬性和方法。這種繼承方式就是把父類（A）的公有屬性和私有屬性都繼承到了子類（B）的公有屬性中而且把父類的私有屬性繼承到了子類的私有屬性中。

優勢：很全面

缺點：由於只是改變了prototype的指向致使constructor都指向了父類（A），複製了兩份父類的私有屬性

第五種 Create繼承模式

//Create模式繼承
function A() {
    this.x = 'test';
}

A.prototype.getX = function () {
    console.log(this.x);

};

function B() {
    this.y = 'test2';
    A.call(this);

}

B.prototype = Object.create(A.prototype);
B.prototype.constructor = B;//手動改變constructor
var fn = new B;
console.log(fn.x);//=>test
console.log(fn.y);//=>test2
fn.getX();//=>test

複製代碼

總結

這樣就實現了B的實例fn繼承了A中的全部屬性和方法。**這種繼承方式就是把父類（A）的公有屬性和私有屬性分別都對應繼承到了子類（B）的公有屬性和私有屬性中。

優勢：很全面

缺點：Obiect.create 方法不支持IE 6 7 8

改進爲兼容版本

//Create模式繼承  兼容
function A() {
    this.x = 'test';
}

A.prototype.getX = function () {
    console.log(this.x);

};

function B() {
    this.y = 'test2';
    A.call(this);

}

B.prototype = myCreate(A.prototype);
B.prototype.constructor = B;//手動改變constructor
var fn = new B;
console.log(fn.x);//=>test
console.log(fn.y);//=>test2
fn.getX();//=>test

function myCreate (o) {
    function fn () {}
    fn.prototype = o ;
    return new fn;
}
複製代碼

總結

每種方式都有優勢和缺點，推薦想簡單使用第一種但最好使用最後一種。

寫文章不容易但願各位小哥哥、小姐姐、大佬們給個當心心吧。