JavaScript 對象

概述

（1）定義

對象（object）是JavaScript的核心概念，也是最重要的數(shù)據(jù)類型。JavaScript的所有數(shù)據(jù)都可以被視為對象。

簡單說，所謂對象，就是一種無序的數(shù)據(jù)集合，由若干個“鍵值對”（key-value）構(gòu)成。

var o = {
  p: "Hello World"
};

上面代碼中，大括號就定義了一個對象，它被賦值給變量o。這個對象內(nèi)部包含一個鍵值對（又稱為“成員”），p是“鍵名”（成員的名稱），字符串“Hello World”是“鍵值”（成員的值）。鍵名與鍵值之間用冒號分隔。如果對象內(nèi)部包含多個鍵值對，每個鍵值對之間用逗號分隔。

（2）鍵名

鍵名加不加引號都可以，上面的代碼也可以寫成下面這樣。

var o = {
  "p": "Hello World"
};

但是，如果鍵名不符合標識名的條件（比如包含數(shù)字、字母、下劃線以外的字符，或者第一個字符為數(shù)字），也不是正整數(shù)，則必須加上引號。

var o = {
  "1p": "Hello World",
  "h w": "Hello World",
  "p+q": "Hello World"
};

上面對象的三個鍵名，都不符合標識名的條件，所以必須加上引號。由于對象是鍵值對的封裝，所以可以把對象看成是一個容器，里面封裝了多個成員，上面的對象就包含了三個成員。

（3）屬性

對象的每一個“鍵名”又稱為“屬性”（property），它的“鍵值”可以是任何數(shù)據(jù)類型。如果一個屬性的值為函數(shù)，通常把這個屬性稱為“方法”，它可以像函數(shù)那樣調(diào)用。

var o = {
  p: function(x) {return 2*x;}
};

o.p(1)
// 2

上面的對象就有一個方法p，它就是一個函數(shù)。

對象的屬性之間用逗號分隔，ECMAScript 5規(guī)定最后一個屬性后面可以加逗號（trailing comma），也可以不加。

var o = {
  p: 123,
  m: function () { ... },
}

上面的代碼中m屬性后面的那個逗號，有或沒有都不算錯。但是，ECMAScript 3不允許添加逗號，所以如果要兼容老式瀏覽器（比如IE 8），那就不能加這個逗號。

生成方法

對象的生成方法，通常有三種方法。除了像上面那樣直接使用大括號生成（{}），還可以用new命令生成一個Object對象的實例，或者使用Object.create方法生成。

var o1 = {};
var o2 = new Object();
var o3 = Object.create(null);

上面三行語句是等價的。一般來說，第一種采用大括號的寫法比較簡潔，第二種采用構(gòu)造函數(shù)的寫法清晰地表示了意圖，第三種寫法一般用在需要對象繼承的場合。關(guān)于第二種寫法，詳見《標準庫》一章的Object對象一節(jié)，第三種寫法詳見《面向?qū)ο缶幊獭芬徽隆?/p>

讀寫屬性

（1）讀取屬性

讀取對象的屬性，有兩種方法，一種是使用點運算符，還有一種是使用方括號運算符。

var o = {
  p: "Hello World"
};

o.p // "Hello World"
o["p"] // "Hello World"

上面代碼分別采用點運算符和方括號運算符，讀取屬性p。

請注意，如果使用方括號運算符，鍵名必須放在引號里面，否則會被當(dāng)作變量處理。但是，數(shù)字鍵可以不加引號，因為會被當(dāng)作字符串處理。

var o = {
  0.7: "Hello World"
};

o.["0.7"] // "Hello World"
o[0.7] // "Hello World"

方括號運算符內(nèi)部可以使用表達式。

o['hello' + ' world']
o[3+3]

（2）檢查變量是否聲明

如果讀取一個不存在的鍵，會返回undefined，而不是報錯。可以利用這一點，來檢查一個變量是否被聲明。

// 檢查a變量是否被聲明

if(a) {...} // 報錯

if(window.a) {...} // 不報錯
if(window['a']) {...} // 不報錯

上面的后二種寫法之所以不報錯，是因為在瀏覽器環(huán)境，所有全局變量都是window對象的屬性。window.a的含義就是讀取window對象的a屬性，如果該屬性不存在，就返回undefined，并不會報錯。

需要注意的是，后二種寫法有漏洞，如果a屬性是一個空字符串（或其他對應(yīng)的布爾值為false的情況），則無法起到檢查變量是否聲明的作用。正確的寫法是使用in運算符。

if('a' in window) {
  ...
}

（3）寫入屬性

點運算符和方括號運算符，不僅可以用來讀取值，還可以用來賦值。

o.p = "abc";
o["p"] = "abc";

上面代碼分別使用點運算符和方括號運算符，對屬性p賦值。

JavaScript允許屬性的“后綁定”，也就是說，你可以在任意時刻新增屬性，沒必要在定義對象的時候，就定義好屬性。

var o = { p:1 };

// 等價于

var o = {};
o.p = 1;

（4）查看所有屬性

