JavaScript Object對象

目錄

JavaScript 原生提供Object對象（注意起首的O是大寫），所有其他對象都繼承自這個對象。Object本身也是一個構(gòu)造函數(shù)，可以直接通過它來生成新對象。

var obj = new Object();

Object作為構(gòu)造函數(shù)使用時，可以接受一個參數(shù)。如果該參數(shù)是一個對象，則直接返回這個對象；如果是一個原始類型的值，則返回該值對應(yīng)的包裝對象。

var o1 = {a: 1};
var o2 = new Object(o1);
o1 === o2 // true

new Object(123) instanceof Number
// true

注意，通過new Object()的寫法生成新對象，與字面量的寫法o = {}是等價的。

與其他構(gòu)造函數(shù)一樣，如果要在Object對象上面部署一個方法，有兩種做法。

（1）部署在Object對象本身

比如，在Object對象上面定義一個print方法，顯示其他對象的內(nèi)容。

Object.print = function(o){ console.log(o) };

var o = new Object();

Object.print(o)
// Object

（2）部署在Object.prototype對象

所有構(gòu)造函數(shù)都有一個prototype屬性，指向一個原型對象。凡是定義在Object.prototype對象上面的屬性和方法，將被所有實例對象共享。（關(guān)于prototype屬性的詳細解釋，參見《面向?qū)ο缶幊獭芬徽隆＃?/p>

Object.prototype.print = function(){ console.log(this)};

var o = new Object();

o.print() // Object

上面代碼在Object.prototype定義了一個print方法，然后生成一個Object的實例o。o直接繼承了Object.prototype的屬性和方法，可以在自身調(diào)用它們，也就是說，o對象的print方法實質(zhì)上是調(diào)用Object.prototype.print方法。。

可以看到，盡管上面兩種寫法的print方法功能相同，但是用法是不一樣的，因此必須區(qū)分“構(gòu)造函數(shù)的方法”和“實例對象的方法”。

Object本身當(dāng)作工具方法使用時，可以將任意值轉(zhuǎn)為對象。這個方法常用于保證某個值一定是對象。

如果參數(shù)是原始類型的值，Object方法返回對應(yīng)的包裝對象的實例（參見《原始類型的包裝對象》一節(jié)）。

Object() // 返回一個空對象
Object() instanceof Object // true

Object(undefined) // 返回一個空對象
Object(undefined) instanceof Object // true

Object(null) // 返回一個空對象
Object(null) instanceof Object // true

Object(1) // 等同于 new Number(1)
Object(1) instanceof Object // true
Object(1) instanceof Number // true

Object('foo') // 等同于 new String('foo')
Object('foo') instanceof Object // true
Object('foo') instanceof String // true

Object(true) // 等同于 new Boolean(true)
Object(true) instanceof Object // true
Object(true) instanceof Boolean // true

上面代碼表示Object函數(shù)可以將各種值轉(zhuǎn)為對應(yīng)的構(gòu)造函數(shù)生成的對象。

如果Object方法的參數(shù)是一個對象，它總是返回原對象。

var arr = [];
Object(arr) // 返回原數(shù)組
Object(arr) === arr // true

var obj = {};
Object(obj) // 返回原對象
Object(obj) === obj // true

var fn = function () {};
Object(fn) // 返回原函數(shù)
Object(fn) === fn // true

利用這一點，可以寫一個判斷變量是否為對象的函數(shù)。

function isObject(value) {
  return value === Object(value);
}

isObject([]) // true
isObject(true) // false

所謂“靜態(tài)方法”，是指部署在Object對象自身的方法。

Object.keys()，Object.getOwnPropertyNames()

Object.keys方法和Object.getOwnPropertyNames方法很相似，一般用來遍歷對象的屬性。它們的參數(shù)都是一個對象，都返回一個數(shù)組，該數(shù)組的成員都是對象自身的（而不是繼承的）所有屬性名。它們的區(qū)別在于，Object.keys方法只返回可枚舉的屬性（關(guān)于可枚舉性的詳細解釋見后文），Object.getOwnPropertyNames方法還返回不可枚舉的屬性名。

var o = {
  p1: 123,
  p2: 456
};

