屬性有以下三種種類

JavaScript 的 物件文字 讓你可以直接建立 純粹物件（Object 的直接實例）。下列程式碼使用物件文字將物件指定給變數 jane。物件有兩個屬性：name 和 describe。 describe 是方法：

var jane = {
    name: 'Jane',

    describe: function () {
        return 'Person named '+this.name;  // (1)
    },  // (2)
};

你可能會認為物件 僅 是從字串到值的對應。但它們不只如此：它們是真正的通用物件。例如，你可以使用物件之間的繼承（請參閱 第 2 層：物件之間的原型關係），而且可以保護物件不被變更。直接建立物件的能力是 JavaScript 的傑出功能之一：你可以從具體物件開始（不需要類別！）並在稍後加入抽象化。例如，建構函式 是物件的工廠（如 第 3 層：建構函式—實例的工廠 所述），與其他語言中的類別大致類似。

點運算子提供一個簡潔的語法來存取屬性。屬性鍵必須是識別碼（請參閱合法識別碼）。如果您想要讀取或寫入具有任意名稱的屬性，您需要使用方括號運算子（請參閱方括號運算子 ([])：透過計算鍵存取屬性）。

本節中的範例使用下列物件

var jane = {
    name: 'Jane',

    describe: function () {
        return 'Person named '+this.name;
    }
};

> jane.name  // get property `name`
'Jane'
> jane.describe  // get property `describe`
[Function]

> jane.unknownProperty
undefined

> jane.describe()  // call method `describe`
'Person named Jane'

> jane.name = 'John';  // set property `name`
> jane.describe()
'Person named John'

> var obj = { hello: 'world' };
> delete obj.hello
true
> obj.hello
undefined

> var obj = { foo: 'a', bar: 'b' };

> obj.foo = undefined;
> Object.keys(obj)
[ 'foo', 'bar' ]

> delete obj.foo
true
> Object.keys(obj)
[ 'bar' ]

var obj = {};
Object.defineProperty(obj, 'canBeDeleted', {
    value: 123,
    configurable: true
});
Object.defineProperty(obj, 'cannotBeDeleted', {
    value: 456,
    configurable: false
});

> delete obj.cannotBeDeleted
false

> delete obj.doesNotExist
true
> delete obj.canBeDeleted
true

> delete obj.toString
true
> obj.toString // still there
[Function: toString]

雖然您無法使用 保留字（例如 var 和 function）作為變數名稱，但您可以將它們用作屬性金鑰：

> var obj = { var: 'a', function: 'b' };
> obj.var
'a'
> obj.function
'b'

數字可以用作物件文字中的屬性金鑰，但它們會被解釋為字串。點運算子只能存取金鑰為識別碼的屬性。因此，您需要方括號運算子（在以下範例中顯示）來存取金鑰為數字的屬性：

> var obj = { 0.7: 'abc' };
> Object.keys(obj)
[ '0.7' ]
> obj['0.7']
'abc'

物件文字也允許您使用任意字串（既不是識別碼也不是數字）作為屬性金鑰，但您必須加上引號。同樣地，您需要方括號運算子來存取屬性值

> var obj = { 'not an identifier': 123 };
> Object.keys(obj)
[ 'not an identifier' ]
> obj['not an identifier']
123

點運算子適用於固定的屬性金鑰，而方括號運算子允許您透過表達式來參照屬性。

> var obj = { someProperty: 'abc' };

> obj['some' + 'Property']
'abc'

> var propKey = 'someProperty';
> obj[propKey]
'abc'

> var obj = { 'not an identifier': 123 };
> obj['not an identifier']
123

> var obj = { '6': 'bar' };
> obj[3+3]  // key: the string '6'
'bar'

> var obj = { myMethod: function () { return true } };
> obj['myMethod']()
true

> var obj = {};
> obj['anotherProperty'] = 'def';
> obj.anotherProperty
'def'

> var obj = { 'not an identifier': 1, prop: 2 };
> Object.keys(obj)
[ 'not an identifier', 'prop' ]
> delete obj['not an identifier']
true
> Object.keys(obj)
[ 'prop' ]

請記住，函式也是物件。 因此，每個函式都有自己的方法。本節中介紹了其中的三個方法，並有助於呼叫函式。這三個方法在後續各節中用於解決呼叫函式的某些陷阱。接下來的範例都參照以下物件 jane：

var jane = {
    name: 'Jane',
    sayHelloTo: function (otherName) {
        'use strict';
        console.log(this.name+' says hello to '+otherName);
    }
};

jane.sayHelloTo('Tarzan');

jane.sayHelloTo.call(jane, 'Tarzan');

var func = jane.sayHelloTo;
func.call(jane, 'Tarzan');

jane.sayHelloTo('Tarzan');

jane.sayHelloTo.apply(jane, ['Tarzan']);

var func = jane.sayHelloTo;
func.apply(jane, ['Tarzan']);

function func() {
    console.log('this: '+this);
    console.log('arguments: '+Array.prototype.slice.call(arguments));
}
var bound = func.bind('abc', 1, 2);

> bound(3)
this: abc
arguments: 1,2,3

jane.sayHelloTo('Tarzan');

var func1 = jane.sayHelloTo.bind(jane);
func1('Tarzan');

var func2 = jane.sayHelloTo.bind(jane, 'Tarzan');
func2();

讓我們假設 JavaScript 有一個三點運算子 (...)，它會將陣列轉換為實際參數。 這樣的運算子允許您將 Math.max()（請參閱 其他函式）與陣列搭配使用。在這種情況下，以下兩個表達式將會等效

Math.max(...[13, 7, 30])
Math.max(13, 7, 30)

對於函式，您可以透過 apply() 達到三點運算子的效果

> Math.max.apply(null, [13, 7, 30])
30

三點運算子對於建構函式來說也很有意義

new Date(...[2011, 11, 24]) // Christmas Eve 2011

唉，這裡 apply() 無法運作，因為它只協助函式或方法呼叫，不協助建構函式呼叫。

if (!Function.prototype.construct) {
    Function.prototype.construct = function(argArray) {
        if (! Array.isArray(argArray)) {
            throw new TypeError("Argument must be an array");
        }
        var constr = this;
        var nullaryFunc = Function.prototype.bind.apply(
            constr, [null].concat(argArray));
        return new nullaryFunc();
    };
}