查看一個對象本身的所有屬性，可以使用Object.keys方法。

var o = {
  key1: 1,
  key2: 2
};

Object.keys(o);
// ["key1", "key2"]

屬性的刪除

刪除一個屬性，需要使用delete命令。

var o = { p:1 };

Object.keys(o) // ["p"]

delete o.p // true

o.p // undefined

Object.keys(o) // []

上面代碼表示，一旦使用delete命令刪除某個屬性，再讀取該屬性就會返回undefined，而且Object.keys方法返回的該對象的所有屬性中，也將不再包括該屬性。

麻煩的是，如果刪除一個不存在的屬性，delete不報錯，而且返回true。

var o = {};

delete o.p // true

上面代碼表示，delete命令只能用來保證某個屬性的值為undefined，而無法保證該屬性是否真的存在。

只有一種情況，delete命令會返回false，那就是該屬性存在，且不得刪除。

var o = Object.defineProperty({}, "p", {
        value: 123,
        configurable: false
});

o.p // 123
delete o.p // false

上面代碼之中，o對象的p屬性是不能刪除的，所以delete命令返回false（關(guān)于Object.defineProperty方法的介紹，請看《標準庫》一章的Object對象章節(jié)）。

另外，需要注意的是，delete命令只能刪除對象本身的屬性，不能刪除繼承的屬性（關(guān)于繼承參見《面向?qū)ο缶幊獭芬还?jié)）。delete命令也不能刪除var命令聲明的變量，只能用來刪除屬性。

對象的引用

如果不同的變量名指向同一個對象，那么它們都是這個對象的引用，也就是說指向同一個內(nèi)存地址。修改其中一個變量，會影響到其他所有變量。

var o1 = {};
var o2 = o1;

o1.a = 1;
o2.a // 1

o2.b = 2;
o1.b // 2

上面代碼之中，o1和o2指向同一個對象，因此為其中任何一個變量添加屬性，另一個變量都可以讀寫該屬性。

但是，這種引用只局限于對象，對于原始類型的數(shù)據(jù)則是傳值引用，也就是說，都是值的拷貝。

var x = 1;
var y = x;

x = 2;
y // 1

上面的代碼中，當(dāng)x的值發(fā)生變化后，y的值并不變，這就表示y和x并不是指向同一個內(nèi)存地址。

in運算符

in運算符用于檢查對象是否包含某個屬性（注意，檢查的是鍵名，不是鍵值），如果包含就返回true，否則返回false。

var o = { p: 1 };
'p' in o // true

該運算符對數(shù)組也適用。

var a = ["hello", "world"];

0 in a // true
1 in a // true
2 in a // false

'0' in a // true
'1' in a // true
'2' in a // false

上面代碼表示，數(shù)字鍵0和1都在數(shù)組之中。由于數(shù)組是一種特殊對象，而對象的鍵名都是字符串，所以字符串的”0“和”1“，也是數(shù)組的鍵名。

在JavaScript語言中，所有全局變量都是頂層對象（瀏覽器的頂層對象就是window對象）的屬性，因此可以用in運算符判斷，一個全局變量是否存在。

// 假設(shè)變量x未定義

// 寫法一：報錯
if (x){ return 1; }

// 寫法二：不正確
if (window.x){ return 1; }

// 寫法三：正確
if ('x' in window) { return 1; }

上面三種寫法之中，如果x不存在，第一種寫法會報錯；如果x的值對應(yīng)布爾值false（比如x等于空字符串），第二種寫法無法得到正確結(jié)果；只有第三種寫法，才能正確判斷變量x是否存在。

in運算符的一個問題是，它不能識別對象繼承的屬性。

var o = new Object();
o.hasOwnProperty('toString') // false

'toString' in o // true

上面代碼中，toString方法不是對象o自身的屬性，而是繼承的屬性，hasOwnProperty方法可以說明這一點。但是，in運算符不能識別，對繼承的屬性也返回true。

for...in循環(huán)

for...in循環(huán)用來遍歷一個對象的全部屬性。

var o = {a:1, b:2, c:3};

for (i in o){
  console.log(o[i]);
}
// 1
// 2
// 3

注意，for...in循環(huán)遍歷的是對象所有可enumberable的屬性，其中不僅包括定義在對象本身的屬性，還包括對象繼承的屬性。

// name是Person本身的屬性
function Person(name) {
  this.name = name;
}

// describe是Person.prototype的屬性
Person.prototype.describe = function () {
  return 'Name: '+this.name;
};

var person = new Person('Jane');

// for...in循環(huán)會遍歷實例自身的屬性（name），
// 以及繼承的屬性（describe）
for (var key in person) {
  console.log(key);
}
// name
// describe

上面代碼中，name是對象本身的屬性，describe是對象繼承的屬性，for-in循環(huán)的遍歷會包括這兩者。

如果只想遍歷對象本身的屬性，可以使用hasOwnProperty方法，在循環(huán)內(nèi)部做一個判斷。

for (var key in person) {
    if (person.hasOwnProperty(key)) {
        console.log(key);
    }
}
// name

