大厂面试题分享 面试题库

前端面试题库 （面试必备）   推荐：★★★★★

地址：前端面试题库

 

当我第一次看到这一题目的时候，我是比较震惊的，分析了下很不合我们编程的常理，并认为不大可能，变量a要在同一情况下要同时等于1，2和3这三个值，这是天方夜谭吧，不亚于哥德巴赫1+1=1的猜想吧，不过一切皆有可能，出于好奇心，想了许久之后我还是决定尝试解决的办法。

我的思路来源于更早前遇到的另外一题相似的面试题：

// 设置一个函数输出一下的值
f(1) = 1;
f(1)(2) = 3;
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]GiGi
复制代码

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) = 3;
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的无限可能是具有启发性的，也建议面试官不要使用这类面试题去难为面试者

 给大家推荐一个实用面试题库

1、前端面试题库 （面试必备）            推荐：★★★★★

地址：前端面试题库