phpvalueof技巧_趣味JavaScript 你真的搞懂了toString和valueOf这两个方法了吗

择要 我以为你大概率还是没搞明白toString和valueOf这两个方法到底有什么用! 很多人都没有说清楚! 我看不见得吧!

很多人见过toString和valueOf这两个方法，但便是不清楚这两个方法用来干嘛的,如何运行的,本日就给大家详细先容一下，但是在说之前，我们必须要对数据类型转换、面向工具、原型和原型链等知识点先须要回顾复习一下, 这样有助于更好的理解这两个方法!

首先稍稍有点JS根本的朋友肯定是知道，在JS中数据类型转换是分为逼迫转换和 隐式转换 两种办法!

逼迫类型转换 也称为显性类型转换,意思便是你能看到的一种数据类型转换的情形

隐式类型转换 也称为自动类型转换,意思便是你可能无法感知的情形下数据类型就被转换了

先来看看什么是逼迫类型转换

我们须要将值显式地转换为我们期望的数据类型!

这里我可以调用数据类型当中的toString()方法来完成对其他数据类型转换为String类型的操作

也就说对要被转换的数据类型调用toString()方法即可!

举个栗子

//定义一个数值类型的变量var num=100;//转换前console.log('转换[前]为:'+typeof num+'类型');//开始转换num=num.toString();//转换后console.log('转换[后]为:'+typeof num+'类型');

如图

这个案例很大略，快速的把一个数值类型逼迫转换为字符串类型 这没什么说的!

隐式数据类型转换又称为: 自动类型转换便是不须要人为逼迫进行数据的转换，而是JS会自动的将某种类型转换为须要的类型，以是该转换操浸染户是觉得不到的，因此又称为 隐式类型转换

但实在内部还是和逼迫类型转换一样，也是通过隐性的调用String()、Number()、Boolean()等函数来进行转换 ,不同的则是这种操作是由JS自己自动完成的!

以是从转换规则上说 隐式数据类型转换和 逼迫数据类型转换是一样的!

举个梨子

很多人不知道,实在alert方法会自动将任何要进行弹出打印的数据,都转换为字符串以进行显示, 很多人并不知道这一特点!

怎么你还不信？那么我们来测试测试看看!

举个栗子

你用alert打印数值、布尔值、还是字符串可能看不怎么出来，我们来打印一个函数试试看就知道了!

function test(){ return 1+1;}alert(test);

你看看打印结果是什么就明白了!

这里居然把函数体打印出来了，并且因此字符串的形式, 并且就测试以下代码看看,效果是不是一样的

function test(){ return 1+1;}console.log(test.toString()); //逼迫转换为字符串console.log(String(test)); //逼迫转换为字符串console.log(test+""); //快捷隐式转换为字符串

如图

看到了吧，这很好的证明了隐式类型转换，实在和逼迫类型转换的规则上实在是差不多的!

并且JS在算术运算表达式中，也会自动将运算数据进行number类型转换

举个大略的栗子:

alert("6"/ "2"); 输出结果为3

这里便是旁边两边的String类型的数据被自动转换成number类型,然后再进行算术运算得出结果!

关于面向工具这一块我以前也有说过，这里也大略提一嘴，

对付JS面向工具而言,你可以把任何一样东西都算尴尬刁难象,然后找出工具的属性和方法,通过这种工具办法的模块化来管理全体工具当中的数据,这便是面向工具编程 这个道理如果你学过C++、Java、PHP等措辞实在大致上都是举一反三的!

以是面向工具也是一种模块化编程的一种办法,而在我们给别人利用这个工具的时候，只须要让别人实例化这个工具，然后就可以访问工具中的属性和工具中的方法了

我们在平常的项目开拓中利用最频繁的也是自定义的工具!

例如

var obj={ _getUser:function (){ console.log('获取用户信息逻辑'); }, _ViewOrder:function () { console.log('查看订单'); }}console.log(obj);初探toString与valueOf方法

上面说了那么多，又跟toString与valueOf这两个方法有什么关系呢？

我们来看个梨子:

var obj={"user":"张三"};console.log(String(obj));console.log(obj+"");

以上会返回一个为[object Object]的结果!

如图

尤其刚刚打仗js的朋友这时候一定会想，咦.............这是个什么玩意东西呢?? 嘿嘿嘿

首先上面的代码中，我进行了把一个工具逼迫和隐式转换为字符串的行为，对吧!

