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

2019-11-20 22:59:21

字體：大中小

來源：轉載

供稿：網友

彭老濕近期月報里提到了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	-