(十)Object對象

1 概述



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

JavaScript 的所有其他對象都繼承自Object對象腐晾,即那些對象都是Object的實例。

Object對象的原生方法分成兩類:Object本身的方法與Object的實例方法丐一。
(1)Object對象本身的方法
所謂”本身的方法“就是直接定義在Object對象的方法藻糖。

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

上面代碼中,print方法就是直接定義在Object對象上库车。
(2)Object的實例方法
所謂實例方法就是定義在Object原型對象Object.prototype上的方法巨柒。它可以被Object實例直接使用。

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

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

上面代碼中柠衍,Object.prototype定義了一個print方法洋满,然后生成一個Object的實例objobj直接繼承了Object.prototype的屬性和方法珍坊,可以直接使用obj.print調(diào)用print方法牺勾。也就是說,obj對象的print方法實質(zhì)上就是調(diào)用Object.prototype.print方法阵漏。

這里只要知道驻民,凡是定義在Object.prototype對象上面的屬性和方法腺怯,將被所有實例對象共享就可以了。

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

2 Object()



Object本身是一個函數(shù)懦趋,可以當作工具方法使用晾虑,將任意值轉(zhuǎn)為對象瑰剃。這個方法常用于保證某個值一定是對象雕擂。

如果參數(shù)為空(或者為undefinednull)安吁,Object()返回一個空對象蔓涧。

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

obj instanceof Object // true

上面代碼的含義赠涮,是將undefinednull轉(zhuǎn)為對象鸿摇,結(jié)果得到了一個空對象obj傲茄。
instanceof運算符用來驗證隔心,一個對象是否為指定的構(gòu)造函數(shù)的實例坎缭。obj instanceof Object返回true竟痰,就表示obj對象是Object的實例。
如果參數(shù)是原始類型的值掏呼,Object方法將其轉(zhuǎn)為對應的包裝對象的實例

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)換成對象就是原始類型值對應的包裝對象憎夷。

如果Object方法的參數(shù)是一個對象莽鸿,它總是返回該對象,即不用轉(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

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

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

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

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



Object不僅可以當作工具函數(shù)使用蒋得,還可以當作構(gòu)造函數(shù)使用级及,即前面可以使用new命令。

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

var obj = new Object();

注意,通過var obj = new Object()的寫法生成新對象入偷,與字面量的寫法var obj = {}是等價的追驴。或者說疏之,后者只是前者的一種簡便寫法殿雪。

Object構(gòu)造函數(shù)的用法與工具方法很相似,幾乎一模一樣锋爪。使用時丙曙,可以接受一個參數(shù)爸业,如果該參數(shù)是一個對象,則直接返回這個對象亏镰;如果是一個原始類型的值扯旷,則返回該值對應的包裝對象

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)成一個對象钧忽,new Object(value)則表示新生成一個對象,它的值是value逼肯。

4 Object 的靜態(tài)方法



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

4.1 Object.keys()篮幢,Object.getOwnPropertyNames()

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

Object.keys方法的參數(shù)是一個對象,返回一個數(shù)組三椿。該數(shù)組的成員都是該對象自身的(而不是繼承的)所有屬性名缺菌。

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

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

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

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

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