可是呢,从JS设计的角度是不许可这样给工具进行处理的!

在此类运算的情形下，工具会被自动转换为原始值，然后对这些原始值进走运算，并得到运算结果（也是一个原始值）

于是呢工具到字符串的转换，当我们对期望一个字符串的工具实行操作时,这时候就非常关键啦，嘿嘿

js将考试测验探求toString和valueOf 方法,你也先别管这两个方法从哪里来的，我们先来看一下它的运行事理!

剖析

怎么样，是不是听着有些神叨叨、鬼道道、神批唠叨的觉得还没明白？ 没紧要 我们看下面的案例来理解!

实在呀很大略，你先记住, 对付字符串转换,会默认调用toString方法

并且默认情形下toString 方法会返回一个字符串[object Object]

刚刚上面我们不是看到了工具转字符串会返回出一个[object Object]的东西嘛,实在我们自己也能去定义它

例如

var obj={ "user":"张三", "toString":function () { console.log('1.实行了toString()方法'); return '[object Object]'; }}console.log(String(obj)); //逼迫把工具转换为字符串console.log(""+obj); //隐式把工具转换为字符串

如图

这就很明显确定了一件主要的事情，我们在给工具做字符串转换的时候，会默认调用这个toString方法

只是说这里我们重写了它一下， 并且如果考试测验能够返回出基本数据类型也便是(字符串、数值、布尔值)等等，则可以连续调用String()函数连续转换该值,终极返回出我们想要的结果对吧!

那么看下面的代码: 我就给它返回一个其他的基本数据类型看看，

