当我第一次看到这一题目的时候,我是比较震惊的,分析了下很不合我们编程的常理,并认为不大可能,变量a要在同一情况下要同时等于1,2和3这三个值,这是天方夜谭吧,不亚于哥德巴赫1+1=1的猜想吧,不过一切皆有可能,出于好奇心,想了许久之后我还是决定尝试解决的办法。
我的思路来源于更早前遇到的另外一题相似的面试题:
// 设置一个函数输出一下的值
f(1) = 1;
f(1)(2) = 2;
f(1)(2)(3) = 6;
当时的解决办法是使用toString或者valueOf实现的,那我们先回顾下toString和valueOf方法,方便我们更深入去了解这类型的问题:
比如我们有一个对象,在不重写toString()方法和valueOf()方法的情况下,在 Node 或者浏览器输出的结果是这样的
class Person {
constructor() {
this.name = name;
}
}
const best = new Person("Kobe");
console.log(best); // log: Person {name: "Kobe"}
console.log(best.toString()); // log: [object Object]
console.log(best.valueOf()); // log: Person {name: "Kobe"}
console.log(best + "GiGi"); // log: [object Object]GiGi
best | Person |
best.toString() | [object Object] |
best.valueOf() | Person |
best + 'GiGi' | [object Object]GiGi |
从上面的输出我们可以观察到一个细节,toString()输出的是[object Object],而valueOf()输出的是Person对象本身,而当运算到best + 'GiGi'的时候竟然是输出了[object Object]GiGi,我们可以初步推断是对象调用的toString()方法得到的字符串进行计算的,难道是运算符+的鬼斧神工吗?
为了验证我们上一步的推断,我们稍微做一点改变,把 valueOf 方法进行一次复写:
class Person {
constructor(name) {
this.name = name;
}
// 复写 valueOf 方法
valueOf() {
return this.name;
}
}
best | Person |
best.toString() | [object Object] |
best.valueOf() | Person |
best + 'GiGi' | KobeGiGi |
这次跟上面只有一处产生了不一样的结果,那就是最后的best + 'GiGi'前后两次结果在复写了valueOf()方法之后发生了改变,从中我们可以看出来,对象的本质其实没有发生根本的改变,但是当它被用作直接运算的时候,它的值是从复写的valueOf()中获取的,并继续参与后续的运算。
当然不要忘了我们还有个toString()方法,所以我们也复写它,看看结果会不会也受影响:
class Person {
constructor(name) {
this.name = name;
}
valueOf() {
return this.name;
}
toString() {
return `Bye ${this.name}`;
}
}
best | Person |
best.toString() | Bye Kobe |
best.valueOf() | Kobe |
best + 'GiGi' | KobeGiGi |
我们发现 best + 'GiGi'还是没有发生任何改变,还是使用我们上一次复写valueOf()的结果
其实我们重写了valueOf方法,不是一定调用valueOf()的返回值进行计算的。而是valueOf返回的值是基本数据类型时才会按照此值进行计算,如果不是基本数据类型,则将使用toString()方法返回的值进行计算。
class Person {
constructor(name) {
this.name = name;
}
valueOf() {
return this.name;
}
toString() {
return `Bye ${this.name}`;
}
}
const best = new Person({ name: "Kobe" });
console.log(best); // log: Person name: {name: "Kobe"}
console.log(best.toString()); // log: Bye [object Object]
console.log(best.valueOf()); // log: Person {name: "Kobe"}
console.log(best + "GiGi"); // log: [object Object]10
best | Person |
best.toString() | Bye [object Object] |
best.valueOf() | {name: "Kobe"} |
best + 'GiGi' | Bye [object Object]GiGi |
看上面的例子,现在传入的name是一个对象new Person({ name: "Kobe" }),并不是基本数据类型,所以当执行加法运算的时候取toString()方法返回的值进行计算,当然如果没有valueOf()方法,就会去执行toString()方法。
所以铺垫了这么久,我们就要揭开答案,我们正是使用上面这些原理去解答这一题:
class A {
constructor(value) {
this.value = value;
}
toString() {
return this.value++;
}
}
const a = new A(1);
if (a == 1 && a == 2 && a == 3) {
console.log("Hi Eno!");
}
这里就比较简单,直接改写toString()方法,由于没有valueOf(),当他做运算判断a == 1的时候会执行toString()的结果。
class A {
constructor(value) {
this.value = value;
}
valueOf() {
return this.value++;
}
}
const a = new A(1);
if (a == 1 && a == 2 && a == 3) {
console.log("Hi Eno!");
}
当然,你也可以不使用toString,换成valueOf也行,效果也是一样的:
class A {
constructor(value) {
this.value = value;
}
valueOf() {
return this.value++;
}
}
const a = new A(1);
console.log(a);
if (a == 1 && a == 2 && a == 3) {
console.log("Hi Eno!");
}
所以,当一个对象在做运算的时候(比如加减乘除,判断相等)时候,往往会有valueOf()或者toString的调用问题,这个对象的变量背后通常隐藏着一个函数。
当然下面这题原理其实也是一样的,附上解法:
// 设置一个函数输出一下的值
f(1) = 1;
f(1)(2) = 2;
f(1)(2)(3) = 6;
function f() {
let args = [...arguments];
let add = function() {
args.push(...arguments);
return add;
};
add.toString = function() {
return args.reduce((a, b) => {
return a + b;
});
};
return add;
}
console.log(f(1)(2)(3)); // 6
当然还没有结束,这里还会有一些特别的解法,其实在使用对象的时候,如果对象是一个数组的话,那么上面的逻辑还是会成立,但此时的toString()会变成隐式调用join()方法,换句话说,对象中如果是数组,当你不重写其它的toString()方法,其默认实现就是调用数组的join()方法返回值作为toString()的返回值,所以这题又多了一个新的解法,就是在不复写toString()的前提下,复写join()方法,把它变成shift()方法,它能让数组的第一个元素从其中删除,并返回第一个元素的值。
class A extends Array {
join = this.shift;
}
const a = new A(1, 2, 3);
if (a == 1 && a == 2 && a == 3) {
console.log("Hi Eno!");
}
我们的探寻之路还没结束,细心的同学会发现我们题目是如何让(a===1&&a===2&&a===3)的值为 true,但是上面都是讨论宽松相等==的情况,在严格相等===的情况下,上面的结果会不同吗?
答案是不一样的,你们可以试试把刚才上面的宽松条件改成严格调试再试一次就知道结果了。
class A extends Array {
join = this.shift;
}
const a = new A(1, 2, 3);
// == 改成 === 后:
if (a === 1 && a === 2 && a === 3) {
console.log("Hi Eno!"); // Hi Eno!此时再也没出现过了
}
那么此时的情况又要怎么去解决呢?我们可以考虑一下使用Object.defineProperty来解决,这个因为vue而被众人熟知的方法,也是现在面试中一个老生常谈的知识点了,我们可以使用它来劫持a变量,当我们获取它的值得时候让它自增,那么问题就可以迎刃而解了:
var value = 1;
Object.defineProperty(window, "a", {
get() {
return this.value++;
}
});
if (a === 1 && a === 2 && a === 3) {
console.log("Hi Eno!");
}
上面我们就是劫持全局window上面的a,当a每一次做判断的时候都会触发get属性获取值,并且每一次获取值都会触发一次函数实行一次自增,判断三次就自增三次,所以最后会让公式成立。
当然这里还有其他方法,这里再举例一个,比如使用隐藏字符去做障眼法瞒过面试官的:
var aᅠ = 1;
var a = 2;
var ᅠa = 3;
if (aᅠ == 1 && a == 2 && ᅠa == 3) {
console.log("Hi Eno!");
}
上面这种解法的迷惑性很强,如果不细心会以为是三个一样的a,其实本质上是定义三个不一样的a值,a的前后都有隐藏的字符,所以调试的时候,请复制粘贴上面的代码调试,自己在Chrome手打的话可以用特殊手段让 a 后面放一个或者两个红点实现,并在回车的时候,调试工具会把这些痕迹给隐藏,从而瞒天过海,秀到一时半刻还没反应过来的面试官。
最后,祝愿大家在新的一年找到一份如意的工作,上面的代码在实际情况中基本是不会被运用到的,但是用来探索JS的无限可能是具有启发性的,也建议面试官不要使用这类面试题去难为面试者~
如果文章和笔记能带您一丝帮助或者启发,请不要吝啬你的赞和收藏,你的肯定是我前进的最大动力
附笔记链接,阅读往期更多优质文章可移步查看,喜欢的可以给我点赞鼓励哦:https://github.com/Wscats/CV/
很多童鞋可能年后有自己的一些计划,比如换份工作环境,比如对职业目标有了新的打算。当然面试这一关不得不过,大概又不可能系统性的复习,这里罗列一些 重点 面试的知识点和文章,
什么是webpack和grunt和gulp有什么不同?什么是bundle,什么是chunk,什么是module?什么是Loader?什么是Plugin?如何可以自动生成webpack配置?webpack-dev-server和http服务器如nginx有什么区别?
多问问应聘者高层次的知识点,如果能讲清楚这些概念,就说明即使应聘者没怎么接触过 JavaScript,也能够在短短几个星期之内就把语言细节和语法之类的东西弄清楚。
面试比棘手的技术问题要多,这篇文章整理了37个JavaScript基本面试问题和解答,这些仅仅是作为指导。希望对前端开发的你有所帮助!
React常见面试题:React中调用setState之后发生了什么事情?React中Element与Component的区别?优先选择使用ClassComponent而不是FunctionalComponent?React中的refs属性的作用是什么?React中keys的作用是什么?
题目大意为:JS 环境下,如何让 a == 1 && a == 2 && a == 3 这个表达式返回 true ?这道题目乍看之下似乎不太可能,因为在正常情况下,一个变量的值如果没有手动修改,在一个表达式中是不会变化的。
10道JavaScript题目:累加函数addNum、实现一个Person类、实现一个arrMerge 函数、实现一个toCamelStyle函数、setTimeout实现重复调用、实现一个bind函数、实现一个Utils模块、输出一个对象自身的属性
面试开场白总缺少不了自我介绍,一方面是面试官想听听你对自己的介绍,顺便有时间看看简历上的描述,是否与口述一致。另一方面就是看看你简历上做过什么项目,用到了哪些技术栈,一会儿好提问你。
把面试当做学习,这个过程你会收益很大。前端知识很杂,可能实际工作中用到的技术,像框架都是跟着公司的要求走的,像我最近也在看React啦,Vue和React都对比着再学习
vue上手可以说是比较轻松而且简单,如果你用过angular,react,你也会很喜欢vue。vue的核心思想依旧是:构建用户界面的渐进式框架,关注视图的变化。这也是为什么新建的文件是结构是template script style
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!