js繼承方式

鬧鬧不愛鬧發表於2018-03-19

一. 原型鏈繼承

function parent(){};
function son(){};
son.prototype = new parent();

原理: 子類的原型物件指向父類的例項。
缺點: 1. 子類例項共享子類原型物件的引用屬性。
       2.建立子類的時候不能向父類建構函式傳參。

二. 建構函式繼承
function parent(){}
function son(name) {
    parent.call(this, name);
}
原理: 單純的使用call將父類的this指向子類,執行父類建構函式。
缺點: 1. 子類的例項無法實現公共屬性(功能函式)的複用,造成記憶體浪費。

三. 組合繼承(原型鏈繼承+建構函式繼承)
function parent(){}
function son(name){
    parent.call(this, name); // 構造繼承
}
son.prototype = new parent(); // 原型鏈繼承
son.prototype.constructor = son;
原理: 通過call呼叫父類建構函式,實現建構函式的繼承;通過將子類的原型物件指向父類的例項,實現原型鏈繼承。
缺點: 1. 父類被呼叫了兩次,導致子類例項上有一層屬性,而原型物件上也有一層屬性,子類例項上的屬性遮蔽了其
原型上的屬性。    複製程式碼

四. 寄生組合繼承(解決了組合繼承中原型中多一份屬性的缺點)

function getPrototype(obj) {
    var F = function(){};
    F.prototype = obj;
    return new F();
}
function parent(){}
function son(name) {
    parent.call(this, name); // 建構函式繼承
}
var prototypeObj = getPrototype(parent.prototype); // 生成一個obj;
son.prototype = prototypeObj; // 將son的原型物件指向上述的obj物件。
son.prototype.constructor = son;


或者
function parent(){}
function son(name) {
  parent.call(this, name); // 建構函式繼承
}
son.prototype = Object.create(parent.prototype);
son.prototype.constructor = son;

複製程式碼



相關文章