JS中令人发指的valueOf方法

【菜科解读】
彭老湿近期月报里提到了valueOf方法,兴致来了翻了下ECMA5里关于valueOf方法的介绍,如下:
15.2.4.4 Object.prototype.valueOf ( )When thevalueOfmethod 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), thena. 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异常NumberNumber类型的对象,值等于objStringString类型的对象,值等于objBooleanBoolean类型的对象,值等于objObjectobj对象本身举几个具体的例子:
var num = 123;console.log(num.valueOf()); //输出:123console.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.valueOfString有,String.prototype.valueOfBoolean有,Boolean.prototype.valueOfObject-此处之外,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的内部转换规则比想的要略复杂些,此处不展开。
啰啰嗦嗦说了一大通,现在还有两个问题存在疑惑:
关于ToObject,当参数为Function对象时,返回对象作何处理似乎没见到规范里明确说明,当前仅靠实验猜测(也有可能是我没找到)
valueOf的使用场景,实际开发中尚未见到有兄弟用过
中,令人,发,指的,valueOf,方法,彭老湿,近期,如何在浏览器中调试less&sass
比如把一些功能函数抽出来,单独放一个文件。
页面一般都含有一些公共模块,把模块也可以抽离出来单独存放,等等。
很多同学都已经开始在项目使用less或sass,它们用起来确实是很爽,大大提高效率呀。
less & sass 都无法在浏览器中直接执行,需要变成CSS。
有时候想调试样式,我们看到的行号是css代码的行号,并不能直接对应到less&sass文件中,修改起来总是不方便。
看到less&sass这么受欢迎,热情的开发者们给firefox开发了一个插件FireSass,后来chrome也跟上了,开启一个实验性功能支持sass调试。
具体设置如下:编译时添加参数:sass开启debug-info选项:sass demo.sass demo.css –debug-infoless开启line-numbers:lessc demo.less demo.css –line-numbers=comments这样,编译后的css中将包含调试信息:浏览器设置:firefox执行安装FireSass即可。
chorme:地址栏打开chrome://flags/,启用开发者工具实验(DeveloperToolsexperiments.)。
重启浏览器后,打开开发者工具的设置选项卡,Experiments -> Support for sass 勾选。
最终调试效果: 如,何在,浏览器,中,调试,less,amp,sass,Sa
Javascript中的“作用域链”知识分享
名词解释活动对象:一次函数调用开始的时候,javascript解释器会收集函数体中的所有局部变量(以var形式声明的变量),将这些局部变量存储到一个称为“活动对象”的对象里,所有变量都初始为undefined。
代码示例1 var fun = function(){2 alert(name);3 var name = ‘段光伟‘;4 }当执行这个函数时候时(fun()),函数体还没执行到,当前的活动对象为[{ name: undefined }],因此fun()执行的结果为:函数的[scope]属性:每个函数在定义的时候(生成函数实例的时候)都会分配一个[scope]属性,这个属性指向的当前的“作用域链”。
这个属性开发人员是访问不到的,只有javascript能访问。
作用域链:当函数调用时,javascript引擎会维护一个这次调用的作用域链,这个作用域链条是函数的[scope]指向的作用域链加上函数调用时的活动对象,形式如[ 活动对象, 函数定义时的作用域链条]。
代码示例 1 var a = 1; 2 //步骤1:[ { a: 1, outer: undefined } ] 4 var outer = function(){ 5 //步骤3:[ { b: undefined, inner: undefined } ,{ a: 1, outer: function } ] 6 var b = 2; 7 var inner = function(){ 8 //步骤4:[ {}, { b: 2, inner: function } ,{ a: 1, outer: function } ] 9 return a + b;12 //步骤3:[ { b: 2, inner: function } ,{ a: 1, outer: function } ]13 return inner();16 //步骤2:[ { a: 1, outer: function } ]17 outer();作用域链规则规则1javascript一般运行在一定的宿主中,每个宿主都会提供一个“全局对象”,或者叫“全局活动对象”,这个全局对象是所有作用域链的根节点。
规则2“取值操作”(如:alert(xxxVar))的规则是,沿着作用域链依次查找名称为“xxxVar”的变量,返回第一个找到的值,如果找不到就抛出异常(ReferenceError: xxxVar is not defined)。
规则3“赋值操作”(如:xxxVar = ‘段光伟‘)的规则是,沿着作用域链依次查找名称为“xxxVar”的变量,覆盖第一个找到的值,如果找不到就将“xxxVar”添加到全局对象中。
备注“闭包”这个概念就是通过“作用域链”实现的,而C#是通过编译器实现的,.NET并不支持。
Javascript,中的,“,作用域链,”,知识,分享,代