> Date.construct([2011, 11, 24])
Sat Dec 24 2011 00:00:00 GMT+0100 (CET)

Function.prototype.construct = function(argArray) {
    var constr = this;
    var inst = Object.create(constr.prototype);
    var result = constr.apply(inst, argArray); // (1)

    // Check: did the constructor return an object
    // and prevent `this` from being the result?
    return result ? result : inst;
};

如果您從物件中提取方法，它會再次變成真正的函式。它與物件的連線會中斷，而且通常不再正常運作。舉例來說，以下物件 counter：

var counter = {
    count: 0,
    inc: function () {
        this.count++;
    }
}

提取 inc 並呼叫它（作為函式！）會失敗

> var func = counter.inc;
> func()
> counter.count  // didn’t work
0

以下是說明：我們已將 counter.inc 的值呼叫為函式。因此，this 是全域物件，而且我們已執行 window.count++。不存在 window.count，而且它是 undefined。對它套用 ++ 營運子會將它設定為 NaN

> count  // global variable
NaN

> counter.inc = function () { 'use strict'; this.count++ };
> var func2 = counter.inc;
> func2()
TypeError: Cannot read property 'count' of undefined

> var func3 = counter.inc.bind(counter);
> func3()
> counter.count  // it worked!
1

function callIt(callback) {
    callback();
}

> callIt(counter.inc)
TypeError: Cannot read property 'count' of undefined

> callIt(counter.inc.bind(counter))
> counter.count  // one more than before
2

您經常在 JavaScript 中巢狀函式定義，因為函式可以是參數（例如，回呼），而且它們可以在函式表達式中就地建立。當方法包含一個常規函式，而且您想在後者中存取前者的 this 時，這會造成問題，因為方法的 this 會被常規函式的 this 隱藏（它甚至不會使用自己的 this）。在以下範例中，(1) 處的函式嘗試存取 (2) 處的方法 this：

var obj = {
    name: 'Jane',
    friends: [ 'Tarzan', 'Cheeta' ],
    loop: function () {
        'use strict';
        this.friends.forEach(
            function (friend) {  // (1)
                console.log(this.name+' knows '+friend);  // (2)
            }
        );
    }
};

這會失敗，因為 (1) 處的函式有自己的 this，這裡是 undefined

> obj.loop();
TypeError: Cannot read property 'name' of undefined

有三個方法可以解決這個問題。

loop: function () {
    'use strict';
    var that = this;
    this.friends.forEach(function (friend) {
        console.log(that.name+' knows '+friend);
    });
}

> obj.loop();
Jane knows Tarzan
Jane knows Cheeta

loop: function () {
    'use strict';
    this.friends.forEach(function (friend) {
        console.log(this.name+' knows '+friend);
    }.bind(this));  // (1)
}

loop: function () {
    'use strict';
    this.friends.forEach(function (friend) {
        console.log(this.name+' knows '+friend);
    }, this);
}

obj 繼承屬性 describe；您可以存取 它，就像物件本身有該屬性一樣：

> obj.describe
[Function]

每當您透過 obj 存取屬性時，JavaScript 會從該物件開始搜尋，並繼續其原型、原型的原型，以此類推。這就是為什麼我們可以透過 obj.describe 存取 proto.describe。原型鏈表現得好像它是單一物件。當您呼叫方法時，這種錯覺會被維持：this 的值始終是開始搜尋方法的物件，而不是找到方法的物件。這允許方法存取原型鏈的所有屬性。例如

> obj.describe()
'name: obj'

在 describe() 內部，this 是 obj，這允許方法存取 obj.name。

在 原型鏈中，物件中的屬性會 覆寫 「較後」物件中具有相同金鑰的屬性：會先找到前者屬性。它會隱藏後者屬性，後者屬性無法再被存取。舉例來說，我們在 obj 中覆寫方法 proto.describe()：

> obj.describe = function () { return 'overridden' };
> obj.describe()
'overridden'

這類似於在基於類別的語言中方法的覆寫方式。

原型非常適合在物件之間共用資料：多個物件取得相同的原型，原型包含所有共用屬性。 讓我們來看一個範例。物件 jane 和 tarzan 都包含相同的方法 describe()。這是我們希望透過共用來避免的事情：

var jane = {
    name: 'Jane',
    describe: function () {
        return 'Person named '+this.name;
    }
};
var tarzan = {
    name: 'Tarzan',
    describe: function () {
        return 'Person named '+this.name;
    }
};

兩個物件都是人。它們的 name 屬性不同，但我們可以讓它們共用 describe 方法。我們透過建立一個稱為 PersonProto 的共用原型，並將 describe 放入其中來做到這一點（圖 17-2）。

圖 17-2。物件 jane 和 tarzan 共用原型 PersonProto，因此也共用屬性 describe。

以下程式碼建立物件 jane 和 tarzan，它們共用原型 PersonProto

var PersonProto = {
    describe: function () {
        return 'Person named '+this.name;
    }
};
var jane = {
    [[Prototype]]: PersonProto,
    name: 'Jane'
};
var tarzan = {
    [[Prototype]]: PersonProto,
    name: 'Tarzan'
};

以下是互動方式

> jane.describe()
Person named Jane
> tarzan.describe()
Person named Tarzan

這是常見的模式：資料存在於原型鏈的第一個物件中，而方法存在於較後的物件中。JavaScript 的原型繼承風格旨在支援此模式：設定屬性只會影響原型鏈中的第一個物件，而取得屬性則會考慮整個鏈（請參閱 設定和刪除只會影響自己的屬性）。

到目前為止，我們假裝你可以從 JavaScript 存取內部屬性 [[Prototype]]。但語言不允許你這麼做。相反地，有函式用於讀取原型和建立具有給定原型的物件。

Object.create(proto, propDescObj?)

var PersonProto = {
    describe: function () {
        return 'Person named '+this.name;
    }
};
var jane = Object.create(PersonProto, {
    name: { value: 'Jane', writable: true }
});

> jane.describe()
'Person named Jane'

var jane = Object.create(PersonProto);
jane.name = 'Jane';

Object.getPrototypeOf(obj)

> Object.getPrototypeOf(jane) === PersonProto
true

Object.prototype.isPrototypeOf(obj)

> var A = {};
> var B = Object.create(A);
> var C = Object.create(B);
> A.isPrototypeOf(C)
true
> C.isPrototypeOf(A)
false

