有一天，突然在一个微信群有个群友发了张图片抛出了一道题，如图：
下面，我们先还原原题：
1 //下面代码什么时候会打印1？ 2 var a=?; 3 if(a==1&&a==2&&a==3){ 4 console.log(1); 5 }
说实话，我第一眼看到时居然理所当然地认为让a=true或者a=!0应该就可以了，但是代码世界的种种复杂变数让我不能轻易相信第一感觉，于是马上打开电脑，在chrome浏览器的控制台快速敲下以下代码：
【a=true时】
1 var a=true; 2 if(a==1&&a==2&&a==3){ 3 console.log("猜想正确："+a); 4 }else{ 5 console.log("猜想错误"); 6 }
【a=!0时】
1 var a=!0; 2 if(a==1&&a==2&&a==3){ 3 console.log("猜想正确："+a); 4 }else{ 5 console.log("猜想错误"); 6 }
然后打印结果让我意识到错误的同时也激发了深入探索的兴趣：既然猜想错误，那到底要怎么做才能实现呢？背后的原理又会是怎样的呢？带着疑问，然后打开了百度上CSDN的一篇博客文章开始看。
文章一开头就说是一道有趣的面试题：Excuse Me?!惊愕之余就仔细品读了共有4种主要方法。接下来我结合自己的理解尽力将4种方法的原理给解释一下，如有错误，请多多指正，谢谢各位~
【解法①：利用对象的类型装换】
1 var a={ 2 num:1, 3 toString:function(){ 4 return a.num++; 5 } 6 } 7 8 if(a==1&&a==2&&a==3){ 9 console.log("猜想正确!"); 10 }else{ 11 console.log("猜想错误！"); 12 }
目的达到了，其中的原理是什么呢？我们先看a==1&&a==2&&a==3，这是一个短路逻辑与运算符，这就表明只有左端条件为真能会继续往右端进行判断，否则立即整个判断像短路一样为假了，所以呢，a的第一个值必须是a==1为真之后才会进行第二步的a==2判断，由此推断a的值或者说是间接返回值（类型转换后的值）应该是可以自增长的！另外，这种a==1的判断，JavaScript中当遇到不同类型的值进行比较时，会根据类型转换规则试图将它们转为同一个类型再比较。比如 Object 类型与 Number 类型进行比较时，Object 类型会转换为 Number 类型。转换为时会尝试调用 Object.valueOf 和 Object.toString 来获取对应的数字基本类型。
在上述的代码中，逻辑转换先调用了valueOf方法，如果返回的还是对象，再接着调用toString()方法。每次比较都会先执行重写后的对象方法toString()，这个方法里先返回属性num的值再自增（区分：return a.num++表示先返回再自增，return ++a.num表示先自增再把结果返回）。知道了对象a的内部之后就能明白，执行a==1判断时，对象a调用toString()方法返回了属性num的值1，此时比较两个当然是相等的。与此类似，a==2和a==3一样成立。看到这里是否有豁然开朗的感觉捏？
【解法②：利用数组的取值和类型转换】
JavaScript里的数组真的是灵魂支柱，因为绝大多数的数据都在数组里操作，因此很多时候解决问题的巧妙思路也能从它着手。下面先上代码和运行结果：
1 var a=[1,2,3,4]; 2 a.join=a.shift; 3 if(a==1&&a==2&&a==3){ 4 console.log("猜想正确！"); 5 }else{ 6 console.log("猜想错误！"); 7 }
眨眼一看这个写法莫名其妙让人匪夷所思，当好好地理解了之后就霎时拍案叫绝，代码之简洁优雅，思路之清奇独到，堪称腻害！我们知道在JavaScript中一切皆对象，那么Array当然也是对象的子类了，同样继承了Object对象的方法valueOf()和toString()，而且重写了toString()方法，在调用数组中的每个元素的 toString() 返回值经调用 join() 方法连接（由逗号隔开）组成。所以在这里可以不重写toString()方法了，只需要对join()方法进行处理即可。那么join()方法作用扮演的是什么角色呢？没错，它用来将数组各项通过连接符拼接起来形成字符串，它不会改变原数组仅仅是取出元素连接起来。shift()方法是会将数组的第一个元素删除并返回被删除的元素，换言之就好像是直接将数组的第一个元素移出数组，因此它改变了原数组的结构和长度，但是自身不会创建新的数组。
让我们把目光聚焦到a.join=a.shift，这句话的意思是当数组调用toString()方法而间接调用join方法时，shift()方法替代了join方法，这样就相当于每次从a数组中截取第一个元素返回。所以当判断a==1时其实是从原数组截取了第一个元素的值返回后再判断，这样原数组就变成了[2,3]，接着a==2判断执行类似操作即可。怎么样，这个方法巧妙吧？有没有被惊讶到捏？
【解法③：理由Object对象的defineProperty()方法定义属性并重写getter()方法】
同样道理，Let's show the code to see see！
1 var num=1; 2 Object.defineProperty(window,'a',{ 3 get:function(){ 4 return num++; 5 } 6 }) 7 8 if(a==1&&a==2&&a==3){ 9 console.log("猜想正确！"); 10 }else{ 11 console.log("猜想错误！"); 12 }
可能有的人看到defineProperty()并不是很了解它的用处，我查了下MDN上的说法：Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
首先，JavaScript的运行环境通常主要分为两种：客户端（浏览器）和服务端（node），这两种环境下的全局对象管理所有的变量和函数，客户端是window，node是global，在本例以window为参考。此时通过defineProperty()给window对象定义了一个a属性，a属性的值由get()方法返回后再自增。因此，当判断a==1时，实际上是获取省略掉window对象前缀的a的值后再比较。这个defineProperty()方法应当直接在 Object 构造器对象上调用此方法，而不是在任意一个 Object 类型的实例上调用。
【小扩展：defineProperty()方法有两种给定义的属性赋值的方法：数据描述符和存取描述符(有set或get方法)】
【解法④：利用Unicode字符编码，这种方式没什么技术含量不必深究也不推荐，了解即可】
1 var aﾠ = 1; 2 var a = 2; 3 var ﾠa = 3; 4 if(aﾠ ==1 && a ==2 && ﾠa ==3){ 5 console.log("Let's see see！"); 6 }else{ 7 console.log("Don't want to see see，ok？！"); 8 }
【解法⑤：利用ES6的类来实现】
ES6是引入了类的比较规范的写法，我们可以在类的定义里做想做的事情，下面演示用传统函数和类分别实现：
1 //传统函数写法 2 //定义内部变量，重写valueOf并返回一个可以增长的变量值 3 function fnA(){ 4 var num=1; 5 this.valueOf=function(){ //只有对象的valueOf方法被调用时才执行 6 return num++; 7 } 8 } 9 10 //ES6的规范类写法 11 class clazzA{ 12 constructor(){ 13 this.num=0; //类被调用创建对象就会执行构造函数，该变量会自增 14 this.valueOf(); 15 } 16 valueOf(){ 17 return this.num++; 18 } 19 } 20 21 //let a=new fnA; //此时valueOf并不会被调用 22 let a=new clazzA; //构造函数调用了一次valueOf方法 23 if(a==1&&a==2&&a==3){ 24 console.log("实现了！"); 25 }else{ 26 console.log("what's wrong?"); 27 }
从上面的代码和打印结果看出，传统函数和ES6类都借助了Object自带的valueOf()方法，只是二者在处理时不一样：传统函数被调用时valueOf()并没有被立即调用，只是通过匿名函数的方式声明了函数，真正调用valueOf()还是在执行判断时隐式调用的；而ES6类则选择了再构造函数里直接调用在类里重写后的valueOf()方法。因此，两者在定义变量num的初始值时需要注意一下！
通过上述的探讨大体上就使用了5种解决方法，其中最简洁优雅巧妙的当属解法②数组对象方式，解法③方式属于修改对象属性，解法①和解法5的核心还是利用对象的内置方法valueOf()或toString()进行重写值返回，解法④就权当看看了解吧~
OK，本次探讨暂且到此为止，如有错漏，欢迎指正，谢谢~
版权所有，转载请注明出处！