Object.keys(o)
// ["p1", "p2"]

Object.getOwnPropertyNames(o)
// ["p1", "p2"]

上面的代碼表示，對于一般的對象來說，這兩個方法返回的結(jié)果是一樣的。只有涉及不可枚舉屬性時，才會有不一樣的結(jié)果。

var a = ["Hello", "World"];

Object.keys(a)
// ["0", "1"]

Object.getOwnPropertyNames(a)
// ["0", "1", "length"]

上面代碼中，數(shù)組的length屬性是不可枚舉的屬性，所以只出現(xiàn)在Object.getOwnPropertyNames方法的返回結(jié)果中。

由于JavaScript沒有提供計算對象屬性個數(shù)的方法，所以可以用這兩個方法代替。

Object.keys(o).length
Object.getOwnPropertyNames(o).length

一般情況下，幾乎總是使用Object.keys方法，遍歷數(shù)組的屬性。

其他方法

除了上面提到的方法，Object還有不少其他方法，將在后文逐一詳細介紹。

（1）對象屬性模型的相關(guān)方法

• Object.getOwnPropertyDescriptor()：獲取某個屬性的attributes對象。
• Object.defineProperty()：通過attributes對象，定義某個屬性。
• Object.defineProperties()：通過attributes對象，定義多個屬性。
• Object.getOwnPropertyNames()：返回直接定義在某個對象上面的全部屬性的名稱。

（2）控制對象狀態(tài)的方法

• Object.preventExtensions()：防止對象擴展。
• Object.isExtensible()：判斷對象是否可擴展。
• Object.seal()：禁止對象配置。
• Object.isSealed()：判斷一個對象是否可配置。
• Object.freeze()：凍結(jié)一個對象。
• Object.isFrozen()：判斷一個對象是否被凍結(jié)。

（3）原型鏈相關(guān)方法

• Object.create()：該方法可以指定原型對象和屬性，返回一個新的對象。
• Object.getPrototypeOf()：獲取對象的Prototype對象。

除了Object對象本身的方法，還有不少方法是部署在Object.prototype對象上的，所有Object的實例對象都繼承了這些方法。

Object實例對象的方法，主要有以下六個。

• valueOf()：返回當(dāng)前對象對應(yīng)的值。
• toString()：返回當(dāng)前對象對應(yīng)的字符串形式。
• toLocaleString()：返回當(dāng)前對象對應(yīng)的本地字符串形式。
• hasOwnProperty()：判斷某個屬性是否為當(dāng)前對象自身的屬性，還是繼承自原型對象的屬性。
• isPrototypeOf()：判斷當(dāng)前對象是否為另一個對象的原型。
• propertyIsEnumerable()：判斷某個屬性是否可枚舉。

本節(jié)介紹前兩個方法，其他方法將在后文相關(guān)章節(jié)介紹。

Object.prototype.valueOf()

valueOf方法的作用是返回一個對象的“值”，默認情況下返回對象本身。

var o = new Object();
o.valueOf() === o // true

上面代碼比較o.valueOf()與o本身，兩者是一樣的。

valueOf方法的主要用途是，JavaScript自動類型轉(zhuǎn)換時會默認調(diào)用這個方法（詳見《數(shù)據(jù)類型轉(zhuǎn)換》一節(jié)）。

var o = new Object();
1 + o // "1[object Object]"

上面代碼將對象o與數(shù)字1相加，這時JavaScript就會默認調(diào)用valueOf()方法。所以，如果自定義valueOf方法，就可以得到想要的結(jié)果。

var o = new Object();
o.valueOf = function (){
  return 2;
};

1 + o // 3

上面代碼自定義了o對象的valueOf方法，于是1 + o就得到了3。這種方法就相當(dāng)于用o.valueOf覆蓋Object.prototype.valueOf。

Object.prototype.toString()

toString方法的作用是返回一個對象的字符串形式，默認情況下返回類型字符串。

var o1 = new Object();
o1.toString() // "[object Object]"

var o2 = {a:1};
o2.toString() // "[object Object]"

上面代碼表示，對于一個對象調(diào)用toString方法，會返回字符串[object Object]，該字符串說明對象的類型。