function getDefiningObject(obj, propKey) {
    obj = Object(obj); // make sure it’s an object
    while (obj && !{}.hasOwnProperty.call(obj, propKey)) {
        obj = Object.getPrototypeOf(obj);
        // obj is null if we have reached the end
    }
    return obj;
}

某些 JavaScript 引擎有一個特殊屬性，用於取得和設定物件的原型：__proto__。它讓語言可以直接存取 [[Prototype]]：

> var obj = {};

> obj.__proto__ === Object.prototype
true

> obj.__proto__ = Array.prototype
> Object.getPrototypeOf(obj) === Array.prototype
true

關於 __proto__，您需要知道下列幾件事

只有在取得屬性時，才會考慮物件的完整原型鏈。設定和刪除會略過繼承，只會影響自己的屬性。

var proto = { foo: 'a' };
var obj = Object.create(proto);

> obj.foo
'a'
> obj.hasOwnProperty('foo')
false

> obj.foo = 'b';
> obj.foo
'b'

> obj.hasOwnProperty('foo')
true
> proto.foo
'a'

var proto = { foo: 'a' };
var obj = Object.create(proto);

> delete obj.foo
true
> obj.foo
'a'

> delete getDefiningObject(obj, 'foo').foo;
true
> obj.foo
undefined

您可以列出所有自有 屬性鍵，或只列出可列舉的屬性鍵：

請注意，屬性通常是可列舉的（請參閱 可列舉性：最佳實務），因此您可以使用 Object.keys()，特別是對於您所建立的物件。

如果您想要列出物件的所有屬性（包括自有屬性和繼承屬性），則您有兩個選項。

選項 1 是使用迴圈

for («variable» in «object»)
    «statement»

來反覆運算 object 的所有可列舉屬性的鍵。請參閱for-in 以取得更詳盡的說明。

選項 2 是自己實作一個函式，以反覆運算所有屬性（不只是可列舉屬性）。例如

function getAllPropertyNames(obj) {
    var result = [];
    while (obj) {
        // Add the own property names of `obj` to `result`
        result = result.concat(Object.getOwnPropertyNames(obj));
        obj = Object.getPrototypeOf(obj);
    }
    return result;
}

您可以檢查物件是否具有屬性，或檢查屬性是否直接存在於物件內部：

> var obj = { hasOwnProperty: 1, foo: 2 };
> obj.hasOwnProperty('foo')  // unsafe
TypeError: Property 'hasOwnProperty' is not a function

> Object.prototype.hasOwnProperty.call(obj, 'foo')  // safe
true
> {}.hasOwnProperty.call(obj, 'foo')  // shorter
true

下列範例基於下列定義：

var proto = Object.defineProperties({}, {
    protoEnumTrue: { value: 1, enumerable: true },
    protoEnumFalse: { value: 2, enumerable: false }
});
var obj = Object.create(proto, {
    objEnumTrue: { value: 1, enumerable: true },
    objEnumFalse: { value: 2, enumerable: false }
});

Object.defineProperties() 在 透過描述子取得和定義屬性 中說明，但它的運作方式應該很明顯： proto 具有自有屬性 protoEnumTrue 和 protoEnumFalse，而 obj 具有自有屬性 objEnumTrue 和 objEnumFalse (並繼承 proto 的所有屬性)。

> Object.getPrototypeOf({}) === Object.prototype
true

> for (var x in obj) console.log(x);
objEnumTrue
protoEnumTrue

> Object.keys(obj)
[ 'objEnumTrue' ]

> Object.getOwnPropertyNames(obj)
[ 'objEnumTrue', 'objEnumFalse' ]

> 'toString' in obj
true
> obj.hasOwnProperty('toString')
false
> obj.hasOwnProperty('objEnumFalse')
true

Object.keys(obj).length

下列 範例使用物件文字來定義屬性 foo 的設定器和取得器：

var obj = {
    get foo() {
        return 'getter';
    },
    set foo(value) {
        console.log('setter: '+value);
    }
};

以下是互動

> obj.foo = 'bla';
setter: bla
> obj.foo
'getter'

指定取得器和設定器的另一種方式是透過屬性描述符（請參閱 屬性描述符）。下列程式碼定義與前一個文字相同的物件

var obj = Object.create(
    Object.prototype, {  // object with property descriptors
        foo: {  // property descriptor
            get: function () {
                return 'getter';
            },
            set: function (value) {
                console.log('setter: '+value);
            }
        }
    }
);

取得器和設定器會從原型繼承：

> var proto = { get foo() { return 'hello' } };
> var obj = Object.create(proto);

> obj.foo
'hello'

屬性的所有狀態，包括其資料及其元資料，都儲存在 屬性 中。它們是屬性所擁有的欄位，就像物件擁有屬性一樣。屬性金鑰通常以雙中括號撰寫。屬性對於一般屬性和存取器（取得器和設定器）來說很重要。

下列屬性是特定於一般屬性

下列屬性是特定於存取器的：

所有屬性都具有下列 屬性：

屬性描述子是一種用於以程式化方式處理屬性的資料結構。它是一個編碼屬性屬性的物件。描述子的每個屬性都對應到一個屬性。例如，下列是值為 123 的唯讀屬性的描述子：

{
    value: 123,
    writable: false,
    enumerable: true,
    configurable: false
}

您可以透過存取器達成相同的目標，也就是不可變性。然後，描述子如下所示

{
    get: function () { return 123 },
    enumerable: true,
    configurable: false
}

屬性描述子用於兩種操作：

下列操作讓您透過屬性描述子取得和設定屬性的屬性：

若要建立物件的完全相同副本，您需要做好兩件事：

下列函式執行此類複製

function copyObject(orig) {
    // 1. copy has same prototype as orig
    var copy = Object.create(Object.getPrototypeOf(orig));

    // 2. copy has all of orig’s properties
    copyOwnPropertiesFrom(copy, orig);

    return copy;
}

屬性會透過此函式從 orig 複製到 copy。

function copyOwnPropertiesFrom(target, source) {
    Object.getOwnPropertyNames(source)  // (1)
    .forEach(function(propKey) {  // (2)
        var desc = Object.getOwnPropertyDescriptor(source, propKey); // (3)
        Object.defineProperty(target, propKey, desc);  // (4)
    });
    return target;
};

