资讯专栏INFORMATION COLUMN

关于javascript中的toString()和valueOf()

paulquei / 933人阅读

摘要:和是对象的两个方法,你在浏览器后台输入就可以看到了它们是其中的两个。先说一下两个东西的用途返回对象的字符串表示。返回对象的字符串数值或布尔值表示。如果是弹窗的话,直接调用方法。至于其他情况,待续

关于javascript中的toString()和valueOf()
我GitHub上的菜鸟仓库地址: 点击跳转查看其他相关文章
文章在我的博客上的地址: 点击跳转

        关于javascript中的toString()和valueOf()两种方法,其实早在开始读红宝书(JavaScript高级程序设计)的时候已经有点困惑了,怎么搞出来这两个这么相似的东西,重点是很多时候它们得到的结果都是一样的,虽然之后不了了之觉得对应用没什么大影响就不管了,直到现在开始写博客的时候才回头看看这个问题。

        好了,开始正文了。

        toString() 和 valueOf() 是对象的两个方法,你在浏览器后台输入Object.protototype就可以看到了它们是其中的两个。

        先说一下两个东西的用途:

        toString( ):返回对象的字符串表示。

        valueOf( ):返回对象的字符串、数值或布尔值表示。

        好了,写几个例子就明白返回结果了(undefined  和 null  的值就不举例了,因为它们都没有这两个方法,所以肯定会报错的):

//先看看toString()方法的结果
var a = 3;
var b = "3";
var c = true;
var d = {test:"123",example:123}
var e = function(){console.log("example");}
var f = ["test","example"];

a.toString();// "3"
b.toString();// "3"
c.toString();// "true"
d.toString();// "[object Object]"
e.toString();// "function (){console.log("example");}"
f.toString();// "test,example"
//再看看valueOf()方法的结果
var a = 3;
var b = "3";
var c = true;
var d = {test:"123",example:123}
var e = function(){console.log("example");}
var f = ["test","example"];

a.valueOf();// 3
b.valueOf();// "3"
c.valueOf();// true
d.valueOf();// {test:"123",example:123}
e.valueOf();// function(){console.log("example");}
f.valueOf();// ["test","example"]

        很清楚了,toString( )就是将其他东西用字符串表示,比较特殊的地方就是,表示对象的时候,变成"[object Object]",表示数组的时候,就变成数组内容以逗号连接的字符串,相当于Array.join(",")。 而valueOf( )就返回它自身了。

        至于迷惑的地方,就在于它们在什么时候被调用,举个例子:

var a = "3";
console.log(+a);// 3

        当然了,打印结果是数字3(不是字符串‘3’),因为一元加操作符接在字符串前面就将其转换为数字了(字符串转化为数字的一种方式,相当于Number( )方法),但是如果它应用在对象上,过程是怎样的呢,再举例子:

//例子一
var example = {test:"123"};
console.log(+example);// NaN

//例子二 同时改写 toString 和 valueOf 方法
var example = {
    toString:function(){
        return "23";
    },
    valueOf:function(){
        return "32";
    }
};
console.log(+example);// 32

//例子三 只改写 toString 方法
var example = {
    toString:function(){
        return "23";
    }
};
console.log(+example);// 23

        通过例子一和例子二的比较,我们可以知道,一元加操作符在操作对象的时候,会先调用对象的valueOf方法来转换,最后再用Number( )方法转换,而通过例子二和例子三的比较,我们可以知道,如果只改写了toString方法,对象则会调用toString方法,证明valueOf的优先级比toString高。上面例子是多带带对对象上使用一元加操作符,但是,如果是字符串加对象呢?

console.log("test"+{});   //"test[object Object]"

        这个很明显,对象和字符串相加,肯定转换为字符串啊,所以调用了对象的toString方法,变为[object Object]了。

        好了,如果是alert呢?

//例子一
var example = {test:"123"};
alert(example);// "[object Object]"

//例子二 同时改写 toString 和 valueOf 方法
var example = {
    toString:function(){
        return "23";
    },
    valueOf:function(){
        return "32";
    }
};
alert(example);// "23"

//例子三 只改写 valueOf 方法
var example = {
    valueOf:function(){
        return "32";
    }
};
alert(example);// "[object Object]"

        虽然上面结果我用双引号了,但是你知道弹窗不会将字符串的双引号表示出来的。通过上面几个例子,我们就知道了,alert它对待对象,就和字符串和对象相加一样,就是调用它的toString( )方法,和valueOf方法无关。

        好了,总结一下,一般用操作符多带带对对象进行转换的时候,如果对象存在valueOf或toString改写的话,就先调用改写的方法,valueOf更高级,如果没有被改写,则直接调用对象原型的valueOf方法。如果是弹窗的话,直接调用toString方法。至于其他情况,待续……

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/88342.html

相关文章

  • 关于Javascript中的valueOftoString

    摘要:中默认的方法返回字符串。的方法将返回一个具有可读性的日期时间字符串。函数的作用是返回该自身。其他一律返回对象本身。在有运算操作符的情况下,的优先级高于。 +{ a: 1, toString: function() { return 10 }, valueOf: function() { return 100 } } 以上引申出对象数据的转换的问题:所有对象继承了两个转换方法: toS...

    lvzishen 评论0 收藏0
  • 关于JavaScript函数柯里化问题探索

    摘要:函数柯里化关于函数柯里化的问题最初是在忍者秘籍中讲闭包的部分中看到的,相信很多同学见过这样一道和柯里化有关的面试题实现一个函数,使得如下断言能够能够通过简单说就是实现一个求值函数,能够将所有参数相加得出结果。方法返回一个表示该对象的字符串。 函数柯里化   关于函数柯里化的问题最初是在《JavaScript忍者秘籍》中讲闭包的部分中看到的,相信很多同学见过这样一道和柯里化有关的面试题:...

    vboy1010 评论0 收藏0
  • 掌握 Javascript 类型转换:从规则开始

    摘要:首先,为了掌握好类型转换,我们要理解一个重要的抽象操作为什么说这是个抽象操作呢因为这是内部才会使用的操作,我们不会显示调用到。基本规则中的类型转换总是返回基本类型值,如字符串数字和布尔值,不会返回对象和函数。 Javascript 里的类型转换是一个你永远绕不开的话题,不管你是在面试中还是工作写代码,总会碰到这类问题和各种的坑,所以不学好这个那是不行滴。关于类型转换我也看过不少的书和各...

    mikyou 评论0 收藏0
  • JavaScript类型:关于类型,有哪些你不知道的细节?

    摘要:通过拆箱转换,把对象编程基本类型,再从从基本类型转换成对应的或者。拆箱转换会尝试调用和来获得拆箱后的基本类型。 undefined和null   Undefined类型表示未定义,它的类型只有一个值为undefined。任何变量在赋值前都是undefined类型,值为undefined。但是JS中undefined是一个变量,并非是一个关键字,为了避免无意中的篡改,使用void 0来获...

    JessYanCoding 评论0 收藏0
  • JavaScript类型转换的迷糊事儿

    摘要:下面分几步来简单的探探不同类型的转换吧以下的内容,都可以从权威指南中找到。其他值转换成在编写代码的过程中,几乎不用考虑它的取值类型。核心内置类,会尝试先于可以理解为对象优先转换成数字例外的是,利用的是转换。 最近在写公司的登录注册模块,遇到类型不同相比较的时候,就心惊胆战,每次都要用浏览器来验证一下,决定乱七八糟的随便写一下,方便日后自己回顾知识~ 弱类型带来的那些让人迷糊的事 弱类型...

    harriszh 评论0 收藏0

发表评论

0条评论

paulquei

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<