js原生繼承幾種方式

js原生繼承

js自己並無繼承和類的概念，本質上是經過原型鏈(prototype)的形式實現的。

1.先寫兩個構造函數Parent和Child，用於將Child繼承Parent

function Parent() {
    this.animals = 'animals';
    this.show = function() {
        console.log(this.animals);
    }
}
Parent.prototype.pro = 'pro';
function Child() {
    this.dog = 'dog';
}

2.prototype繼承

// 這樣直接將Parent.prototype賦給Child.prototype的繼承方式不可取，由於在改變Child.prototype裏的屬性會同時改變Parent.prototype
Child.prototype = Parent.prototype; // 不能訪問構造函數屬性，只能訪問原型

// Object.create(Parent.prototype)構造的對象是一個空對象且它的原型指向Parent.prototype，因此這裏的Parent.prototype是空對象，連接到了Parent.prototype，並不會影響到Parent.prototype
Child.prototype = Object.create(Parent.prototype); // 不能訪問構造函數屬性，只能訪問原型

// 這種繼承方式是將實例化後的Parent對象賦給Child的prototype，既能夠訪問Parent構造函數裏邊的屬性，也能夠訪問原型屬性
Child.prototype = new Parent();

// 以上任一操做完成後這一步必須操做，是將Child的構造函數指向自身，不然在執行完繼承以後，實例化的對象構造函數是Parent
Child.prototype.constructor = Child;

3.call，apply構造函數繼承

// 須要將Child改寫以下，apply相似，但缺陷就是訪問不到Parent.prototype的屬性了
function Child() {
    Parent.call(this);
    this.dog = 'dog';
}

綜上，能夠根據本身的實際需求去選擇合適的繼承方式。