涉及的步驟如下

請注意，此函式與 Underscore.js 函式庫中的函式 _.extend() 非常類似。

下列兩個作業非常類似：

不過，有一些細微的差異

如果一個物件 obj 從一個原型繼承一個屬性 foo，而 foo 是唯讀的，則無法指定 obj.foo：

var proto = Object.defineProperty({}, 'foo', {
    value: 'a',
    writable: false
});
var obj = Object.create(proto);

obj 從 proto 繼承唯讀屬性 foo。在寬鬆模式下，設定屬性不會造成任何影響

> obj.foo = 'b';
> obj.foo
'a'

在嚴格模式下，您會得到一個例外

> (function () { 'use strict'; obj.foo = 'b' }());
TypeError: Cannot assign to read-only property 'foo'

這符合指定會變更繼承的屬性，但是非破壞性的概念。如果一個繼承的屬性是唯讀的，您會想要禁止所有變更，即使是非破壞性的變更。

請注意，您可以透過定義一個自己的屬性來規避這個保護（請參閱前一個小節，以了解定義和指定之間的差異）

> Object.defineProperty(obj, 'foo', { value: 'b' });
> obj.foo
'b'

一般的 規則是系統建立的屬性是不可列舉的，而使用者建立的屬性是可列舉的：

> Object.keys([])
[]
> Object.getOwnPropertyNames([])
[ 'length' ]

> Object.keys(['a'])
[ '0' ]

這對於內建實例原型的函式特別適用

> Object.keys(Object.prototype)
[]
> Object.getOwnPropertyNames(Object.prototype)
[ hasOwnProperty',
  'valueOf',
  'constructor',
  'toLocaleString',
  'isPrototypeOf',
  'propertyIsEnumerable',
  'toString' ]

可列舉性的主要目的是告訴 for-in 迴圈它應該忽略哪些屬性。正如我們剛剛在查看內建建構函式的實例時所看到的，任何非使用者建立的項目都會對 for-in 隱藏起來。

受到可列舉性影響的唯一作業是

以下是一些要記住的最佳實務

防止擴充的方法：

Object.preventExtensions(obj)

讓obj無法新增屬性。例如

var obj = { foo: 'a' };
Object.preventExtensions(obj);

現在在隨意模式中新增屬性會靜默失敗

> obj.bar = 'b';
> obj.bar
undefined

而在嚴格模式中會擲回錯誤

> (function () { 'use strict'; obj.bar = 'b' }());
TypeError: Can't add property bar, object is not extensible

不過你仍然可以刪除屬性

> delete obj.foo
true
> obj.foo
undefined

你可以透過以下方式檢查物件是否可擴充

Object.isExtensible(obj)

封存的方法：

Object.seal(obj)

防止擴充和讓所有屬性都「不可設定」。後者表示屬性的屬性（請參閱屬性屬性和屬性描述子）無法再變更。例如，唯讀屬性會永遠保持唯讀。

以下範例示範封存會讓所有屬性都不可設定

> var obj = { foo: 'a' };

> Object.getOwnPropertyDescriptor(obj, 'foo')  // before sealing
{ value: 'a',
  writable: true,
  enumerable: true,
  configurable: true }

> Object.seal(obj)

> Object.getOwnPropertyDescriptor(obj, 'foo')  // after sealing
{ value: 'a',
  writable: true,
  enumerable: true,
  configurable: false }

你仍然可以變更屬性foo

> obj.foo = 'b';
'b'
> obj.foo
'b'

但你無法變更它的屬性

> Object.defineProperty(obj, 'foo', { enumerable: false });
TypeError: Cannot redefine property: foo

你可以透過以下方式檢查物件是否已封存

Object.isSealed(obj)

凍結的方法：

Object.freeze(obj)

它會讓所有屬性都不可寫入，並封存obj。換句話說，obj不可擴充，且所有屬性都唯讀，而且無法變更。我們來看一個範例：

var point = { x: 17, y: -5 };
Object.freeze(point);

再一次，你在隨意模式中會得到靜默失敗

> point.x = 2;  // no effect, point.x is read-only
> point.x
17

> point.z = 123;  // no effect, point is not extensible
> point
{ x: 17, y: -5 }

而在嚴格模式中會得到錯誤

> (function () { 'use strict'; point.x = 2 }());
TypeError: Cannot assign to read-only property 'x'

> (function () { 'use strict'; point.z = 123 }());
TypeError: Can't add property z, object is not extensible

你可以透過以下方式檢查物件是否已凍結

Object.isFrozen(obj)

保護物件是淺層的：它會影響自己的屬性，但不會影響那些屬性的值。例如，考慮以下物件：

var obj = {
    foo: 1,
    bar: ['a', 'b']
};
Object.freeze(obj);

即使你已凍結obj，它並非完全不可變—你可以變更屬性bar的（可變）值

> obj.foo = 2; // no effect
> obj.bar.push('c'); // changes obj.bar

> obj
{ foo: 1, bar: [ 'a', 'b', 'c' ] }

此外，obj具有原型Object.prototype，它也是可變的。

如果你要手動實作 new 算子，它大致會如下所示：

function newOperator(Constr, args) {
    var thisValue = Object.create(Constr.prototype); // (1)
    var result = Constr.apply(thisValue, args);
    if (typeof result === 'object' && result !== null) {
        return result; // (2)
    }
    return thisValue;
}

在第 (1) 行，您可以看到由建構函式 Constr 建立的執行個體原型是 Constr.prototype。

第 (2) 行揭露了 new 營運子的另一個功能：您可以從建構函式傳回一個任意物件，而它會變成 new 營運子的結果。如果您想要建構函式傳回子建構函式的執行個體，這會很有用（在 從建構函式傳回任意物件 中提供了一個範例）。

不幸的是，術語 原型 在 JavaScript 中使用 模稜兩可：

通常，上下文會清楚說明指的是哪一個原型。如果需要消除歧義，那麼我們只能使用 原型 來描述物件之間的關係，因為這個名稱已經透過 getPrototypeOf 和 isPrototypeOf 進入標準函式庫。因此，我們需要為 prototype 屬性參照的物件找到一個不同的名稱。一種可能性是 建構函式原型，但這是有問題的，因為建構函式也有原型

> function Foo() {}
> Object.getPrototypeOf(Foo) === Function.prototype
true