為了避免這一點，可以新建一個繼承null的對象。由于null沒有任何屬性，所以新對象也就不會有繼承的屬性了。

類似數(shù)組的對象

在JavaScript中，有些對象被稱為“類似數(shù)組的對象”（array-like object）。意思是，它們看上去很像數(shù)組，可以使用length屬性，但是它們并不是數(shù)組，所以無法使用一些數(shù)組的方法。

下面就是一個類似數(shù)組的對象。

var a = {
    0:'a',
    1:'b',
    2:'c',
    length:3
};

a[0] // 'a'
a[2] // 'c'
a.length // 3

上面代碼的變量a是一個對象，但是看上去跟數(shù)組很像。所以只要有數(shù)字鍵和length屬性，就是一個類似數(shù)組的對象。當(dāng)然，變量a無法使用數(shù)組特有的一些方法，比如pop和push方法。而且，length屬性不是動態(tài)值，不會隨著成員的變化而變化。

a[3] = 'd';

a.length // 3

上面代碼為對象a添加了一個數(shù)字鍵，但是length屬性沒變。這就說明了a不是數(shù)組。

典型的類似數(shù)組的對象是函數(shù)的arguments對象，以及大多數(shù)DOM元素集，還有字符串。

// arguments對象
function args() { return arguments }
var arrayLike = args('a', 'b');

arrayLike[0] // 'a'
arrayLike.length // 2
arrayLike instanceof Array // false

// DOM元素集
var elts = document.getElementsByTagName('h3');
elts.length // 3
elts instanceof Array // false

// 字符串
'abc'[1] // 'b'
'abc'.length // 3
'abc' instanceof Array // false

通過函數(shù)的call方法，可以用slice方法將類似數(shù)組的對象，變成真正的數(shù)組。

var arr = Array.prototype.slice.call(arguments);

遍歷類似數(shù)組的對象，可以采用for循環(huán)，也可以采用數(shù)組的forEach方法。

// for循環(huán)
function logArgs() {
    for (var i=0; i<arguments.length; i++) {
        console.log(i+'. '+arguments[i]);
    }
}

// forEach方法
function logArgs() {
    Array.prototype.forEach.call(arguments, function (elem, i) {
        console.log(i+'. '+elem);
    });
}

with語句

with語句的格式如下：

with (object)
  statement

它的作用是操作同一個對象的多個屬性時，提供一些書寫的方便。

// 例一
with (o) {
  p1 = 1;
  p2 = 2;
}

// 等同于

o.p1 = 1;
o.p2 = 2;

// 例二
with (document.links[0]){
  console.log(href);
  console.log(title);
  console.log(style);
}

// 等同于

console.log(document.links[0].href);
console.log(document.links[0].title);
console.log(document.links[0].style);

注意，with區(qū)塊內(nèi)部的變量，必須是當(dāng)前對象已經(jīng)存在的屬性，否則會創(chuàng)造一個當(dāng)前作用域的全局變量。這是因為with區(qū)塊沒有改變作用域，它的內(nèi)部依然是當(dāng)前作用域。

var o = {};

with (o){
  x = "abc";
}

o.x
// undefined

x
// "abc"

上面代碼中，對象o沒有屬性x，所以with區(qū)塊內(nèi)部對x的操作，等于創(chuàng)造了一個全局變量x。正確的寫法應(yīng)該是，先定義對象o的屬性x，然后在with區(qū)塊內(nèi)操作它。

var o = {};

o.x = 1;

with (o){
  x = 2;
}

o.x
// 2

這是with語句的一個很大的弊病，就是綁定對象不明確。

with (o) {
  console.log(x);
}

單純從上面的代碼塊，根本無法判斷x到底是全局變量，還是o對象的一個屬性。這非常不利于代碼的除錯和模塊化，編譯器也無法對這段代碼進行優(yōu)化，只能留到運行時判斷，這就拖慢了運行速度。因此，建議不要使用with語句，可以考慮用一個臨時變量代替with。

with(o1.o2.o3) {
  console.log(p1 + p2);
}

// 可以寫成

var temp = o1.o2.o3;
console.log(temp.p1 + temp.p2);

with語句少數(shù)有用場合之一，就是替換模板變量。

var str = 'Hello <%= name %>!';

上面代碼是一個模板字符串，為了替換其中的變量name，可以先將其分解成三部分'Hello ', name, '!'，然后進行模板變量替換。

var o = {
  name: 'Alice'
};

var p = [];
var tmpl = '';

with(o){
  p.push('Hello ', name, '!');
};

p.join('') // "Hello Alice!"

上面代碼中，with區(qū)塊內(nèi)部，模板變量name可以被對象o的屬性替換，而p依然是全局變量。事實上，這就是很多模板引擎的實現(xiàn)原理。

參考鏈接

• Dr. Axel Rauschmayer，Object properties in JavaScript
• Lakshan Perera, Revisiting JavaScript Objects
• Angus Croll, The Secret Life of JavaScript Primitivesi
• Dr. Axel Rauschmayer, JavaScript’s with statement and why it’s deprecated