JavaScript 對象構造器

實例

function Person(first, last, age, eye) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eye;
}

親自試一試

用大寫首字母對構造器函數命名是個好習慣。

對象類型（藍圖）（類）

前一章的實例是有限制的。它們只創建單一對象。

有時我們需要創建相同“類型”的許多對象的“藍圖”。

創建一種“對象類型”的方法，是使用對象構造器函數。

在上面的例子中，函數 Person() 就是對象構造器函數。

通過 new 關鍵詞調用構造器函數可以創建相同類型的對象：

var myFather = new Person("Bill", "Gates", 62, "blue");
var myMother = new Person("Steve", "Jobs", 56, "green");

親自試一試

this 關鍵詞

在 JavaScript 中，被稱為 this 的事物是代碼的“擁有者”。

this 的值，在對象中使用時，就是對象本身。

在構造器函數中，this 是沒有值的。它是新對象的替代物。 當一個新對象被創建時，this 的值會成為這個新對象。

請注意 this 并不是變量。它是關鍵詞。您無法改變 this 的值。

為對象添加屬性

為已有的對象添加新屬性很簡單：

實例

myFather.nationality = "English";

親自試一試

新屬性被添加到 myFather。不是 myMother，也不是任何其他 person 對象。

為對象添加方法

為已有的對象添加新方法很簡單：

實例

myFather.name = function () {
    return this.firstName + " " + this.lastName;
};

親自試一試

新方法被添加到 myFather。不是 myMother，也不是任何其他 person 對象。

為構造器添加屬性

與向已有對象添加新屬性不同，您無法為對象構造器添加新屬性：

實例

Person.nationality = "English";

親自試一試

如需向構造器添加一個新屬性，您必須添加到構造器函數：

實例

function Person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
    this.nationality = "English";
}

親自試一試

這樣對象屬性就可以擁有默認值。

為構造器添加方法

您的構造器函數也可以定義方法：

實例

function Person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
    this.name = function() {return this.firstName + " " + this.lastName;};
}

親自試一試

與向已有對象添加新方法不同，您無法為對象構造器添加新方法。

必須在構造器函數內部向一個對象添加方法：

實例

function Person(firstName, lastName, age, eyeColor) {
    this.firstName = firstName;  
    this.lastName = lastName;
    this.age = age;
    this.eyeColor = eyeColor;
    this.changeName = function (name) {
        this.lastName = name;
    };
}

changeName() 函數把 name 賦值給 person 的 lastName 屬性。

現在您可以試一試：

myMother.changeName("Jobs");

親自試一試

通過用 myMother 替代 this，JavaScript 可以獲知目前處理的哪個 person。

內建 JavaScript 構造器

JavaScript 提供用于原始對象的構造器：

實例

var x1 = new Object();    // 一個新的 Object 對象
var x2 = new String();    // 一個新的 String 對象
var x3 = new Number();    // 一個新的 Number 對象
var x4 = new Boolean();   // 一個新的 Boolean 對象
var x5 = new Array();     // 一個新的 Array 對象
var x6 = new RegExp();    // 一個新的 RegExp 對象
var x7 = new Function();  // 一個新的 Function 對象
var x8 = new Date();      // 一個新的 Date 對象

親自試一試

Math() 對象不再此列。Math 是全局對象。new 關鍵詞不可用于 Math。

您知道嗎？

正如以上所見，JavaScript 提供原始數據類型字符串、數字和布爾的對象版本。但是并無理由創建復雜的對象。原始值快得多！

請使用對象字面量 {} 代替 new Object()。

請使用字符串字面量 "" 代替 new String()。

請使用數值字面量代替 Number()。

請使用布爾字面量代替 new Boolean()。

請使用數組字面量 [] 代替 new Array()。

請使用模式字面量代替 new RexExp()。

請使用函數表達式 () {} 代替 new Function()。

實例

var x1 = {};            // 新對象
var x2 = "";            // 新的原始字符串
var x3 = 0;             // 新的原始數值
var x4 = false;         // 新的原始邏輯值
var x5 = [];            // 新的數組對象
var x6 = /()/           // 新的正則表達式對象
var x7 = function(){};  // 新的函數對象

親自試一試

字符串對象

通常，字符串被創建為原始值：var firstName = "Bill"

但是也可以使用 new 關鍵詞創建字符串對象：var firstName = new String("Bill")

請在 JS 字符串這一章中學習為何不應該把字符串創建為對象。

數字對象

通常，數值被創建為原始值：var x = 456

但是也可以使用 new 關鍵詞創建數字對象：var x = new Number(456)

請在 JS 數字這一章中學習為何不應該把數值創建為對象。

布爾對象

通常，邏輯值被創建為原始值：var x = false

但是也可以使用 new 關鍵詞創建邏輯對象：var x = new Boolean(false)

請在 JS 邏輯這一章中學習為何不應該把邏輯值創建為對象。