Javascript 初學筆記32 Constructor Function& prototype

一開始在寫初學筆記的時候,我們就有提到advanced object中的function factory的概念,也就是利用函數做出其他程式語言中class的效果,今天先來介紹JS 中的Constructor Function,接著會補充JS在後續的版本新增的class關鍵字,最後會解說一下在JS中非常重要的原型鍊概念。

 const students = (name,id,gender) => {
  return {
    name,
    id,
    gender
  }
}
const danny =  students("danny",9831032,'male')
console.log(danny)  // { name: 'danny', id: 9831032, gender: 'male' } 

Constructor Function

先看一下以下的程式碼。

var Vegetable = function(name){
  this.name = name;
}
var carrot = new  Vegetable ('carrot');
console.log(carrot.name) // carrot 

這是constructor function的基本概念,其實就是創造物件的函式。
可以注意到其中並沒有return任何東西,這是建構式函式的基本特點。
依序解釋一下剛剛的程式碼中發生了什麼事情。
1.建立一個名為Vegetable的constructor ,裡面包含著name這個特性,可以想成一個標準範本。
2.利用new關鍵字 以及 constructor 建立一個名為 carrot的實例(instance),也就是利用 constructor 建立的東西。
使用new關鍵字的時候,其實依序發生了以下的事情
2.1 建立一個空物件
2.2 啟用Vegetable函數
2.3 Vegetable 內的this指向到剛剛的空物件中

當建立完實例後,可以利用以下的方法去找出最初的建構子

console.log(carrot.constructor.name) // Vegetable

Class

上述的例子在ES6之後可以藉由class關鍵字完成,值得注意的是JS 中的class與其他程式語言的class有本質上的區別,光是使用class關鍵字並不能製造出有完整功能的類別,最好還是當做一個全新的概念學習。

class Vegetable {
     constructor(name){
       this.name = name
     }
 }
 var carrot = new  Vegetable ('carrot');
 console.log(carrot.name) //carrot

在這個情境中,class宣告了一個新函數Vegetable ,在新函數中同時加入了 constructor  ,最終利用new 激活(invoked)而創造一個新物件,兩種方法都會達成一樣的效果。

原型鍊(prototype)

這大概是接觸最久,但一直沒去釐清的重要概念之一了。
之前就有提過,其實在JS中,所有東西都是物件,舉個例子來說

const name = 'danny'
console.log(Object.getPrototypeOf(name)) // [String : '']
 console.log(Object.getPrototypeOf(Object.getPrototypeOf(name))) // {}

上面的範例中我宣告了一個字串name,接著利用Object.getPrototypeOf(name)找出該物件的原型,為求精確在下一行再往上去追尋它的原型。
今天當我使用name.length,實際上是發生了以下的事情
先去尋找name中是否有 length這個屬性或方法,若沒有則繼續往上找它的原型是否具有該方法,這個例子中就會找到String中的.length屬性,若還是找不到則再往上追尋,直到找到null為止,系統才會回傳name不具有該方法。 聽起來有點複雜,實際上跑一次就會比較了解了!

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s