因此，執行個體原型 是最佳的 選項。

預設情況下，每個函式 C 都包含一個執行個體原型物件 C.prototype，其屬性 constructor 指回 C：

> function C() {}
> C.prototype.constructor === C
true

由於 constructor 屬性是由每個執行個體從原型繼承而來的，因此您可以使用它來取得執行個體的建構函式

> var o = new C();
> o.constructor
[Function: C]

C.prototype.constructor === C

> function f() {}
> f.prototype.constructor === f
true

// Avoid:
C.prototype = {
    method1: function (...) { ... },
    ...
};

// Prefer:
C.prototype.method1 = function (...) { ... };
...

C.prototype = {
    constructor: C,
    method1: function (...) { ... },
    ...
};

instanceof 算子

value instanceof Constr

會判斷 value是否是由建構式 Constr 或子建構式建立的。它會透過檢查 Constr.prototype 是否在 value 的原型鏈中來執行此動作。因此，下列兩個表達式是等效的：

value instanceof Constr
Constr.prototype.isPrototypeOf(value)

以下是一些範例

> {} instanceof Object
true

> [] instanceof Array  // constructor of []
true
> [] instanceof Object  // super-constructor of []
true

> new Date() instanceof Date
true
> new Date() instanceof Object
true

正如預期，instanceof 對於原始值永遠是 false

> 'abc' instanceof Object
false
> 123 instanceof Number
false

最後，如果 instanceof 的右側不是函式，它會擲回例外狀況

> [] instanceof 123
TypeError: Expecting a function in instanceof check

> Object.create(null) instanceof Object
false
> Object.prototype instanceof Object
false

> Object.getPrototypeOf(Object.create(null))
null
> Object.getPrototypeOf(Object.prototype)
null

> typeof Object.create(null)
'object'
> typeof Object.prototype
'object'

if (myvar instanceof Array) ...  // Doesn’t always work

<head>
    <script>
        function test(arr) {
            var iframe = frames[0];

            console.log(arr instanceof Array); // false
            console.log(arr instanceof iframe.Array); // true
            console.log(Array.isArray(arr)); // true
        }
    </script>
</head>
<body>
    <iframe srcdoc="<script>window.parent.test([])</script>">
    </iframe>
</body>

本節提供實作建構函式的幾個提示。

function SloppyColor(name) {
    this.name = name;
}
var c = SloppyColor('green'); // no warning!

// No instance is created:
console.log(c); // undefined
// A global variable is created:
console.log(name); // green

function StrictColor(name) {
    'use strict';
    this.name = name;
}
var c = StrictColor('green');
// TypeError: Cannot set property 'name' of undefined

class Expression {
    // Static factory method:
    public static Expression parse(String str) {
        if (...) {
            return new Addition(...);
        } else if (...) {
            return new Multiplication(...);
        } else {
            throw new ExpressionException(...);
        }
    }
}
...
Expression expr = Expression.parse(someStr);

function Expression(str) {
    if (...) {
        return new Addition(..);
    } else if (...) {
        return new Multiplication(...);
    } else {
        throw new ExpressionException(...);
    }
}
...
var expr = new Expression(someStr);

原型包含多個物件共用的屬性。因此，它們非常適合方法。此外，透過下一個說明的技術，您也可以使用它們為實例屬性提供初始值。稍後我將說明為何不建議這麼做。

建構函式通常會設定實例屬性為初始值。如果其中一個值是預設值，則不需要建立實例屬性。您只需要一個具有相同金鑰的原型屬性，其值為預設值。例如

/**
 * Anti-pattern: don’t do this
 *
 * @param data an array with names
 */
function Names(data) {
    if (data) {
        // There is a parameter
        // => create instance property
        this.data = data;
    }
}
Names.prototype.data = [];

參數 data 是選用的。如果它不存在，實例不會取得屬性 data，而是繼承 Names.prototype.data。

這種方法大多數時候都有用：您可以建立 Names 的實例 n。取得 n.data 會讀取 Names.prototype.data。設定 n.data 會在 n 中建立新的自有屬性，並保留原型中的共用預設值。我們只會在 變更 預設值（而不是以新值取代它）時遇到問題

> var n1 = new Names();
> var n2 = new Names();

> n1.data.push('jane'); // changes default value
> n1.data
[ 'jane' ]

> n2.data
[ 'jane' ]

在前面的範例中，push() 變更了 Names.prototype.data 中的陣列。由於所有沒有自有屬性 data 的實例共用該陣列，n2.data 的初始值也變更了。

function Names(data) {
    this.data = data || [];
}

function Names(data) {
    if (data) this.data = data;
}
Names.prototype = {
    constructor: Names, // (1)
    get data() {
        // Define, don’t assign
        // => avoid calling the (nonexistent) setter
        Object.defineProperty(this, 'data', {
            value: [],
            enumerable: true,
            configurable: false,
            writable: false
        });
        return this.data;
    }
};

如果同一個屬性（相同鍵、相同語意，通常不同值）存在於多個原型中，它稱為多型。然後，透過實例讀取屬性的結果會透過該實例的原型動態決定。未多型使用的原型屬性可以替換為變數（這能更佳反映其非多型性質）。

例如，你可以將常數儲存在原型屬性中，並透過this存取它

function Foo() {}
Foo.prototype.FACTOR = 42;
Foo.prototype.compute = function (x) {
    return x * this.FACTOR;
};

此常數非多型。因此，你也可以透過變數存取它

// This code should be inside an IIFE or a module
function Foo() {}
var FACTOR = 42;
Foo.prototype.compute = function (x) {
    return x * FACTOR;
};

以下是多型原型屬性的範例 ，其中包含不可變資料。透過原型屬性標記建構函式的實例，你可以將它們與不同建構函式的實例區分開來：

function ConstrA() { }
ConstrA.prototype.TYPE_NAME = 'ConstrA';

function ConstrB() { }
ConstrB.prototype.TYPE_NAME = 'ConstrB';

由於多型「標籤」TYPE_NAME，你可以區分 ConstrA 和 ConstrB 的實例，即使它們跨越領域（然後 instanceof 無法運作；請參閱 陷阱：跨越領域（框架或視窗））。

