前言
現在前端爆炸的年代，我們開發都依賴在巨人的肩膀上很多前端FrameWork我們甚至可以不用知道背後的原理，JavaScript最簡單一句話就是所有東西都是Object因為其實也不需要複雜的底層架構，但是作者Brendan Eich還是覺得需要有一種機制讓對象串聯起來，所以就有原型鍊的出現，跟new class的出現，ES6的class其實是語法糖，不像Java C++ 這類泛用程式有完整的繼承方式，java c++ new class後面都是調用我們"類"的建構函數(constructor)，但JavaScript的new class其實調用的是我們的建構函數(constructor) function，就像我剛說的JavaScript的class其實就是語法糖，這就是當初作者為了完善語言所做的，好的 我們就來理解一下JavaScript的底層吧．原型鍊（prototype chain）
在我們寫JavaScript時一定都會發現我們都有個__proto__這就是我們的原型鍊
接下來我們就可以簡單說明一下
function DOG(name){
this.name = name;
}
//__proto__
DOG.prototype = { species : '犬科' , jump:function JUMP(){
}};
//constructor
var dogA = new DOG('大毛');
var dogB = new DOG('小黑');
console.log(dogA);
console.log(dogA.name) // 大毛 原本的物件指定屬性
console.log(dogA.species) //犬科 原本的物件指定屬性 沒有就往__proto__找
console.log(dogB) // 犬科 可以發現我們prototype的species跟jump變成共用的方法
可以把__proto__想成有建構DOG這個函數都會有的內共用的屬性或方法 印出dogB.species 雖然我們沒有原本物件屬性沒有但我們一樣可以從__proto__裡面找到我們的species跟jump 大致上會長跟下面一樣
所以簡單一句話說就是 建構的dogA跟dogB都可以共用到我們proto的內容 , 然後找屬性的順序就是從我們原本的物件有的屬性 例如舉例的name開始找 沒有再從__proto__下面找這樣一層一層的下去
繼承（inheritance）
上面是樣的建構函數我們的__proto__可以共用屬性或方法，今天要是不同建構函數我們又想要共用這時就需要我們的繼承了 我們可以先看看ES5跟ES6的差異，ES6更加直覺 也跟C#越來越像，最後可以發現我們也讓不同建構函數達到了跟java c++一樣的繼承效果
//ES5
//父類別 狗的種類
function DogBase(){
this.name = "狗名字";
this.color = "black"
this.age = "1"
}
//共用跑的方法
DogBase.prototype.Run = function(){
return "跑"
}
//子類別 黃金獵犬
function GoldenRetriever(name){
//我們可以去繼承父類的基本屬性
DogBase.call(this);
this.name = name;
}
//今天我也想要讓 黃金獵犬有Run的方法
//GoldenRetriever去繼承Chihuahua
GoldenRetriever.prototype = new DogBase;
//构造实例
var es5 = new GoldenRetriever("黃金獵犬");
console.log(es5);
console.log(es5.Run());
//ES6
//父類別 狗的種類
class DogBase{
constructor(name, color, age,run) {
this.name = "狗名字";
this.color = "black"
this.age = "1"
this.Run = function(){
return "跑"
}
}
}
//子類別 黃金獵犬
class GoldenRetriever extends DogBase{
constructor(name) {
super('color', 'age','run')
this.name = name;
}
//我們可以去繼承父類的基本屬性
}
//构造实例
var es6 = new GoldenRetriever("黃金獵犬");
console.log(es6);
console.log(es6.Run());
參考資料來源
https://ssarcandy.tw/2017/12/06/javascript-prototype-chain/
https://pjchender.blogspot.com/2016/06/javascriptprototypeprototype.html
http://www.ruanyifeng.com/blog/2011/06/designing_ideas_of_inheritance_mechanism_in_javascript.html
https://segmentfault.com/a/1190000015766680
http://es6.ruanyifeng.com/#docs/class-extends
