关闭

JavaScript的toString()和valueOf()区别到底是什么

标签: javascript函数tostringvalueof
170人阅读 评论(0) 收藏 举报

很多人一直分不清到底是什么是tostring()和valueof(),更不知道他们之间有什么区别,下面我们就一起来探讨一下这两个函数。

从《JavaScript高级程序设计》这本书里面

var colors = ["red", "blue", "green"]; // 创建一个包含3 个字符串的数组  
alert(colors.toString()); // red,blue,green  
alert(colors.valueOf()); // red,blue,green  
alert(colors); // red,blue,green 

的这个例子,我们会有一个非常大的疑问
toString()和valueOf()区别到底是什么?

那么不如看下一个我写的例子

var arr = [1,2,3];  
alert(Array.isArray(arr.valueOf()));  
alert(Array.isArray(arr.toString()));  

猜猜结果是怎么样的?
结果是第一个是true而第二个是false

为什么呢,其实valueOf()调用完以后还是返回一个数组
这个数组被alert的时候会调用toString()函数
所以不是valueOf()和toString()函数相同,而是,根本就是间接的调用了toString()函数!

什么?你不信?
那好吧,我们来测试一下

var arr = [1,2,3];  
arr.toString = function () {  
    alert("你调用了toString函数");  
}  
alert(arr.valueOf());  

来来,猜猜结果。

结果就是我们会看到“你调用了toString函数”。

而对于数值,我们可以调用valueOf的时候直接可以获得数字进行计算,不必转化成字符串,所以不会调用toString
反言之,如果我们需要获得操作对象的字符串形式的时候就会调用其toString函数
举个例子
以下代码来自脚本之家的相关文章

var bbb = {  
 i: 10,  
 toString: function() {  
  console.log('toString');  
  return this.i;  
 },  
 valueOf: function() {  
  console.log('valueOf');  
  return this.i;  
 }  
}  
alert(bbb);// 10 toString  
alert(+bbb); // 10 valueOf  
alert(''+bbb); // 10 valueOf  
alert(String(bbb)); // 10 toString  
alert(Number(bbb)); // 10 valueOf  
alert(bbb == '10'); // true valueOf  
alert(bbb === '10'); // false  

他的文章讲的不是很清楚,为什么在我们重写了代码以后就会出现这样的情况

在这里我说一下我的理解
valueOf的意思是返回最适合该对象类型的原始值,而toString则是将在该对象类型的原始值以字符串形式返回。

第一个

alert(bbb);// 10 toString  

这里我们的alert函数需要是的字符串,所以获取的是字符串,而不是原始值,故而调用了toString
第二个

<span style="font-family: Arial, Helvetica, sans-serif;">alert(+bbb); // 10 valueOf</span>  

同理,alert要的是字符串不是原始值,其实是+bbb这个东西被调用了toString,而bbb被调用了valueOf
为了验证我们这样写

var a = {  
    i: 1,  
    valueOf: function () {  
        alert("你调用了a的valueOf函数");  
        return this.i;  
    },  
    toString: function () {  
        alert("你调用了a的toString函数");  
        return this.i;  
    }  
};  
var c = {  
    i: +a,  
    valueOf: function () {  
        alert("你调用了c的valueOf函数");  
        return this.i;  
    },  
    toString: function () {  
        alert("你调用了c的toString函数");  
        return this.i;  
    }  
};  
alert(c);  

其中让c=+a,那么即可知道结果,果然如此,调用了a的valueOf和c的toString

第三个

alert(''+bbb); // 10 valueOf  

同理,我们可以把上一段我写的程序里面的c:+a改成c:’’+a

第四个

alert(String(bbb)); // 10 toString  

String这个强制转换其实在其内部是调用了传入参数的toString函数……

第五个

alert(Number(bbb)); // 10 valueOf  

这个是有区别的,因为bbb的i属性是数值类型的,如果i为11111xxxxx这样的字符串,我们就可以看到调用了bbb的toString了
呐,代码例子

   var c = {  
    i: "11111xxxx",  
    valueOf: function () {  
        alert("你调用了c的valueOf函数");  
        return this.i;  
    },  
    toString: function () {  
        alert("你调用了c的toString函数");  
        return this.i;  
    }  
};  
alert(c);  

第六个

alert(bbb == '10'); // true valueOf  

这个里面的判等的顺序是,获取原始值,然后判断两边的原始值是否相等,所以调用valueOf

第七个也就是最后一个

alert(bbb === '10'); // false  

这个里面的判全等的第一个步骤是判断类型,因为类型都不一样了,所以后面什么都不会调用

讨论
另外,对于原文的这句话“ 在进行对象转换时(例如:alert(a)),将优先调用toString方法,如若没有重写toString将调用valueOf方法,如果两方法都不没有重写,但按Object的toString输出。”我不是很认同
原文例子

var aa = {   
 i: 10,   
 toString: function() {   
  console.log('toString');   
  return this.i;   
 }   
}   
alert(aa);// 10 toString   
alert(+aa); // 10 toString   
alert(''+aa); // 10 toString   
alert(String(aa)); // 10 toString   
alert(Number(aa)); // 10 toString   
alert(aa == '10'); // true toString   

我的观点有些不同,重写了的toString会被未重写的其prototype的valueOf隐式调用,而不是优先调用toString。虽然结果不同,但是其实没有优先级的变化。

var a = {  
        i: 1,  
        valueOf: function () {  
            alert("你调用了a的valueOf函数");  
            return Object.prototype.valueOf();  
        },  
        toString: function () {  
            alert("你调用了a的toString函数");  
            return this.i;  
        }  
    };  

    alert(+a);  
    alert(''+a);  

结果的确调用了a的toString和a的valueOf,而我们可以很轻易的从最初的原文例子看到,这两个alert是没有调用国toString的,那么我们即可证明重写了的toString会被未重写的其prototype的valueOf隐式调用。

另一个原文的例子

var bb = {   
 i: 10,   
 valueOf: function() {   
  console.log('valueOf');   
  return this.i;   
 }   
}  
alert(bb);// [object Object]   
alert(+bb); // 10 valueOf   
alert(''+bb); // 10 valueOf   
alert(String(bb)); // [object Object]   
alert(Number(bb)); // 10 valueOf   
alert(bb == '10'); // true valueOf   

而valueOf被重写以后,这个bb的对象没有toString,自然就会调用其prototype的toString,而那个toString的内容必然是

function toString() {  
    return '[object Object]';  
}  

,所以其实这个验证并没有什么意义。无论重写哪个函数最终的优先级都没变。

总结
所以那篇的结论并不是最根本的问题,最根本的问题是到底操作对象所处的环境是什么样的。
如果要求的是原始值那么就会调用valueOf,如果要求的是字符串那么就会调用toString。

2
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:47471次
    • 积分:794
    • 等级:
    • 排名:千里之外
    • 原创:31篇
    • 转载:4篇
    • 译文:0篇
    • 评论:11条
    文章分类
    最新评论