JavaScript Object 對象

2023-03-20 15:56 更新
概述

JavaScript 原生提供Object對象（注意起首的O是大寫），本章介紹該對象原生的各種方法。

JavaScript 的所有其他對象都繼承自Object對象，即那些對象都是Object的實(shí)例。

Object對象的原生方法分成兩類：Object本身的方法與Object的實(shí)例方法。

（1）Object對象本身的方法

所謂“本身的方法”就是直接定義在Object對象的方法。

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

上面代碼中，print方法就是直接定義在Object對象上。

（2）Object的實(shí)例方法

所謂實(shí)例方法就是定義在Object原型對象Object.prototype上的方法。它可以被Object實(shí)例直接使用。

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

var obj = new Object();
obj.print() // Object

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

關(guān)于原型對象object.prototype的詳細(xì)解釋，參見《面向?qū)ο缶幊獭氛鹿?jié)。這里只要知道，凡是定義在Object.prototype對象上面的屬性和方法，將被所有實(shí)例對象共享就可以了。

以下先介紹Object作為函數(shù)的用法，然后再介紹Object對象的原生方法，分成對象自身的方法（又稱為“靜態(tài)方法”）和實(shí)例方法兩部分。

Object()

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

如果參數(shù)為空（或者為undefined和null），Object()返回一個(gè)空對象。

var obj = Object();
// 等同于
var obj = Object(undefined);
var obj = Object(null);

obj instanceof Object // true

上面代碼的含義，是將undefined和null轉(zhuǎn)為對象，結(jié)果得到了一個(gè)空對象obj。

instanceof運(yùn)算符用來驗(yàn)證，一個(gè)對象是否為指定的構(gòu)造函數(shù)的實(shí)例。obj instanceof Object返回true，就表示obj對象是Object的實(shí)例。

如果參數(shù)是原始類型的值，Object方法將其轉(zhuǎn)為對應(yīng)的包裝對象的實(shí)例（參見《原始類型的包裝對象》一章）。

var obj = Object(1);
obj instanceof Object // true
obj instanceof Number // true

var obj = Object('foo');
obj instanceof Object // true
obj instanceof String // true

var obj = Object(true);
obj instanceof Object // true
obj instanceof Boolean // true

上面代碼中，Object函數(shù)的參數(shù)是各種原始類型的值，轉(zhuǎn)換成對象就是原始類型值對應(yīng)的包裝對象。

如果Object方法的參數(shù)是一個(gè)對象，它總是返回該對象，即不用轉(zhuǎn)換。

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

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

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

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

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

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

Object 構(gòu)造函數(shù)

Object不僅可以當(dāng)作工具函數(shù)使用，還可以當(dāng)作構(gòu)造函數(shù)使用，即前面可以使用new命令。

Object構(gòu)造函數(shù)的首要用途，是直接通過它來生成新對象。

var obj = new Object();

注意，通過var obj = new Object()的寫法生成新對象，與字面量的寫法var obj = {}是等價(jià)的。或者說，后者只是前者的一種簡便寫法。

Object構(gòu)造函數(shù)的用法與工具方法很相似，幾乎一模一樣。使用時(shí)，可以接受一個(gè)參數(shù)，如果該參數(shù)是一個(gè)對象，則直接返回這個(gè)對象；如果是一個(gè)原始類型的值，則返回該值對應(yīng)的包裝對象（詳見《包裝對象》一章）。

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

var obj = new Object(123);
obj instanceof Number // true

雖然用法相似，但是Object(value)與new Object(value)兩者的語義是不同的，Object(value)表示將value轉(zhuǎn)成一個(gè)對象，new Object(value)則表示新生成一個(gè)對象，它的值是value。

Object 的靜態(tài)方法

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

Object.keys()，Object.getOwnPropertyNames()

Object.keys方法和Object.getOwnPropertyNames方法都用來遍歷對象的屬性。

Object.keys方法的參數(shù)是一個(gè)對象，返回一個(gè)數(shù)組。該數(shù)組的成員都是該對象自身的（而不是繼承的）所有屬性名。

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

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

Object.getOwnPropertyNames方法與Object.keys類似，也是接受一個(gè)對象作為參數(shù)，返回一個(gè)數(shù)組，包含了該對象自身的所有屬性名。

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

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

