一篇文章帶你了解JavaScript Object 對(duì)象
一、概念
JavaScript 原生提供Object對(duì)象(注意起首的O是大寫(xiě)),介紹該對(duì)象原生的各種方法。JavaScript 的所有其他對(duì)象都繼承自O(shè)bject對(duì)象,即那些對(duì)象都是Object的實(shí)例。
二、Object()
Object本身是一個(gè)函數(shù),可以當(dāng)作工具方法使用,將任意值轉(zhuǎn)為對(duì)象。
這個(gè)方法常用于保證某個(gè)值一定是對(duì)象。如果參數(shù)為空(或者為undefined和null),Object()返回一個(gè)空對(duì)象。
<html>
<head>
<title>JavaScript Animation</title>
<script type="text/javascript">
var obj = Object();
// 等同于
var obj = Object(undefined);
var obj = Object(null);
console.log(obj) // true
</script>
</head>
<body>
<p id="dad"></p>
</body>
</html>
運(yùn)行效果:
參數(shù)是原始類(lèi)型的值,Object方法將其轉(zhuǎn)為對(duì)應(yīng)的包裝對(duì)象。
var obj = Object(1);
obj instanceof Object// true
Object方法的參數(shù)是一個(gè)對(duì)象,它總是返回該對(duì)象,即不用轉(zhuǎn)換。
<html>
<head>
<title>JavaScript Animation</title>
<script type="text/javascript">
var obj = Object(1);
obj instanceof Object
console.log(obj) // true
</script>
</head>
<body>
<p id="dad"></p>
</body>
</html>
利用這一點(diǎn),可以寫(xiě)一個(gè)判斷變量是否為對(duì)象的函數(shù)。
function isObject(value) {
return value === Object(value);
}
isObject([]) // trueisObject(true) // false
1. Object 構(gòu)造函數(shù)
Object構(gòu)造函數(shù)的首要用途,是直接通過(guò)它來(lái)生成新對(duì)象。
var obj = new Object();
注:
通過(guò)var obj = new Object()的寫(xiě)法生成新對(duì)象,與字面量的寫(xiě)法var obj = {}是等價(jià)的?;蛘哒f(shuō),后者只是前者的一種簡(jiǎn)便寫(xiě)法。
var o1 = {a: 1};
var o2 = new Object(o1);o1 === o2 // truevar obj = new Object(123);obj instanceof Number // true
注:( 雖然用法相似,但是Object(value)與new Object(value)兩者的語(yǔ)義是不同的。)
Object(value)表示將value轉(zhuǎn)成一個(gè)對(duì)象,new Object(value)則表示新生成一個(gè)對(duì)象,它的值是value。
2. Object 的實(shí)例方法
除了靜態(tài)方法,還有不少方法定義在Object.prototype對(duì)象。它們稱(chēng)為實(shí)例方法。
所有Object的實(shí)例對(duì)象都繼承了這些方法。
2.1 Object.prototype.valueOf()
valueOf方法的作用是返回一個(gè)對(duì)象的“值”,默認(rèn)情況下返回對(duì)象本身。
var obj = new Object();
obj.valueOf() === obj // true
例1:
var obj = new Object();
1 + obj // "1[object Object]"
例2:
var obj = new Object();
obj.valueOf = function () { return 2;};
1 + obj // 3
代碼解析
自定義了obj對(duì)象的valueOf方法,于是1 + obj就得到了3。這種方法就相當(dāng)于用自定義的obj.valueOf,覆蓋Object.prototype.valueOf。
2.2 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]"
通過(guò)自定義toString方法,可以讓對(duì)象在自動(dòng)類(lèi)型轉(zhuǎn)換時(shí),得到想要的字符串形式。
var obj = new Object();
obj.toString = function () { return 'hello';};
obj + ' ' + '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)"
上面代碼中,數(shù)組、字符串、函數(shù)、Date 對(duì)象調(diào)用toString方法,并不會(huì)返回[object Object],因?yàn)樗鼈兌甲远x了toString方法,覆蓋原始方法。
2.3 Objct.prototype.toLocaleString()
Object.prototype.toLocaleString方法與toString的返回結(jié)果相同,也是返回一個(gè)值的字符串形式。
var obj = {};
obj.toString(obj) // "[object Object]"
obj.toLocaleString(obj) // "[object Object]"
這個(gè)方法的主要作用是留出一個(gè)接口,讓各種不同的對(duì)象實(shí)現(xiàn)自己版本的toLocaleString,用來(lái)返回針對(duì)某些地域的特定的值。
var person = {
toString: function () {
return 'Henry Norman Bethune';
},
toLocaleString: function () {
return '白求恩';
}
};
person.toString() // Henry Norman Bethune
person.toLocaleString() // 白求恩
日期的實(shí)例對(duì)象的toString和toLocaleString返回值就不一樣,而且toLocaleString的返回值跟用戶(hù)設(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"
三、總結(jié)
本文基于JavaScript基礎(chǔ),主要介紹Object 對(duì)象,常見(jiàn)的構(gòu)造函數(shù),Object 的實(shí)例方法,都通過(guò)案例的分析進(jìn)行詳細(xì)講解。通過(guò)運(yùn)行效果圖展示,能夠更好的幫助讀者去理解。
歡迎大家積極嘗試,有時(shí)候看到別人實(shí)現(xiàn)起來(lái)很簡(jiǎn)單,但是到自己動(dòng)手實(shí)現(xiàn)的時(shí)候,總會(huì)有各種各樣的問(wèn)題,切勿眼高手低,勤動(dòng)手,才可以理解的更加深刻。
代碼很簡(jiǎn)單,希望對(duì)你學(xué)習(xí)有幫助。