JS中令人发指的valueOf方法介绍

彭老湿近期月报里提到了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的使用场景,实际开发中尚未见到有兄弟用过 最后的最后:
文中示例如有错漏,请指出;如觉得文章对您有用,可点击“推荐” :)

时间: 2024-10-17 03:13:47

JS中令人发指的valueOf方法介绍的相关文章

JS中setTimeout()的使用方法具体解释

1. SetTimeOut()              1.1 SetTimeOut()语法样例              1.2 用SetTimeOut()运行Function              1.3 SetTimeOut()语法样例              1.4 设定条件使SetTimeOut()停止              1.5 计分及秒的counter    2. ClearTimeout()    3.  Set Flag   10.1 setTimeout( )

60秒验证码倒计时js代码 js样式代码 方块上下左右随机移动(定时器) js中获取元素的方法 js中表单提交

60秒验证码倒计时js代码 <script type="text/javascript"> var countdown=60; function settime(val) { if (countdown == 0) { //removeAttribute() 方法删除指定的属性. disabled属性规定应该禁用 input 元素. val.removeAttribute("disabled"); val.value="免费获取验证码"

node.js中的url.parse方法使用说明

node.js中的url.parse方法使用说明 *方法说明:* 讲一个URL字符串转换成对象并返回 代码如下: url.parse(urlStr, [parseQueryString], [slashesDenoteHost]) 接收参数: urlStr                                       url字符串 parseQueryString                   为true时将使用查询模块分析查询字符串,默认为false slashesDeno

Javascript中String的valueOf方法

今天看了Javascript的基础教程,其中说了一个关于typeof的问题.typeof运算符的作用就是返回一个变量的类型,如果变量是一个数字,则返回number. 如果是字符串,则返回string, 布尔类型则返回boolean, 函数则返回function, 如果变量是null或者其他Javascript对象,就返回object. 未定义就返回undefined. 如果要判断变量存在,而且是一个字符串的话:给出的判断语句是: if( (typeof unknownVariable != "u

js中关于Blob对象的介绍与使用

blob对象介绍 一个 Blob对象表示一个不可变的, 原始数据的类似文件对象.Blob表示的数据不一定是一个JavaScript原生格式 blob对象本质上是js中的一个对象,里面可以储存大量的二进制编码格式的数据. 创建blob对象 创建blob对象本质上和创建一个其他对象的方式是一样的,都是使用Blob() 的构造函数来进行创建. 构造函数接受两个参数: 第一个参数为一个数据序列,可以是任意格式的值. 第二个参数是一个包含两个属性的对象{ type: MIME的类型, endings: 决

JS中常用的Math方法

1.min()和max()方法 Math.min()用于确定一组数值中的最小值.Math.max()用于确定一组数值中的最大值. alert(Math.min(2,4,3,6,3,8,0,1,3)); //最小值 alert(Math.max(4,7,8,3,1,9,6,0,3,2)); //最大值 2.舍入方法 Math.ceil()执行向上舍入,即它总是将数值向上舍入为最接近的整数: Math.floor()执行向下舍入,即它总是将数值向下舍入为最接近的整数: Math.round()执行标

js中object的申明方法

1 //js中的对象申明使用new Object(); 2 //object类型的数据类似于数组通过下表来访问其中的值 3 //example1 4 5 var person=new Object(); 6 person.name="张三"; 7 person.age="12"; 8 person.sex="男"; 9 10 for(var i in person){ 11 console.log(i+":"+person[i

JS中的对象和方法简单剖析

众所周知,在js中对象就是精髓,不理解对象就是不理解js. 那么什么事js中的对象呢? 在js中,几乎一切皆对象: Boolean ,String,Number可以是对象(或者说原生数据被认作对象): Dates ,Maths,Regexps,Arrays,Funcitons,当然Objects,这些都是对象: JS中,所有值,除了原生值,都是对象:这些原生值包括:strings,numbers('3.14'),true,false,null和undefined 对象是包含变量的变量,js变量可

js 中读取JSON的方法探讨

方法一:函数构造定义法返回 var strJSON = "{name:'json name'}";  //得到的JSONvar obj = new Function("return" + strJSON)()  ;//转换后的JSON对象alert(obj.name);   //json name 方法二:js中著名的eval函数   //ie8及以下 无法使用var strJSON = "{name:'json name'}";//得到的JSO