var obj={ "user":"张三", "toString":function () { console.log('1.实行了toString()方法'); return 100; //从toString()方法中返回一个基本数据类型出去! }}console.log(String(obj));console.log(""+obj);

如图

这里工具被进行转换了两次，一次显示，一次隐式，但不管是显示还是隐式的转换，实在都一样

以是说，作为toString()方法便是在进行工具被进行字符串转换的时候，被自动调用，然后返回一个基本数据类型出来! 并且toString()方法必须要返回基本数据类型,才能够被String()函数连续进行字符串的转换, 至于要返回什么基本数据出来，这里由我们自己决定!

valueOf实在默认情形下返回的便是工具自身

那么问题来了,如果说toString()方法 返回出来的不是基本数据类型, 也便是说如果它返回出来的是一个工具, 会怎么样呢?

现在我见告你，则会连续调用valueOf()方法 如果返回基本数据类型的值,

按照我们上面代码的意思，则又可以连续用String()函数转换该值!

以是此时此刻，你可以把这个valueOf()方法加上去看看了!

代码如下

var obj={ "user":"张三", "toString":function () { console.log('1.实行了toString()方法'); return {}; }, "valueOf":function (){ console.log('2.实行了valueOf()方法'); return '实行结束'; }}console.log(String(obj));

代码剖析

此时,我为了让valueOf方法实行，在toString方法中故意返回一个工具, 那么valueOf方法自然会自动实行,末了返回出一个基本数据类型(标量类型)出来!

并且在这里我们也很好的知道了toString和valueOf两个方法实行的先后顺序!

总之你先记住: 对付字符串转换，优先调用 toString方法、然后再调用valueOf方法

如图

toString与valueOf方法的顺序问题

对付字符串转换，顺序很大略，也便是先实行toString再实行valueOf 这个上面已经说过了!

但是如果只是对付数学运算,那么则优先调用 valueOf 方法, 除非这个方法它不存在的情形下, 或者说是valueOf方法返回的也是一个工具类型,则调用toString方法

例如

var obj={ "user":"张三", "toString":function () { console.log('1.实行了toString()方法'); return {}; }, "valueOf":function (){ console.log('2.实行了valueOf()方法'); return " OK啦"; }}console.log(String(obj));console.log("------------------------------------------");console.log(100+obj);

结果如图

在工具进行算术运算的，时候valueOf方法会先实行,如果返回的是一个工具，那么再实行toString方法,让它去返回一个可正常被运算的基本数据类型!

var obj={ "user":"张三", "toString":function () { console.log('1.实行了toString()方法'); return 500; }, "valueOf":function (){ console.log('2.实行了valueOf()方法'); return {}; }}console.log(100+obj);

结果如图

把稳:如果toString方法和vlaueOf方法都返回工具类型，那么就可能会报错了

也便是说，如果都不能返回一个基本数据类型的值,

那么浏览器可能会抛出一个缺点信息Uncaught TypeError: Cannot convert object to primitive value 意思是: 未捕获的TypeError:无法将工具转换为字符串值

以是说很多新手朋友刚刚碰着的便是这个工具转字符串时候涌现的这些问题，不知道如何办理!

小结

工具转字符串中的:toString()与valueOf() 这两个方法 调用的顺序是先调用toString，不知足需求才会调用valueOf(),这里的需求是指toString方法必须返回基本的数据类型，也便是字符、数值、布尔值、undefined、null这些数据类型，也只有返回出这些数据类型之后String()函数才能正常实行字符串的转换

如果返回一个工具，就会剖断利用valueOf()方法来连续处理，而valueOf()方法返回的值也必须是那些基本数据类型，如果还是返回出一个工具数据类型，则终极会剖断无法进行转换!

总之: toString()方法已经返回了一个基本数据类型,就不会再调用valueOf()方法了,除非当toString()方法返回一个工具的时候，才会再次调用valueOf()方法 或者是工具进行了算术运算、工具转数值之类的操作，才会优先调用valueOf方法!

这里还说一点，这不只是工具转字符串，会启动这两个方法工具转数值，也会 大家可以自己去试试看实行顺序

以上我以为便是对toString与valueOf方法最基本的认知, 下面我来详细说一下，这两个方法存在于什么地方!

有些人肯定会问，这两个方法来自于哪里呢？别焦急，我们先来复习复习什么是原型工具

还记得我以前讲过的原型工具吗? 不记得也没紧要，我们来看回顾回顾!

当我们创建一个布局函数 或者 是一个普通函数的时候, 浏览器中的JS解析器都会向函数中添加一个属性名为prototype, 它就指向布局函数的原型工具

例如

function 函数名() { //this.prototype={} 相称于这样子}

你也可以理解为在 JS中布局函数或者普通函数都有一个分外的隐蔽属性 prototype,

这个prototype属性对应着一个工具, 而这个工具便是我们所谓的原型工具,并且这个原型工具是对应于相应的布局函数所创建的!

如图

从上图中可以看出，每一个布局函数/普通函数实在都对应着自己的一个原型工具

并且可以利用布局函数.prototype来进行访问, 现在想起来了吧!

接下来我们再来说说原型链,由于这里便是探求toString与valueOf方法的关键了!

原型链还记得吧! 以前我也说过，如果有不明白的，一定要翻看前面的文章哦! 嘿嘿嘿...

图片官网地址: http://www.mollypages.org/tutorials/js.mp

如图

这么大一张图，估计肯定吧你看得脑壳疼、精神精力萎顿、觉得身体被掏空的样子了吧,嘿嘿嘿!

关于原型链之前的文章中我说的很清楚，还没有明白的朋友赶紧去看看!

这里我紧张说一下toString和valueOf这两个方法存在于哪里!

把稳到图中的Object.prototype了吗？这两个方法就存在于Object的原型工具当中

你不信？让我们利用Chrome浏览器调试工具来看看吧, 你完备可以利用以下代码进行查看!

console.log(Object.prototype);

如图

以是toString()与valueOf() 这两个方法 默认情形下存在于Object()原型工具当中!

那么现在我们回过分 又来看看最开始我们在做数据类型转换时，逼迫转换调用toString()方法

代码

function test(a,b){ console.log("Hello world"); return true;}console.log(test.toString());

这里结合原型链就很好的解释了一点，Function工具从Object原型工具当中继续来的toString方法，以是可以这样子调用，绕了一圈,现在明白了吧!

结果

那么结果便是你所到的, 一个函数工具的 toString 方法会返回一个表示函数源代码的字符串, 个中包括 function关键字，形参列表，大括号，以及函数体中的内容,都因此字符串直接返回

并且普通实例工具也由于原型链的关系，继续了这两个方法,以是也可以进行调用!

说这么多，这两个方法到底有什么用呢？

实在这两个方法，我个人理解便是用来限定你在javascript中操为难刁难象或者函数的规则

举个栗子

当你把两个工具相加 obj1 + obj2，或者相减 obj1 - obj2，或者利用打印弹框 alert(obj) 打印时会发生什么？

这种操作到底合理吗？ 实在从JavaScript措辞设计的角度上来说, 这样是不许可运算符对函数或者工具进行这样的处理办法, 与其他的措辞不同，JavaScript本身是无法实现让工具进行加法或其他运算的!

由于你以为在JS中这样故意义吗？

例如

var user = {"username": "John"};function test(){}alert(user+test);console.log(user+test);

效果如下

以是说在此类运算的情形下，工具会被自动转换为基本数据类型，然后对这些基本数据类型进走运算，并得到运算结果,必须是一个基本数据类型, 以是说toString与valueOf方法便是用来干这事情的!

毕竟这是一个js内部主要的限定由于如果遇见类似于工具的运算结果不能是另一个工具,在JS中是无法实现这种操作的!

因此从技能上无法实现此类运算，以是在实际项目中不存在让js工具进行一些数学运算, 如果真创造有,常日是写错了!

从实质上讲toString与valueOf方法便是在以下几种这种场景才利用:

之前我说提到的隐式数据类型转换实质便是调用了valueOf或者toString方法, 又由于原型链的缘故那么在JS中,险些每一种类型的工具都有一个toString和valueOf这两个方法!

我们可以通过重写来测试则两个方法,在布局函数的原型中重写也可以，在实例工具中直接重写也是可以的!

如果真的遇见两个js工具要进行算术运算,那么代码如下:

var user1 = { "username": "张三", "age":30, toString:function (){ //alert(1); 测试实行顺序 return this.age; }, valueOf:function (){ //alert(2); 测试实行顺序 return user1; }}function Person(){ this.username="李四"; this.age=30;}Person.prototype.toString=function (){ return this.age;}Person.prototype.valueOf=function (){ return Person;}var user2= new Person();console.log("结果为:"+(""+user1));console.log("结果为:"+(1+user1));console.log("结果为:"+(user1+user2));

效果

为什么结果是这样呢？我们一个一个的来阐明一下:

console.log("结果为:"+(""+user1));

剖析

首先我们确定这是一个让工具做数学运算的表达式对吧, 是一个空字符串加上一个user1实例工具 那么此时此刻,根据我们之前说的toString和valueOf实行顺序，就会自动的先实行valueOf方法，但是它又返回的是工具,那就连续实行toString方法 末了toString方法返回出来的是一个基本数据类型，也就所谓的原始值 这样就可以进行表面的运算了, 相称于返回出的表达式就为"" + 30 末了得到的结果便是一个字符串30

console.log("结果为:"+(1+user1));

这里末了返回的结果为31 大致流程就跟上面的差不多，只是末了返回出来的结果30还加上了1而已, 末了结果就为数值类型31

console.log("结果为:"+(user1+user2));

这里我们大致可以判断出来是两个工具在实行加法运算，那么一定就会自动实行 两个工具中的valueOf方法，而这里我让valueOf返回的是一个工具，就会分别让让toString方法自动实行,以是返回出来的都是基本数据类型的年事属性值,末了相加而已，结果为数值60 大致流程便是这样!

小结

以是如果真要让工具进行这种运算，那么首先要实行的流程便是如下:

还有便是要把稳一下valueOf和toString的实行顺序

这里由于数算术运算须要得到一个原始值，那么考试测验调用valueOf()再调用toString()无论哪个存在,如果没有重写，则会调用Object中默认的valueOf或toString方法!

那么如果你真的明白了，那你猜猜下面这样做会输出什么？这就留给大家了, 很大略!

代码如下

let test= ()=>{}test.valueOf = () => { return 100}test.toString = () => { return '不准你连续这样干下去!'}console.log(+test);console.log(test2);console.log(test==100);console.log(test=="100");console.log(test==="100");末了

看完之后你该当对valueOf和toString有一个基本的认识了吧!

我们在ES6中valueOf和toString也可以利用Symbol.toPrimitive来代替，往后会详细给大家先容!

说出以下代码输出什么结果:

口试题1

var obj = { i: 1, valueOf: function () { return this.i+100; }, toString: function () { return this.i; }}var Person = { i: +obj, valueOf: function () { return this.i+200; }, toString: function () { return this.i; }}alert(Person);

口试题2

let a = {};let b = {};a.toString = function() { return 1;};b.valueOf = function() { return "1";};let sum = a + b;console.log(sum);

大家的支持便是我坚持的动力!

如果文章对你有帮助的话就请

点赞 ✍️评论 收藏

一键三连哦！

如果以上内容有任何缺点或者不准确的地方，欢迎不才面 留个言指出!

或者你有更好的想法，欢迎一起互换学习❤️