DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JS中令人發指的valueOf方法介紹
JS中令人發指的valueOf方法介紹
編輯:關於JavaScript     
彭老濕近期月報裡提到了valueOf方法,興致來了翻了下ECMA5裡關於valueOf方法的介紹,如下:

15.2.4.4 Object.prototype.valueOf ( )
When the valueOf method is called, the following steps are taken:
1. Let O be the result of calling ToObject passing the this value as the argument.
2. If O is the result of calling the Object constructor with a host object (15.2.2.1), then
a. Return either O or another value such as the host object originally passed to the constructor. The specific result that is returned is implementation-defined.
3. Return O.
規范裡面的對於valueOf的解釋很短,大致為:調用ToObject方法(一個抽象方法,後面會講到),並將this的值作為參數傳入。

針對調用ToObject時傳入的不同參數(this),返回值分別如下:

1、this為宿主對象時,返回值取決於浏覽器的實現,即不同浏覽器的返回可能不同(關於宿主對象,可參考http://www.w3school.com.cn/js/pro_js_object_types.asp)
2、this不是宿主對象,則返回ToObject(this)的值 
參數類型   返回結果 Undefined 拋出TypeError異常 Null 拋出TypeError異常 Number 創建一個Number對象,它內部的初始值為傳入的參數值 String 創建一個String對象,它內部的初始值為傳入的參數值 Boolean 創建一個Boolean對象,它內部的初始值為傳入的參數值 Object 返回傳入的參數(無轉換)
根據Object.prototype.valueOf的定義,以及抽象方法ToObject的描述,可得下表 
obj類型   Object.prototype.valueOf.call(obj)返回結果 Undefined 拋出TypeError異常 Null 拋出TypeError異常 Number Number類型的對象,值等於obj String String類型的對象,值等於obj Boolean Boolean類型的對象,值等於obj Object obj對象本身
舉幾個具體的例子:
復制代碼 代碼如下:
var num = 123;
console.log(num.valueOf()); //輸出:123
console.log(num.valueOf()); //輸出:'number'

var unde = undefined;
console.log(Object.prototype.valueOf.call(unde)); //輸出:'TypeError: Cannot convert null to object'

var obj = {name:'casper'};
var linkObj = obj.valueOf();
linkObj.name = 'change';
console.log(linkObj.name); //輸出:'change' ...說明obj.valueOf()返回的是對象自身

實際上,上面沒有提到Array、Function對象,根據下面代碼可以猜想,當Object.prototype.valueOf調用時,參數為Array、Function類型的對象時,返回的結果也為對象自身:
復制代碼 代碼如下:
var arr = [1, 2 ,3];
var linkArr = arr.valueOf();
linkArr[0] = ['casper'];
console.log(linkArr); //輸出:['casper', 2, 3]

var foo = function(){ return 1; };
var linkFoo = foo.valueOf();
linkFoo.test = 'casper';
console.log(linkFoo.test); //輸出:'casper'

看完上面的描述,是不是有種恍然大悟的感覺?如果是的話,恭喜你,可能你跟我一樣其實還沒完全理解透徹。

簡單舉個例子,當調用Object.prototype.valueOf的對象為數值類型時,假設該對象是名稱為num,num很有可能通過下面兩種方式聲明:
復制代碼 代碼如下:
var num = 123; //通過對象字面量聲明console.log(typeof num); //輸出:'number'
var num = new Number(123); //通過構造方法聲明console.log(typeof num); //輸出:'object'

更多變態聲明方式,可參見《JS中不為人知的五種聲明Number的方式》

關於返回值的說明,ECMA5裡面原文如下

Create a new Number object whose [[PrimitiveValue]] internal property is set to the value of the argument. See 15.7 for a description of Number objects.
按照這段文字的說明,似乎num.valueOf()返回的應該是個Number對象(非字面量聲明的那種),但實際上:
復制代碼 代碼如下:
var num = 123;
var tmp = num.valueOf();
console.log(typeof tmp); //輸出: 'number'

這是怎麼回事呢?於是又仔細翻看了下,似乎有些接近真相了:
5.7.4.4 Number.prototype.valueOf ( )

Returns this Number value.

The valueOf function is not generic; it throws a TypeError exception if its this value is not a Number or a Number object. Therefore, it cannot be transferred to other kinds of objects for use as a method.
原來Number有屬於自身的原型valueOf方法,不是直接從Object.prototype上繼承下來,類似的,Boolean、String也有自己的原型valueOf方法,歸納如下:
類型     是否有屬於自己的原型valueOf方法 Undefined 無 Null 無 Number 有,Number.prototype.valueOf String 有,String.prototype.valueOf Boolean 有,Boolean.prototype.valueOf Object -此處之外,Array、Function並沒有自己的原型valueOf方法,見規范說明:

NOTE The Array prototype object does not have a valueOf property of its own; however, it inherits the valueOf property from the standard built-in Object prototype Object.
The Function prototype object does not have a valueOf property of its own; however, it inherits the valueOf property from the Object prototype Object.
補充說明:Number.prototype.valueOf的內部轉換規則比想的要略復雜些,此處不展開。

啰啰嗦嗦說了一大通,現在還有兩個問題存在疑惑

1.關於ToObject,當參數為Function對象時,返回對象作何處理似乎沒見到規范裡明確說明,當前僅靠實驗猜測(也有可能是我沒找到)
2.valueOf的使用場景,實際開發中尚未見到有兄弟用過
最後的最後:

文中示例如有錯漏,請指出;如覺得文章對您有用,可點擊“推薦” :)
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved