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