當建構函式 被呼叫時，會建立兩件事：建構函式的實例和環境（請參閱 環境：管理變數）。實例將由建構函式初始化。環境包含建構函式的參數和區域變數。在建構函式內建立的每個函式（包括方法）都會保留對環境的參考，也就是建立它的環境。由於這個參考，它將永遠可以存取環境，即使建構函式已完成。函式和環境的這種組合稱為封閉（封閉：函式與其建立範圍保持連線）。因此，建構函式的環境是獨立於實例的資料儲存，而且只因為這兩者同時建立而與實例相關。為了正確連接它們，我們必須有存在於兩個世界的函式。使用 Douglas Crockford 的術語，實例可以有與其關聯的三種類型值（請參閱 圖 17-4）

圖 17-4。當建構函式 Constr 被呼叫時，會建立兩個資料結構：一個用於參數和局部變數的環境，以及一個要初始化的實例。

以下各節會更詳細地說明每種類型的值。

Constr.prototype.publicMethod = ...;

function Constr(...) {
    this.publicData = ...;
    ...
}

function Constr(...) {
    ...
    var that = this; // make accessible to private functions

    var privateData = ...;

    function privateFunction(...) {
        // Access everything
        privateData = ...;

        that.publicData = ...;
        that.publicMethod(...);
    }
    ...
}

function Constr(...) {
    ...
    this.privilegedMethod = function (...) {
        // Access everything
        privateData = ...;
        privateFunction(...);

        this.publicData = ...;
        this.publicMethod(...);
    };
}

function StringBuilder() {
    var buffer = [];
    this.add = function (str) {
        buffer.push(str);
    };
    this.toString = function () {
        return buffer.join('');
    };
}
// Can’t put methods in the prototype!

> var sb = new StringBuilder();
> sb.add('Hello');
> sb.add(' world!');
> sb.toString()
’Hello world!’

對於大多數非安全關鍵應用程式，隱私更像是對 API 用戶的提示：「您不需要看到這個。」這是封裝的主要好處，也就是隱藏複雜性。即使在幕後進行更多操作，您只需要了解 API 的公開部分。命名慣例的理念是讓用戶透過標記屬性的金鑰來了解隱私。前置底線通常用於此目的。

讓我們重新撰寫先前的StringBuilder範例，以便將緩衝區保存在屬性_buffer中，該屬性是私人的，但僅根據慣例

function StringBuilder() {
    this._buffer = [];
}
StringBuilder.prototype = {
    constructor: StringBuilder,
    add: function (str) {
        this._buffer.push(str);
    },
    toString: function () {
        return this._buffer.join('');
    }
};

以下是透過標記屬性金鑰進行隱私的優缺點

使用私有屬性命名慣例的一個問題是鍵可能衝突（例如，建構函式的鍵與子建構函式的鍵衝突，或 mixin 的鍵與建構函式的鍵衝突）。你可以使用較長的鍵來降低此類衝突發生的機率，例如，包含建構函式的名稱。然後，在前述情況中，私有屬性 _buffer 會稱為 _StringBuilder_buffer。如果此類鍵對你來說太長，你可以選擇實體化它，將它儲存在變數中：

var KEY_BUFFER = '_StringBuilder_buffer';

我們現在透過 this[KEY_BUFFER] 存取私有資料

var StringBuilder = function () {
    var KEY_BUFFER = '_StringBuilder_buffer';

    function StringBuilder() {
        this[KEY_BUFFER] = [];
    }
    StringBuilder.prototype = {
        constructor: StringBuilder,
        add: function (str) {
            this[KEY_BUFFER].push(str);
        },
        toString: function () {
            return this[KEY_BUFFER].join('');
        }
    };
    return StringBuilder;
}();

我們在 StringBuilder 周圍包裝一個 IIFE，讓常數 KEY_BUFFER 保持在區域，且不會污染全域命名空間。

實體化屬性鍵讓你可以在鍵中使用 UUID（通用唯一識別碼）。例如，透過 Robert Kieffer 的 node-uuid

var KEY_BUFFER = '_StringBuilder_buffer_' + uuid.v4();

KEY_BUFFER 在每次執行程式碼時都有不同的值。例如，它可能如下所示

_StringBuilder_buffer_110ec58a-a0f2-4ac4-8393-c866d813b8d1

具有 UUID 的長鍵幾乎不可能發生鍵衝突。

此小節說明如何透過 IIFE（請參閱 透過 IIFE 介紹新的範圍），讓全域資料對單例物件、建構函式和方法保持私有。這些 IIFE 會建立新的環境（請參閱 環境：管理變數），這是你放置私有資料的地方。

var obj = function () {  // open IIFE

    // public
    var self = {
        publicMethod: function (...) {
            privateData = ...;
            privateFunction(...);
        },
        publicData: ...
    };

    // private
    var privateData = ...;
    function privateFunction(...) {
        privateData = ...;
        self.publicData = ...;
        self.publicMethod(...);
    }

    return self;
}(); // close IIFE

var StringBuilder = function () { // open IIFE
    var KEY_BUFFER = '_StringBuilder_buffer_' + uuid.v4();

    function StringBuilder() {
        this[KEY_BUFFER] = [];
    }
    StringBuilder.prototype = {
        // Omitted: methods accessing this[KEY_BUFFER]
    };
    return StringBuilder;
}(); // close IIFE

var obj = {
    method: function () {  // open IIFE

        // method-private data
        var invocCount = 0;

        return function () {
            invocCount++;
            console.log('Invocation #'+invocCount);
            return 'result';
        };
    }()  // close IIFE
};

> obj.method()
Invocation #1
'result'
> obj.method()
Invocation #2
'result'

實例屬性會設定在 建構函式本身，因此繼承超建構函式的實例屬性涉及呼叫該建構函式：

function Sub(prop1, prop2, prop3, prop4) {
    Super.call(this, prop1, prop2);  // (1)
    this.prop3 = prop3;  // (2)
    this.prop4 = prop4;  // (3)
}

當 Sub 透過 new 呼叫時，它的隱式參數 this 參照一個新的實例。它首先將該實例傳遞給 Super (1)，它會新增其實例屬性。之後，Sub 設定其自己的實例屬性 (2,3)。訣竅是不透過 new 呼叫 Super，因為那會建立一個新的超實例。相反地，我們將 Super 作為函式呼叫，並將目前的 (子) 實例作為 this 的值傳入。

共用屬性（例如方法）會保留在實例原型中。因此，我們需要找到一個方法，讓 Sub.prototype 繼承所有 Super.prototype 的屬性。解決方案是讓 Sub.prototype 的原型為 Super.prototype。

