Javascript繼承2：建立即繼承—-建構函式繼承

逗伴不是瓣發表於2018-10-02
JavaScript繼承函式
//宣告父類
function SuperClass(id){
    //值型別公有屬性
    this.id = id;
    //引用型別公有屬性
    this.books = [`Html`,`Css`];
}
//父類宣告原型方法
SuperClass.prototype.showBooks = function(){
    console.log(this.books)
}
//宣告子類
function ChildClass(id){
    //繼承父類
    SuperClass.call(this,id)
}

var child1 = new ChildClass(1)
var child2 = new ChildClass(2)
child1.books.push(`設計模式`);
console.log(child1.id)    //1
console.log(child1.books) //[`Html`,`Css`,`設計模式`];
console.log(child2.id)    //2
console.log(child2.books) //[`Html`,`Css`];

child1.showBooks()          //TypeErrr
/*
* SuperClass.call(this,id)是建構函式繼承的精華，call可以改變函式的作用域環境，
* 因此在子類中對父類呼叫這個方法，就是將子類的變數在父類中執行一遍，由於父類中是給
* this繫結屬性的，因此子類也就繼承了父類的公有屬性，由於這種方法沒有涉及原型prototype
* 所以父類原型方法不會被子類繼承，如果想要被繼承就必須放在建構函式中，這樣建立出來
* 的每個例項都會單獨擁有一份而不能共用，這樣就違背了程式碼服用的原則。
* 為了綜合這兩種模式的優點，有了組合式繼承。
*/

 設計模式中的經典筆錄

相關文章