對于一般的對象來說，Object.keys()和Object.getOwnPropertyNames()返回的結(jié)果是一樣的。只有涉及不可枚舉屬性時(shí)，才會有不一樣的結(jié)果。Object.keys方法只返回可枚舉的屬性（詳見《對象屬性的描述對象》一章），Object.getOwnPropertyNames方法還返回不可枚舉的屬性名。

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

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

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

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

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

Object.keys(obj).length // 2
Object.getOwnPropertyNames(obj).length // 2

一般情況下，幾乎總是使用Object.keys方法，遍歷對象的屬性。

其他方法

除了上面提到的兩個(gè)方法，Object還有不少其他靜態(tài)方法，將在后文逐一詳細(xì)介紹。

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

  • Object.getOwnPropertyDescriptor()：獲取某個(gè)屬性的描述對象。
  • Object.defineProperty()：通過描述對象，定義某個(gè)屬性。
  • Object.defineProperties()：通過描述對象，定義多個(gè)屬性。

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

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

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

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

Object 的實(shí)例方法

除了靜態(tài)方法，還有不少方法定義在Object.prototype對象。它們稱為實(shí)例方法，所有Object的實(shí)例對象都繼承了這些方法。

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

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

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

Object.prototype.valueOf()

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

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

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

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

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

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

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

1 + obj // 3

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

Object.prototype.toString()

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

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

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

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

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

var obj = new Object();

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

obj + ' ' + 'world' // "hello world"

上面代碼表示，當(dāng)對象用于字符串加法時(shí)，會自動調(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)"

上面代碼中，數(shù)組、字符串、函數(shù)、Date 對象調(diào)用toString方法，并不會返回[object Object]，因?yàn)樗鼈兌甲远x了toString方法，覆蓋原始方法。

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

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

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

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

由于實(shí)例對象可能會自定義toString方法，覆蓋掉Object.prototype.toString方法，所以為了得到類型字符串，最好直接使用Object.prototype.toString方法。通過函數(shù)的call方法，可以在任意值上調(diào)用這個(gè)方法，幫助我們判斷這個(gè)值的類型。

Object.prototype.toString.call(value)

上面代碼表示對value這個(gè)值調(diào)用Object.prototype.toString方法。

不同數(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è)值到底是什么類型。

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è)特性，可以寫出一個(gè)比typeof運(yùn)算符更準(zhǔn)確的類型判斷函數(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ǔ)上，還可以加上專門判斷某種類型數(shù)據(jù)的方法。

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

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

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

Object.prototype.toLocaleString()

Object.prototype.toLocaleString方法與toString的返回結(jié)果相同，也是返回一個(gè)值的字符串形式。

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

這個(gè)方法的主要作用是留出一個(gè)接口，讓各種不同的對象實(shí)現(xiàn)自己版本的toLocaleString，用來返回針對某些地域的特定的值。

var person = {
  toString: function () {
    return 'Henry Norman Bethune';
  },
  toLocaleString: function () {
    return '白求恩';
  }
};

person.toString() // Henry Norman Bethune
person.toLocaleString() // 白求恩

上面代碼中，toString()方法返回對象的一般字符串形式，toLocaleString()方法返回本地的字符串形式。

目前，主要有三個(gè)對象自定義了toLocaleString方法。

  • Array.prototype.toLocaleString()
  • Number.prototype.toLocaleString()
  • Date.prototype.toLocaleString()

舉例來說，日期的實(shí)例對象的toString和toLocaleString返回值就不一樣，而且toLocaleString的返回值跟用戶設(shè)定的所在地域相關(guān)。

var date = new Date();
date.toString() // "Tue Jan 01 2018 12:01:33 GMT+0800 (CST)"
date.toLocaleString() // "1/01/2018, 12:01:33 PM"

Object.prototype.hasOwnProperty()

Object.prototype.hasOwnProperty方法接受一個(gè)字符串作為參數(shù)，返回一個(gè)布爾值，表示該實(shí)例對象自身是否具有該屬性。

var obj = {
  p: 123
};

obj.hasOwnProperty('p') // true
obj.hasOwnProperty('toString') // false

上面代碼中，對象obj自身具有p屬性，所以返回true。toString屬性是繼承的，所以返回false。

參考鏈接

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

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號