這是達成此目的的程式碼

Sub.prototype = Object.create(Super.prototype);
Sub.prototype.constructor = Sub;
Sub.prototype.methodB = ...;
Sub.prototype.methodC = ...;

Object.create() 會產生一個新的物件，其原型為 Super.prototype。之後，我們會新增 Sub 的方法。如 實例的建構函式屬性 中所說明，我們也需要設定屬性 constructor，因為我們已經取代了原始實例原型，而它具有正確的值。

圖 17-6 顯示 Sub 和 Super 現在的關聯方式。Sub 的結構確實類似我在 圖 17-5 中所繪製的內容。此圖表未顯示實例屬性，這些屬性是由圖表中提到的函式呼叫所設定的。

圖 17-6。建構函式 Sub 透過呼叫建構函式 Super 並將 Sub.prototype 設為 Super.prototype 的原型繼承建構函式 Super。

「確保 instanceof 運作」表示 Sub 的每個實例也必須是 Super 的實例。圖 17-7 顯示 Sub 的實例 subInstance 的原型鏈的樣子：它的第一個原型是 Sub.prototype，而第二個原型是 Super.prototype。

圖 17-7。subInstance 已由建構函式 Sub 建立。它擁有兩個原型 Sub.prototype 和 Super.prototype。

我們從一個較簡單的問題開始：subInstance 是 Sub 的實例嗎？是的，因為以下兩個斷言是等效的（後者可被視為前者的定義）

subInstance instanceof Sub
Sub.prototype.isPrototypeOf(subInstance)

如前所述，Sub.prototype 是 subInstance 的原型之一，因此兩個斷言都是正確的。類似地，subInstance 也是 Super 的實例，因為以下兩個斷言成立

subInstance instanceof Super
Super.prototype.isPrototypeOf(subInstance)

我們覆寫 Super.prototype 中的方法，方法名稱相同，新增到 Sub.prototype 中。 methodB 是個範例，在 圖 17-7 中，我們可以看到它的運作方式：尋找 methodB 會從 subInstance 開始，找到 Sub.prototype.methodB，在 Super.prototype.methodB 之前。

要了解超呼叫，您需要知道術語 主物件。 方法的主物件是擁有屬性的物件，其值是方法。例如， Sub.prototype.methodB 的主物件是 Sub.prototype。超呼叫方法 foo 涉及三個步驟：

因此，子方法的程式碼如下所示。它超呼叫它自己，呼叫它已覆寫的方法

Sub.prototype.methodB = function (x, y) {
    var superResult = Super.prototype.methodB.call(this, x, y); // (1)
    return this.prop3 + ' ' + superResult;
}

在 (1) 處讀取超呼叫的一種方式如下：直接參照超方法，並使用目前的 this 呼叫它。但是，如果我們將它分成三部分，我們會找到上述步驟

到目前為止，我們總是透過提及超建構函式名稱來參照超方法和超建構函式。這種硬編碼會讓您的程式碼較不靈活。您可以透過將超原型指定給 Sub 的屬性來避免它：

Sub._super = Super.prototype;

然後呼叫超級建構函式和超級方法如下所示

function Sub(prop1, prop2, prop3, prop4) {
    Sub._super.constructor.call(this, prop1, prop2);
    this.prop3 = prop3;
    this.prop4 = prop4;
}
Sub.prototype.methodB = function (x, y) {
    var superResult = Sub._super.methodB.call(this, x, y);
    return this.prop3 + ' ' + superResult;
}

設定 Sub._super 通常由一個實用函式處理，該函式也會將子原型連接到超級原型。例如

function subclasses(SubC, SuperC) {
    var subProto = Object.create(SuperC.prototype);
    // Save `constructor` and, possibly, other methods
    copyOwnPropertiesFrom(subProto, SubC.prototype);
    SubC.prototype = subProto;
    SubC._super = SuperC.prototype;
};

此程式碼使用輔助函式 copyOwnPropertiesFrom()，其顯示和說明於 複製物件。

作為具體範例，我們假設建構函式 Person 已存在：

function Person(name) {
    this.name = name;
}
Person.prototype.describe = function () {
    return 'Person called '+this.name;
};

現在我們要建立建構函式 Employee 作為 Person 的子建構函式。我們手動執行，如下所示

function Employee(name, title) {
    Person.call(this, name);
    this.title = title;
}
Employee.prototype = Object.create(Person.prototype);
Employee.prototype.constructor = Employee;
Employee.prototype.describe = function () {
    return Person.prototype.describe.call(this)+' ('+this.title+')';
};

以下是互動

> var jane = new Employee('Jane', 'CTO');
> jane.describe()
Person called Jane (CTO)
> jane instanceof Employee
true
> jane instanceof Person
true

前一節的實用函式 subclasses() 讓 Employee 的程式碼稍微簡單一些，並避免硬式編碼超級建構函式 Person

function Employee(name, title) {
    Employee._super.constructor.call(this, name);
    this.title = title;
}
Employee.prototype.describe = function () {
    return Employee._super.describe.call(this)+' ('+this.title+')';
};
subclasses(Employee, Person);

內建建構函式使用本節所述的相同子類別方法。例如， Array 是 Object 的子建構函式。因此， Array 執行個體的原型鏈如下所示：

> var p = Object.getPrototypeOf

> p([]) === Array.prototype
true
> p(p([])) === Object.prototype
true
> p(p(p([]))) === null
true

在 ECMAScript 5 和 Object.create() 之前，一個常用的解決方案是透過呼叫超級建構函式來建立子原型：

Sub.prototype = new Super();  // Don’t do this

在 ECMAScript 5 中不建議這樣做。原型將擁有 Super 的所有執行個體屬性，但它沒有用途。因此，最好使用前述模式（包含 Object.create()）。

以下兩個方法用於將物件轉換為原始值：

轉換為數字和字串（無論是隱式或明確）建立在轉換為原始值之上（詳細資訊請參閱 演算法：ToPrimitive()—將值轉換為原始值）。這就是為什麼您可以使用上述兩個方法配置這些轉換。 valueOf() 是轉換為數字的首選

> 3 * { valueOf: function () { return 5 } }
15

toString() 是轉換為字串的首選

> String({ toString: function () { return 'ME' } })
'Result: ME'

