[Javascript]建構式中New的運作方式

  • 528
  • 0
  • 2016-03-05

摘要:[Javascript]建構式的概念

 

因為不太了解Javascript的建構式,所以找了一些文章(JavaScript 語言核心(14)隱藏諸多細節的建構式),大概了解了Javascript 建構式背後運作的方式。

底下是一個簡單的Person建構式

function Person(name, age) {
    this.name = name;
    this.age = age;
}


在Javascript使用建構式建立物件,使用方式如下

var p1 = new Person('Bob', 35);


這樣就可以建立起一個物件,並含有Person()中所指派的屬性 。Javascript的物件,可以簡單的思考為key-value pairs的雜湊表(Javascript設計模式)。這樣的物件,本質上跟.NET的程式語言,如C#,是不太一樣的。所以如果先學會了.NET再回來看Javascript的物件,是無法完整的Mapping上去的,總是會有一些不同。

var p1 = new Person('Bob', 35);


這樣的語法,就.NET的觀點,p1是Person 這個Class的一個Instance。但是在Javascript中,Person並不是一個Class,它只是一個function。只是透過new 這個關鍵字,Javascript的背後做了一些事,建立了一個以Person()為constructor的物件。

new 關鍵字被執行時,Javascript會建立一個空物件,並呼叫Person()建構式,所建立的空物件就會是Person()中的this。其運作就如同以下的Code

var obj = {};
Person.call(obj, 'Bob', 35);


可以看到,傳進去的原本是甚麼也沒有的空物件,但傳進Person()後,透過this指派了nameage屬性值。雖然obj原本沒有這個屬性,但Javascript 的特性會讓obj "自動長出"這兩個屬性。若不知道call()是在做甚麼事情的,可以參考黑大的Javascript .apply()應用實例

new 關鍵字除了建立物件這件事,還會指定Person()為該物件的constructor屬性的屬性值。另外,還會設定該物件的原型設定為Person()的prototype屬性所指定到的物件。原型是一個滿大的議題,關係到Javascript中的物件繼承及重用的機制。之後研究比較有心得後,再來記錄及分享。