JS中令人髮指的valueOf方法介紹

來源:互聯網
上載者:User

彭老濕近期月報裡提到了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的使用情境,實際開發中尚未見到有兄弟用過
最後的最後:

文中樣本如有錯漏,請指出;如覺得文章對您有用,可點擊“推薦” :)

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.