轉換為布林值無法設定；物件總是會被視為 true（請參閱 轉換為布林值）。

此方法 傳回物件的特定語言環境字串表示形式。預設實作會呼叫 toString()。大多數引擎不會支援此方法的範圍超過此範圍。但是，許多現代引擎支援的 ECMAScript 國際化 API（請參閱 ECMAScript 國際化 API）會為幾個內建建構函式覆寫它。

下列方法有助於原型繼承 和屬性：

以泛型方式呼叫函式相當冗長：

Object.prototype.hasOwnProperty.call(obj, 'propKey')

您可以透過空物件字面值 {} 建立的 Object 實例存取 hasOwnProperty，以縮短此程式碼

{}.hasOwnProperty.call(obj, 'propKey')

類似地，下列兩個表達式是等效的

Array.prototype.join.call(str, '-')
[].join.call(str, '-')

此模式的優點在於它較不冗長。但它也較不具自明性。效能不應成為問題（至少長期而言），因為引擎可以靜態地判斷文字不應建立物件。

以下是 通用方法的使用範例：

在一般物件上使用通用陣列方法，可讓您深入了解其運作方式

JavaScript 中有些物件感覺像是陣列，但實際上並非如此。 這表示它們雖然有索引存取和 length 屬性，但沒有任何陣列方法（forEach()、push、concat() 等）。這很不幸，但正如我們所見，通用陣列方法可提供解決方法。類陣列物件的範例包括：

術語 類陣列 也可視為通用陣列方法與物件之間的合約。物件必須符合特定需求；否則，方法無法對其運作。需求如下

下列 清單包含所有通用方法，如 ECMAScript 語言規格中所述：

讀取屬性的操作可以 區分為兩種：

讀取物件當作映射的項目時，您需要在這些類型的操作之間仔細選擇。要了解原因，請考慮以下範例

var proto = { protoProp: 'a' };
var obj = Object.create(proto);
obj.ownProp = 'b';

obj 是具有單一自有屬性的物件，其原型是 proto，它也有一個自有屬性。 proto 的原型是 Object.prototype，就像所有由物件文字建立的物件一樣。因此，obj 從 proto 和 Object. prototype 繼承屬性。

我們希望將 obj 解釋為具有單一項目的映射

ownProp: 'b'

也就是說，我們想要忽略繼承的屬性，只考慮自有屬性。讓我們看看哪些讀取操作會以這種方式詮釋 obj，哪些不會。請注意，對於物件作為映射，我們通常想要使用儲存在變數中的任意屬性鍵。這排除了點表示法。

> 'ownProp' in obj  // ok
true
> 'unknown' in obj  // ok
false
> 'toString' in obj  // wrong, inherited from Object.prototype
true
> 'protoProp' in obj  // wrong, inherited from proto
true

> obj.hasOwnProperty('ownProp')  // ok
true
> obj.hasOwnProperty('unknown')  // ok
false
> obj.hasOwnProperty('toString')  // ok
false
> obj.hasOwnProperty('protoProp')  // ok
false

> for (propKey in obj) console.log(propKey)
ownProp
protoProp

> Object.keys(obj)
[ 'ownProp' ]

> obj['toString']
[Function: toString]

function getOwnProperty(obj, propKey) {
    // Using hasOwnProperty() in this manner is problematic
    // (explained and fixed later)
    return (obj.hasOwnProperty(propKey)
            ? obj[propKey] : undefined);
}

> getOwnProperty(obj, 'toString')
undefined

函式 getOwnProperty() 在 obj 上呼叫方法 hasOwnProperty()。通常，這很好

> getOwnProperty({ foo: 123 }, 'foo')
123

但是，如果您新增一個鍵為 hasOwnProperty 的屬性到 obj，則該屬性會覆寫方法 Object.prototype.hasOwnProperty()，而 getOwnProperty() 會停止運作

> getOwnProperty({ hasOwnProperty: 123 }, 'foo')
TypeError: Property 'hasOwnProperty' is not a function

您可以透過直接參照 hasOwnProperty() 來解決此問題。這避免透過 obj 來尋找它

function getOwnProperty(obj, propKey) {
    return (Object.prototype.hasOwnProperty.call(obj, propKey)
            ? obj[propKey] : undefined);
}

我們已呼叫 hasOwnProperty() 為泛型 (請參閱 泛型方法：從原型借用方法)。

在許多 JavaScript 引擎中，屬性 __proto__ (請參閱 特殊屬性 __proto__) 是特殊的：取得它會擷取物件的原型，而設定它會變更物件的原型。這就是為什麼物件無法將對應資料儲存在其金鑰為 '__proto__' 的屬性中。如果您想要允許對應金鑰 '__proto__'，您必須在將其用作屬性金鑰之前對其進行跳脫：

function get(obj, key) {
    return obj[escapeKey(key)];
}
function set(obj, key, value) {
    obj[escapeKey(key)] = value;
}
// Similar: checking if key exists, deleting an entry

function escapeKey(key) {
    if (key.indexOf('__proto__') === 0) {  // (1)
        return key+'%';
    } else {
        return key;
    }
}

我們還需要跳脫 '__proto__' (等) 的跳脫版本，以避免衝突；也就是說，如果我們將金鑰 '__proto__' 跳脫為 '__proto__%'，那麼我們也需要跳脫金鑰 '__proto__%'，這樣它才不會取代 '__proto__' 項目。這就是第 (1) 行中所發生的情況。

Mark S. Miller 在 電子郵件 中提到了此陷阱的實際影響

您可以建立一個沒有原型的物件 如下所示：

var dict = Object.create(null);

此類物件是一個比一般物件更好的對應 (字典)，這就是為什麼此模式有時稱為 dict 模式 (dict 代表 dictionary)。讓我們先檢查一般物件，然後找出為什麼沒有原型的物件是更好的對應。

> Object.getPrototypeOf({}) === Object.prototype
true
> Object.getPrototypeOf(Object.prototype)
null

> console.log('Result: '+obj)
TypeError: Cannot convert object to primitive value

使用物件當作地圖有很多應用。如果所有屬性金鑰在靜態時（在開發時間）已知，那麼你只需要確定忽略繼承，而且只查看自己的屬性。如果可以使用任意金鑰，你應該轉向函式庫以避免本節提到的陷阱。以下是兩個範例：