[筆記] JavaScript 的基本觀念 – 15 – prototype, reflection & extend @地瓜大的飛翔旅程

章節連結

課程對應章節
內容
參考資料
JavaScript 全攻略系列文章

Prototypal Inheritance 原型繼承是 JavaScript 用來建立各種物件的概念。換言之，在 JavaScript 裡，無論是函式、物件、陣列…等等都有所謂的物件原型(Prototype)。你可以使用 .__proto__ 來挖掘他們的預設原型值，你會發現都是 Object。因此，當你呼叫一個 Object 內的 key 在最底層的 Object 並沒有時，它會預設往上一層的 .__proto__去尋找，直到找不到報錯為止。

課程對應章節

Course 53 ~ Course 56 (全部一共有 85 Courses)

請注意：本系列文章為個人對應課程的消化吸收後，所整理出來的內容。換言之，並不一定會包含全部的課程內容，也有可能會添加其他資源來說明。課程連結網址：http://tinyurl.com/w7vrql6

內容

1.JavaScript 的所有物件(字串、函式…等)，的原型都是物件。在這些原型下的 key，就是物件可以使用的方法，像是 string.length, object.bind …等等。
2.在實際應用時，不要嘗試編修物件原型，這樣會讓整體的運行效能下降。
3.原型鏈的終點，為 null。
4.在影片中，作者引用了 underscore.js 這支外部來源的函式庫，來示範如何新增其他物件的 property 到既有的物件中。不過在 ES6 中，導入了 class / extends/ constructor 一系列的語法糖來包裝如Object.create之類的東西，讓擴充上更方便。不過，JavaScript本身還是一個動態的語言，其綁定說其量都是彼此物件之間的連結。換言之，一個不經意的修改會導致一連串的結果被更動。

/*Example*/
/*1. example*/
let a = function (){}
console.log(a.__proto__) //function(){}
console.log(a.__proto__.__proto__.__proto__) // null

/*2.*/
var person = {
  firstname: 'Andy',
  lastname: 'Lau',
  getFullName: function(){
    return this.firstname + ' ' + this.lastname;
  }
}

var aMan = {
  firstname: 'Peter',
  lastname: 'Chen'
}

aMan.__proto__ = person;

for (var prop in aMan) {
  console.log(prop + ':' + aMan[prop]) // 會輸出aMan本身和加入的person的屬性
}

for (var prop in aMan) {
  if(aMan.hasOwnProperty(prop)){ //過濾非aMan本身的屬性
     console.log(prop + ':' + aMan[prop]) // 會輸出aMan本身的屬性
  }
}