Javascript中valueOf与toString区别

Posted 2020-09-06 huaan011

疑问：

　　在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。