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。

时间: 03-28

Javascript中valueOf与toString区别的相关文章

JavaScript中valueOf、toString的隐式调用

今天在群上有人问这样一个问题: 函数add可以实现连续的加法运算函数add语法如下add(num1)(num2)(num3)...;//注意这里是省略号哟,无限使用举例如下:add(10)(10)=20;add(10)(20)(50)=80;add(10)(20)(50)(100)=180;请用js代码实现函数add. 自个琢磨了一会只能Google之,代码如下: function add(num){ var sum=num, tmp=function(v){ sum+=v; return tm

JavaScript中valueOf函数与toString方法的使用

所有JS数据类型都拥有valueOf和toString这两个方法,null除外. JavaScript中valueOf函数方法是返回指定对象的原始值. 使用方法: object.valueOf( ). object是必选参数,是任意固有 JavaScrip对象. JavaScript 的 valueOf() 方法 valueOf() 方法可返回 Boolean 对象的原始值. 用法booleanObject.valueOf(),返回值为booleanObject 的原始布尔值.如果调用该方法的对

JavaScript中valueOf函数与toString方法

基本上,所有JS数据类型都拥有valueOf和toString这两个方法,null除外.它们俩解决javascript值运算与显示的问题,本文将详细介绍,有需要的朋友可以参考下 JavaScript中valueOf函数方法是返回指定对象的原始值.使用方法: object.valueOf( )object是必选项参数是任意固有 JScript 对象. 每个JavaScript固有对象的 valueOf 方法定义不同. 对象 返回值 Array 数组的元素被转换为字符串,这些字符串由逗号分隔,连接在

Simulate getter in JavaScript by valueOf and toString method

function Foo(a, b) { this.a = a; this.b = b; // simulate getter via valueOf and toString method this.sum = { valueOf: function () { return a + b }, toString: function () { return a + b } } } alert(new Foo(2, 3).sum); Simulate getter in JavaScript by

JavaScript中Object.prototype.toString方法的原理

在JavaScript中,想要判断某个对象值属于哪种内置类型,最靠谱的做法就是通过Object.prototype.toString方法. ? 1 2 var arr = []; console.log(Object.prototype.toString.call(arr)) //"[object Array]" 本文要讲的就是,toString方法是如何做到这一点的,原理是什么. ECMAScript 3 在ES3中,Object.prototype.toString方法的规范如下:

valueOf跟toString区别

1.用法如下:toString()方法:返回对象的字符串表示. 对象 操作 Array 将 Array 的元素转换为字符串.结果字符串由逗号分隔,且连接起来. Boolean 如果 Boolean 值是 true,则返回 “true”.否则,返回 “false”. Date 返回日期的文字表示法. Error 返回一个包含相关错误消息的字符串. Function 返回如下格式的字符串,其中 functionname 是被调用 toString 方法函数的名称: function function

JavaScript中typeof、toString、instanceof与constructor

JavaScript 是一种弱类型或者说动态语言.这意味着你不用提前声明变量的类型,在程序运行过程中,类型会被自动确定. 这也意味着你可以使用同一个变量保存不同类型的数据. 最新的 ECMAScript 标准定义了 7 种数据类型: 6种原始类型:Boolean.Null.Undefined.Number.String.Symbol (ECMAScript 6 新定义)和Object,除 Object 以外的所有类型都是不可变的(值本身无法被改变). 一.typeof typeof操作符返回一个

JavaScript中typeof、toString、instanceof、constructor与in

JavaScript 是一种弱类型或者说动态语言.这意味着你不用提前声明变量的类型,在程序运行过程中,类型会被自动确定. 这也意味着你可以使用同一个变量保存不同类型的数据. 最新的 ECMAScript 标准定义了 7 种数据类型: 7种内置类型:Boolean.Null.Undefined.Number.String.Symbol (ECMAScript 6 新定义)和Object,除 Object 以外的所有类型都是不可变的(值本身无法被改变). 一.typeof typeof操作符返回一个

javascript 中 undefined 和 null 区别

1.相同点 如果我们直接用 undefined == null  比较他们是相等的返回的将是 true. 2.区别 当我们用undefined === null 比较的时候最后返回的将是 false. A.undefined表示"缺少值",就是此处应该有一个值,但是还没有定义 (1)变量被声明了,但没有赋值时,就等于undefined. (2) 调用函数时,应该提供的参数没有提供,该参数等于undefined. (3)对象没有赋值的属性,该属性的值为undefined. (4)函数没有