Javascript中valueOf与toString区别

Posted huaan011

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Javascript中valueOf与toString区别相关的知识,希望对你有一定的参考价值。

疑问:

  在JS的数据类型中有两个方法 Object.prototype.valueOf 和 Object.prototype.toString,在实例到这两个的区别是什么?

 我们进行如下的实例步骤:

案例1.

    var test={
                        age:20,
                        toString:function(){return this.age-10;},   //重写 toString()
                        valueOf:function(){return this.age+40;}    //重写 valueOf()
                  }    

运行如下代码:

            alert(test>20);//true 调用的是 valueOf
            alert(+test); //60 调用的是 valueOf
            alert(test); //10  调用的是 toString

结论:出现这种结果是由于test在自动的调用 valueOf 或者 toString 方法.

此时产生了新的疑问:什么情况下调用 valueOf,什么情况下调用  toString 呢?

继续看下面的案例:

案例2.

 var test={
                        age:20,
                        toString:function(){console.log(‘toString‘);return this.age-10;},   //重写 toString()
                        valueOf:function(){console.log(‘valueOf‘);return this.age+40;}    //重写 valueOf()
                  }    

运行如下代码:

       alert(test);// 10 toString
            alert(+test); // 60 valueOf
            alert(‘‘ + test); // 60 valueOf
            alert(String(test)); // 10 toString
            alert(Number(test)); // 60 valueOf
            alert(test == ‘10‘); // false valueOf
            alert(test === ‘10‘); // false

结论:转换成字符串时调用的是 toString,转换成数字时调用的是 valueOf,但是有两个例外:一个alert(‘‘ + test),已改调用 toString ,反而却调用的是  valueOf, 另外一个 alert(test === ‘10‘),===操作符不进行隐式转换,因此不调用它们。

 为了弄清楚两个例外,我们继续案例:

案例3:

var test = {
                age: 20,
                toString: function () { console.log(‘toString‘); return this.age - 10; }   //重写 toString()
            }

运行如下代码:

        alert(test);// 10 toString
            alert(+test); // 10 toString
            alert(‘‘ + test); // 10 toString
            alert(String(test)); // 10 toString
            alert(Number(test)); // 10 toString
            alert(test == ‘10‘); // true toString
            alert(test === ‘10‘); // false

 结论:只重写 toString 的时候,调用的是 toString.

案例4:

var test = {
                age: 20,
                valueOf: function () { console.log(‘valueOf‘); return this.age + 40; }    //重写 valueOf()
            }

运行如下代码:

       alert(test);// [object object]  --继承的是 Object.prototype.toString
            alert(+test); // 60 valueOf
            alert(‘‘ + test); // 60 valueOf
            alert(String(test)); // [object object] --Object.prototype.toString
            alert(Number(test)); // 60 valueOf
            alert(test == ‘10‘); // false valueOf
            alert(test === ‘10‘); // false

 结论:对于那个[object Object],我估计是从Object那里继承过来的,我们再去掉它看看。

案例5:

 Object.prototype.toString = null;
            var test = {
                age: 20,
                valueOf: function () { console.log(‘valueOf‘); return this.age + 40; }    //重写 valueOf()
            }
            alert(test);// 60 valueOf
            alert(+test); // 60 valueOf
            alert(‘‘ + test); // 60 valueOf
            alert(String(test)); // 60 valueOf
            alert(Number(test)); // 60 valueOf
            alert(test == ‘10‘); // false valueOf
            alert(test === ‘10‘); // false

案例6:

 var test = {
                age: 20
            }
            alert(test);// [object object]
            alert(+test); // NaN
            alert(‘‘ + test); // [object object]
            alert(String(test)); // [object object]
            alert(Number(test)); // NaN
            alert(test == ‘10‘); // false 
            alert(test === ‘10‘); // false

案例7:

Object.prototype.toString = null;
            var test = {
                age: 20
            }
            alert(test);//  Uncaught TypeError: Cannot convert object to primitive value
            alert(+test); // Uncaught TypeError: Cannot convert object to primitive value
            alert(‘‘ + test); // Uncaught TypeError: Cannot convert object to primitive value
            alert(String(test)); // Uncaught TypeError: Cannot convert object to primitive value
            alert(Number(test)); // Uncaught TypeError: Cannot convert object to primitive value
            alert(test == ‘10‘); // Uncaught TypeError: Cannot convert object to primitive value 
            alert(test === ‘10‘); //false Uncaught TypeError: Cannot convert object to primitive value

 

从上面所有的案例中总结:

1.valueOf应用于运算,toString应用于显示.

2.在进行对象转换成字符串时(例如:alert(test)),将优先调用 toString,如果没有 toString 方法了,就调用 valueOf方法,如果tostring 和 valueOf都没重写,就按照 Object的toString 方法输出.

3.在进行强转字符串类型时将优先调用toString方法,强转为数字时优先调用valueOf。

4.在有运算操作符的情况下,valueOf的优先级高于toString。

    

以上是关于Javascript中valueOf与toString区别的主要内容,如果未能解决你的问题,请参考以下文章

枚举ENUM的tostring() valueof()和values()用法

Javascript中valueOf与toString区别

Javascript中valueOf与toString区别

javascript中valueOf()方法的用法?

Javascript 语言环境字符串与 String.prototype.valueOf 的比较

toString与valueOf区别