彭老濕近期月報裡提到了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的使用場景,實際開發中尚未見到有兄弟用過
最後的最後:
文中示例如有錯漏,請指出;如覺得文章對您有用,可點擊“推薦” :)