淺談ES6 類的原型
摘要：
ES6新增了類的概念 , 即關鍵字 class , 並且也實現了繼承 extends 等這樣的語法糖, 那麼相比於ES5中建構函式的方式 , 新寫法最大的好處是讓我們物件原型的寫法更加清晰明瞭, 而建構函式的 prototype 屬性 ,在ES6 的類上仍然存在,
class Fa...
ES6新增了類的概念 , 即關鍵字 class , 並且也實現了繼承 extends 等這樣的語法糖, 那麼相比於ES5中建構函式的方式 , 新寫法最大的好處是讓我們物件原型的寫法更加清晰明瞭, 而建構函式的 prototype 屬性 ,在ES6 的類上仍然存在,
class Father {}
class Children extends Father {
constructor() {
super();
}
}
console.log(Children.__proto__); //[Function: Father] 子類作為一個物件時,它的 __proto__ 屬性 , 指向他的父類
console.log(Children.prototype.__proto__); // Father {}子類作為一個函式(建構函式的本質也是一個函式)時 , 它的prototype屬性的__proto__屬性 , 指向父類的 prototype (Father.prototype)
也就是說同時存在著兩條鏈 .
那麼我們再來看看 類的 例項的proto 屬性
class Father {}
class Children extends Father {
constructor() {
super();
}
}
const f = new Father();
const c = new Children();
console.log(c.prototype); //undefined注意此時 c 作為 一個例項物件, 是沒有 prototype屬性的
console.log(c.__proto__)// Children {}
console.log(c.__proto__.__proto__)// Father {}
console.log(f.__proto__);// Father {}
最後兩個 log , 子類例項物件的__proto__屬性的__proto__ 屬性, 指向父類例項物件的__proto__ 屬性;
則我們可以發現 子類的原型的原型 是指向父類的原型 , 雖然這裡有點繞,原型這個東西本來就是比較抽象,但也不難理解(孩子的爸爸的爸爸 === 爸爸的爸爸^.^ ),如果有個關係圖在或許會清晰點 , 後期有時間補上
關於類中的constructor, super , 也有很多需要了解的 , 這直接決定了子類是否可以繼承到父類, 而且 super 關鍵字 還有不同的使用場景 , 這裡不再詳說 , 後期會單獨出的.