字符串[object Object]本身沒有太大的用處，但是通過自定義toString方法，可以讓對象在自動類型轉(zhuǎn)換時，得到想要的字符串形式。

var o = new Object();

o.toString = function () {
  return 'hello';
};

o + ' ' + 'world' // "hello world"

上面代碼表示，當(dāng)對象用于字符串加法時，會自動調(diào)用toString方法。由于自定義了toString方法，所以返回字符串hello world。

數(shù)組、字符串、函數(shù)、Date對象都分別部署了自己版本的toString方法，覆蓋了Object.prototype.toString方法。

[1, 2, 3].toString() // "1,2,3"

'123'.toString() // "123"

(function () {
  return 123;
}).toString()
// "function () {
//   return 123;
// }"

(new Date()).toString()
// "Tue May 10 2016 09:11:31 GMT+0800 (CST)"

toString()的應(yīng)用：判斷數(shù)據(jù)類型

Object.prototype.toString方法返回對象的類型字符串，因此可以用來判斷一個值的類型。

var o = {};
o.toString() // "[object Object]"

上面代碼調(diào)用空對象的toString方法，結(jié)果返回一個字符串object Object，其中第二個Object表示該值的構(gòu)造函數(shù)。這是一個十分有用的判斷數(shù)據(jù)類型的方法。

實例對象可能會自定義toString方法，覆蓋掉Object.prototype.toString方法。通過函數(shù)的call方法，可以在任意值上調(diào)用Object.prototype.toString方法，幫助我們判斷這個值的類型。

Object.prototype.toString.call(value)

不同數(shù)據(jù)類型的Object.prototype.toString方法返回值如下。

• 數(shù)值：返回[object Number]。
• 字符串：返回[object String]。
• 布爾值：返回[object Boolean]。
• undefined：返回[object Undefined]。
• null：返回[object Null]。
• 數(shù)組：返回[object Array]。
• arguments對象：返回[object Arguments]。
• 函數(shù)：返回[object Function]。
• Error對象：返回[object Error]。
• Date對象：返回[object Date]。
• RegExp對象：返回[object RegExp]。
• 其他對象：返回[object Object]。

也就是說，Object.prototype.toString可以得到一個實例對象的構(gòu)造函數(shù)。

Object.prototype.toString.call(2) // "[object Number]"
Object.prototype.toString.call('') // "[object String]"
Object.prototype.toString.call(true) // "[object Boolean]"
Object.prototype.toString.call(undefined) // "[object Undefined]"
Object.prototype.toString.call(null) // "[object Null]"
Object.prototype.toString.call(Math) // "[object Math]"
Object.prototype.toString.call({}) // "[object Object]"
Object.prototype.toString.call([]) // "[object Array]"

利用這個特性，可以寫出一個比typeof運算符更準確的類型判斷函數(shù)。

var type = function (o){
  var s = Object.prototype.toString.call(o);
  return s.match(/\[object (.*?)\]/)[1].toLowerCase();
};

type({}); // "object"
type([]); // "array"
type(5); // "number"
type(null); // "null"
type(); // "undefined"
type(/abcd/); // "regex"
type(new Date()); // "date"

在上面這個type函數(shù)的基礎(chǔ)上，還可以加上專門判斷某種類型數(shù)據(jù)的方法。

['Null',
 'Undefined',
 'Object',
 'Array',
 'String',
 'Number',
 'Boolean',
 'Function',
 'RegExp',
 'NaN',
 'Infinite'
].forEach(function (t) {
  type['is' + t] = function (o) {
    return type(o) === t.toLowerCase();
  };
});

type.isObject({}) // true
type.isNumber(NaN) // true
type.isRegExp(/abc/) // true

• Axel Rauschmayer, Protecting objects in JavaScript
• kangax, Understanding delete
• Jon Bretman, Type Checking in JavaScript
• Cody Lindley, Thinking About ECMAScript 5 Parts
• Bjorn Tipling, Advanced objects in JavaScript
• Javier Márquez, Javascript properties are enumerable, writable and configurable
• Sella Rafaeli, Native JavaScript Data-Binding: 使用存取函數(shù)實現(xiàn)model與view的雙向綁定
• Lea Verou, Copying object properties, the robust way