JavaScript Object對(duì)象

2018-07-24 11:50 更新

目錄

概述

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

var obj = new Object();

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

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

new Object(123) instanceof Number
// true

注意，通過(guò)new Object()的寫(xiě)法生成新對(duì)象，與字面量的寫(xiě)法o = {}是等價(jià)的。

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

（1）部署在Object對(duì)象本身

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

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

var o = new Object();

Object.print(o)
// Object

（2）部署在Object.prototype對(duì)象

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

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

var o = new Object();

o.print() // Object

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

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

Object()

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

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

Object() // 返回一個(gè)空對(duì)象
Object() instanceof Object // true

Object(undefined) // 返回一個(gè)空對(duì)象
Object(undefined) instanceof Object // true

Object(null) // 返回一個(gè)空對(duì)象
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)為對(duì)應(yīng)的構(gòu)造函數(shù)生成的對(duì)象。

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

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

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

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

利用這一點(diǎn)，可以寫(xiě)一個(gè)判斷變量是否為對(duì)象的函數(shù)。

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

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

Object 對(duì)象的靜態(tài)方法

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

Object.keys()，Object.getOwnPropertyNames()

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

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

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

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

上面的代碼表示，對(duì)于一般的對(duì)象來(lái)說(shuō)，這兩個(gè)方法返回的結(jié)果是一樣的。只有涉及不可枚舉屬性時(shí)，才會(huì)有不一樣的結(jié)果。

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

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

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

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

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

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

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

其他方法

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

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

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

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

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

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

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

Object對(duì)象的實(shí)例方法

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

Object實(shí)例對(duì)象的方法，主要有以下六個(gè)。

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

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

Object.prototype.valueOf()

valueOf方法的作用是返回一個(gè)對(duì)象的“值”，默認(rèn)情況下返回對(duì)象本身。

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

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

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

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

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

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

1 + o // 3

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

Object.prototype.toString()

toString方法的作用是返回一個(gè)對(duì)象的字符串形式，默認(rèn)情況下返回類(lèi)型字符串。

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

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

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

字符串[object Object]本身沒(méi)有太大的用處，但是通過(guò)自定義toString方法，可以讓對(duì)象在自動(dòng)類(lèi)型轉(zhuǎn)換時(shí)，得到想要的字符串形式。

var o = new Object();

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

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

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

數(shù)組、字符串、函數(shù)、Date對(duì)象都分別部署了自己版本的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ù)類(lèi)型

Object.prototype.toString方法返回對(duì)象的類(lèi)型字符串，因此可以用來(lái)判斷一個(gè)值的類(lèi)型。

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

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

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

Object.prototype.toString.call(value)

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

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

也就是說(shuō)，Object.prototype.toString可以得到一個(gè)實(shí)例對(duì)象的構(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]"

利用這個(gè)特性，可以寫(xiě)出一個(gè)比typeof運(yùn)算符更準(zhǔn)確的類(lèi)型判斷函數(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"

在上面這個(gè)type函數(shù)的基礎(chǔ)上，還可以加上專門(mén)判斷某種類(lèi)型數(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

參考鏈接

以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)