對于一般的對象來說纽乱,Object.keys()Object.getOwnPropertyNames()返回的結(jié)果是一樣的。只有涉及不可枚舉屬性時昆箕,才會有不一樣的結(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 沒有提供計算對象屬性個數(shù)的方法骆姐,所以可以用這兩個方法代替。

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

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

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

4.2 其他方法

除了上面提到的兩個方法公荧,Object還有不少其他靜態(tài)方法带射,將在后文逐一詳細介紹。
(1)對象屬性模型的相關方法

Object.getOwnPropertyDescriptor():獲取某個屬性的描述對象循狰。
Object.defineProperty():通過描述對象窟社,定義某個屬性券勺。
Object.defineProperties():通過描述對象,定義多個屬性灿里。

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

Object.preventExtensions():防止對象擴展关炼。
Object.isExtensible():判斷對象是否可擴展。
Object.seal():禁止對象配置匣吊。
Object.isSealed():判斷一個對象是否可配置盗扒。
Object.freeze():凍結(jié)一個對象。
Object.isFrozen():判斷一個對象是否被凍結(jié)缀去。

(3)原型鏈相關方法

Object.create():該方法可以指定原型對象和屬性侣灶,返回一個新的對象。
Object.getPrototypeOf():獲取對象的Prototype對象缕碎。

5 Object 的實例方法

除了靜態(tài)方法褥影,還有不少方法定義在Object.prototype對象。它們稱為實例方法咏雌,所有Object的實例對象都繼承了這些方法凡怎。

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

Object.prototype.valueOf():返回當前對象對應的值统倒。
Object.prototype.toString():返回當前對象對應的字符串形式。
Object.prototype.toLocaleString():返回當前對象對應的本地字符串形式氛雪。
Object.prototype.hasOwnProperty():判斷某個屬性是否為當前對象自身的屬性房匆,還是繼承自原型對象的屬性。
Object.prototype.isPrototypeOf():判斷當前對象是否為另一個對象的原型报亩。
Object.prototype.propertyIsEnumerable():判斷某個屬性是否可枚舉浴鸿。

本節(jié)介紹前四個方法岳链,另外兩個方法將在后文相關章節(jié)介紹掸哑。

5.1 Object.prototype.valueOf()

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

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

上面代碼比較obj.valueOf()obj本身服猪,兩者是一樣的拐云。
valueOf方法的主要用途是叉瘩,JavaScript 自動類型轉(zhuǎn)換時會默認調(diào)用這個方法

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

上面代碼將對象obj與數(shù)字1相加薇缅,這時 JavaScript 就會默認調(diào)用valueOf()方法泳桦,求出obj的值再與1相加灸撰。所以浮毯,如果自定義valueOf方法泰鸡,就可以得到想要的結(jié)果盛龄。

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

1 + obj // 3

上面代碼自定義了obj對象的valueOf方法讯嫂,于是1 + obj就得到了3。這種方法就相當于用自定義的obj.valueOf,覆蓋Object.prototype.valueOf千扔。

5.2 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 obj = new Object();

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

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

上面代碼表示硬萍,當對象用于字符串加法時朴乖,會自動調(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],因為它們都自定義了toString方法坑质,覆蓋原始方法涡扼。

5.3 toString() 的應用:判斷數(shù)據(jù)類型

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

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

上面代碼調(diào)用空對象的toString方法萎津,結(jié)果返回一個字符串object Object,其中第二個Object表示該值的構(gòu)造函數(shù)荤傲。這是一個十分有用的判斷數(shù)據(jù)類型的方法。
說明:由于實例對象可能會自定義toString方法终佛,覆蓋掉Object.prototype.toString方法,所以為了得到類型字符串绍豁,最好直接使用Object.prototype.toString方法竹揍。通過函數(shù)的call方法芬位,可以在任意值上調(diào)用這個方法昧碉,幫助我們判斷這個值的類型揽惹。

Object.prototype.toString.call(value)

上面代碼表示對value這個值調(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可以看出一個值到底是什么類型鼻听。

//這里的call 后面會說到
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ù)的基礎上憋槐,還可以加上專門判斷某種類型數(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

5.4 Object.prototype.toLocaleString()

Object.prototype.toLocaleString方法與toString的返回結(jié)果相同斥杜,也是返回一個值的字符串形式上枕。

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

這個方法的主要作用是留出一個接口返弹,讓各種不同的對象實現(xiàn)自己版本的toLocaleString默终,用來返回針對某些地域的特定的值。目前谈况,主要有三個對象自定義了toLocaleString方法泼诱。

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

舉例來說耸袜,日期的實例對象的toStringtoLocaleString返回值就不一樣纵柿,而且toLocaleString的返回值跟用戶設定的所在地域相關渊跋。

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"

5.5 Object.prototype.hasOwnProperty()

Object.prototype.hasOwnProperty方法接受一個字符串作為參數(shù)蒿囤,返回一個布爾值岳守,表示該實例對象自身是否具有該屬性碌冶。

var obj = {
  p: 123
};

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

上面代碼中湿痢,對象obj自身具有p屬性,所以返回true扑庞。toString屬性是繼承的,所以返回false租悄。

本文大量參考借鑒了阮一峰老師的博客《JavaScript 標準參考教程》鸯屿,他的文章使我受益匪淺搓扯,在此表示由衷的感謝!

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末沾鳄,一起剝皮案震驚了整個濱河市慨飘,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌译荞,老刑警劉巖瓤的,帶你破解...
    沈念sama閱讀 211,194評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異吞歼,居然都是意外死亡圈膏,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,058評論 2 385
  • 文/潘曉璐 我一進店門篙骡,熙熙樓的掌柜王于貴愁眉苦臉地迎上來稽坤,“玉大人,你說我怎么就攤上這事糯俗∧蛲剩” “怎么了?”我有些...
    開封第一講書人閱讀 156,780評論 0 346
  • 文/不壞的土叔 我叫張陵叶骨,是天一觀的道長茫多。 經(jīng)常有香客問我,道長忽刽,這世上最難降的妖魔是什么天揖? 我笑而不...
    開封第一講書人閱讀 56,388評論 1 283
  • 正文 為了忘掉前任夺欲,我火速辦了婚禮,結(jié)果婚禮上今膊,老公的妹妹穿的比我還像新娘些阅。我一直安慰自己,他們只是感情好斑唬,可當我...
    茶點故事閱讀 65,430評論 5 384
  • 文/花漫 我一把揭開白布市埋。 她就那樣靜靜地躺著,像睡著了一般恕刘。 火紅的嫁衣襯著肌膚如雪缤谎。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,764評論 1 290
  • 那天褐着,我揣著相機與錄音坷澡,去河邊找鬼。 笑死含蓉,一個胖子當著我的面吹牛频敛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播馅扣,決...
    沈念sama閱讀 38,907評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼斟赚,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了差油?” 一聲冷哼從身側(cè)響起拗军,我...
    開封第一講書人閱讀 37,679評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎厌殉,沒想到半個月后食绿,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,122評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡公罕,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,459評論 2 325
  • 正文 我和宋清朗相戀三年器紧,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片楼眷。...
    茶點故事閱讀 38,605評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡铲汪,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出罐柳,到底是詐尸還是另有隱情掌腰,我是刑警寧澤,帶...
    沈念sama閱讀 34,270評論 4 329
  • 正文 年R本政府宣布张吉,位于F島的核電站齿梁,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜勺择,卻給世界環(huán)境...
    茶點故事閱讀 39,867評論 3 312
  • 文/蒙蒙 一创南、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧省核,春花似錦稿辙、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,734評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至旧噪,卻和暖如春吨娜,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背舌菜。 一陣腳步聲響...
    開封第一講書人閱讀 31,961評論 1 265
  • 我被黑心中介騙來泰國打工萌壳, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人日月。 一個月前我還...
    沈念sama閱讀 46,297評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像缤骨,于是被迫代替她去往敵國和親爱咬。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,472評論 2 348

推薦閱讀更多精彩內(nèi)容

  • 概述 JavaScript 原生提供Object對象(注意起首的O是大寫)绊起,本章介紹該對象原生的各種方法精拟。 Jav...
    許先生__閱讀 464評論 0 3
  • 第5章 引用類型(返回首頁) 本章內(nèi)容 使用對象 創(chuàng)建并操作數(shù)組 理解基本的JavaScript類型 使用基本類型...
    大學一百閱讀 3,216評論 0 4
  • 第2章 基本語法 2.1 概述 基本句法和變量 語句 JavaScript程序的執(zhí)行單位為行(line),也就是一...
    悟名先生閱讀 4,131評論 0 13
  • ??面向?qū)ο螅∣bject-Oriented,OO)的語言有一個標志笋鄙,那就是它們都有類的概念师枣,而通過類可以創(chuàng)建任意...
    霜天曉閱讀 2,098評論 0 6
  • 第二天傍晚,紀一洋正站在圖書館的大門前萧落,手中則拿著那副昨天被帶走的VR眼鏡践美。他回想起了今天早上惡魔給出的...
    laodama閱讀 353評論 0 0