Day26. 直擊!物件大量發生中!

Day26. 直擊!物件大量發生中!

本日閱讀進度:第12章 高階物件結構(521~535頁)

重點摘要:

1.物件建構程序

在之前第11天~第13天的文章曾經介紹過物件,當時建立物件的方法,稱為「物件字面」(object literal)。如果需要快速建立一個物件,或是建立只使用一次的物件,使用「物件字面」的方法來建立就可以了。

但如果想要建立大量具有相同屬性名稱和方法的物件,使用「物件建構程序」(object constructor)會是更好的作法。

使用建構程序的過程分為兩個步驟:首先建立建構程序,接著使用建構程序。

2.如何建立建構程序?

用程式碼來說明:

function Cat(name, color, weight) { // 依照慣例,建構程序函式的名稱以大寫字母開頭。
  this.name = name;  // 前面的name是屬性,後面的name是參數,依照慣例會使用一樣的字元。
  this.color = color;
  this.weight = weight;
}

3.如何使用建構程序?

var abui = new Cat("Abui", "orange", 5); // 建立物件需使用new運算符
var meimei = new Cat("Meimei", "black", 3);

透過建構程序,可快速建立大量cat物件,而且每隻貓都具有一組相同的屬性:名字、顏色和體重。

4.把方法加入建構程序

如果要再加入新的方法warning:

function Cat(name, color, weight) { 
  this.name = name; 
  this.color = color;
  this.weight = weight;
  this.warning = function() { // 把一個匿名函式賦值給this.warning屬性
    if (this.weight > 4) {
      alert(this.name + " eats too much!");
    } else {
      alert(this.name + " eats too few!");
    }
  };
}
var abui = new Cat("Abui", "orange", 5);

abui.warning();
//Abui eats too much!

今天的內容特別有親切感,因為JS的建構程序跟Ruby的實體方法很像^^

本文同步發表於iT邦幫忙

Recent post