(a ==1 && a== 2 && a==3) 有可能是 true 吗？

发表于

一个有趣的问题：

在 JavaScript 中， (a ==1 && a== 2 && a==3) 是否有可能为 true ？

这是一道我被某科技公司问到的面试题。发生在两周之前，我仍然在努力寻找答案。

我知道我们从来不会在日常工作中写出这样的代码，但我对问题的答案仍然十分很好奇。

解法一：

利用松散相等运算符 == 的工作原理，你可以简单地创建一个带有自定义toString( 或者 valueOf)函数的对象，在每一次使用它时候改变它所的返回值，使其满足所有三个条件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const a = {

i: 1,

toString: function () {

return a.i++;

  }

}

if(a == 1 && a == 2 && a == 3) {

console.log('Hello World!');

}

// Hello World!

之所以会得到如此结果，是由于表达式中使用了松散相等的运算符 ==。使用松散相等时，如果其中一个操作数与另一个类型不同，则 JS 引擎将尝试将一个操作转换为另一个类型。在左边对象、右边的数字的情况下，它会尝试将对象转换为一个数，首先通过调用 valueOf 如果是可调用的。否则，它会调用toString方法。我使用toString仅仅是因为它是我的第一反应，valueOf 会更合理。如果我不从toString返回一个字符串（而是返回数字），JS 引擎会尝试将字符串转换为一个数字，虽然有一个稍长的路径，但它仍然会给我们同样的结果。

解法二：

我不可否认——其他答案无疑是正确的，但你真的不能过错下面的代码：

1
2
3
4
5
6
7
8
9
10
11
var aﾠ = 1;

var a = 2;

var ﾠa = 3;

if(aﾠ==1 && a== 2 &&ﾠa==3) {

console.log("Why hello there!")

}

请注意if 语句中的奇怪间距。它是半宽度韩文=,=。这是一个 Unicode 空格字符，但是 ECMAScript 不将其解释为一个空格 —— 这意味着它是一个有效的标识符。因此有三个完全不同的变量，一个是a后加半宽度韩文，一个是a， 一个是a前加半宽度韩文。。。

用下划线 _ 替代半宽度韩文，增加可读性，相同的代码看起来像这样：

1
2
3
4
5
6
7
8
9
10
11
12

var a_ = 1;

var a = 2;

var _a = 3;

if(a_==1 && a== 2 &&_a==3) {

console.log("Why hello there!")

}

解法三：

这是完全可能的！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var val = 0;

Object.defineProperty(window, 'a', {

   get: function() {

        return ++val;

  }

});

if (a == 1 && a == 2 && a == 3) {

    console.log('yay');

}

使用一个get，让 a 的返回值为三个不同的值。然而这并不意味着我们应该在真正的代码中使用。。。

四种答案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
var a = {
    arr: [3, 2, 1],
    valueOf () {
        console.group('valueOf')
        console.log(this.arr)
        console.groupEnd('valueOf')
        return this.arr.pop()
    }
}
if (a == 1 && a == 2 && a == 3) {
    console.log('biu')
}

var b = {
    arr: [3, 2, 1],
    toString () {
        console.group('toString')
        console.log(this.arr)
        console.groupEnd('toString')
        return this.arr.pop()
    }
}
if (b == 1 && b == 2 && b == 3) {
    console.log('biu')
}

var c = {
    arr: [3, 2, 1],
    [Symbol.toPrimitive] () {
        console.group('Symbol.toPrimitive')
        console.log(this.arr)
        console.groupEnd('Symbol.toPrimitive')
        return this.arr.pop()
    }
}
if (c == 1 && c == 2 && c == 3) {
    console.log('biu')
}

var d = [1, 2, 3]
d.join = d.shift
if (d == 1 && d == 2 && d == 3) {
    console.log('biu')
}

类型转换时的劫持

首先我们要知道，在 JS 中类型转换只有三种情况，分别是：

  • 转换为布尔值
  • 转换为数字
  • 转换为字符串

转换为原始类型

对象在转换类型的时候，会执行原生方法ToPrimitive。

其算法如下：

  1. 如果已经是 原始类型，则返回当前值；
  2. 如果需要转 字符串 则先调用toSting方法，如果此时是 原始类型 则直接返回，否则再调用valueOf方法并返回结果；
  3. 如果不是 字符串，则先调用valueOf方法，如果此时是 原始类型 则直接返回，否则再调用toString方法并返回结果；
  4. 如果都没有 原始类型 返回，则抛出 TypeError类型错误。

当然，我们可以通过重写Symbol.toPrimitive来制定转换规则，此方法在转原始类型时调用优先级最高。

所以以此定义我们可以有以下四种答案：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
var a = {
    arr: [3, 2, 1],
    valueOf () {
        console.group('valueOf')
        console.log(this.arr)
        console.groupEnd('valueOf')
        returnthis.arr.pop()
    }
}
if (a == 1 && a == 2 && a == 3) {
    console.log('biu')
}

var b = {
    arr: [3, 2, 1],
    toString () {
        console.group('toString')
        console.log(this.arr)
        console.groupEnd('toString')
        returnthis.arr.pop()
    }
}
if (b == 1 && b == 2 && b == 3) {
    console.log('biu')
}

var c = {
    arr: [3, 2, 1],
    [Symbol.toPrimitive] () {
        console.group('Symbol.toPrimitive')
        console.log(this.arr)
        console.groupEnd('Symbol.toPrimitive')
        returnthis.arr.pop()
    }
}
if (c == 1 && c == 2 && c == 3) {
    console.log('biu')
}

var d = [1, 2, 3]
d.join = d.shift
if (d == 1 && d == 2 && d == 3) {
    console.log('biu')
}

事实上，这四种可以算是同一种。关于最后一种，我们可以来看看ECMA中的 Array.prototype.toString ( ) 定义：

  1. 定义 array 为 ToObject(this value)（原生方法，将当前数组转换成对象）；
  2. 定义 func 为 Get(array, 'join')（原生方法，在这一步调用 join 方法）；
  3. 如果 IsCallble(func) （原生方法，判断是否有内部可调用的函数）为 false，则 设置 func 原生函数 %ObjProto_toString%（原生函数，toString 的具体实现）；
  4. 返回 Call(func, array)。

2. 对 getter 的劫持

所谓的 getter 就是对象属性在进行查询时会被调用的方法 get，利用此函数也可以实现题目功能。

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
window.val = 0Object.defineProperty(window, 'd', {
    get () {
        return ++this.val
    }
})
if (d == 1 && d == 2 && d == 3) {
    console.log('biu')
}

const e = newProxy({}, {
  val: 1,
  get ()  {
    return() =>this.val++;
  }
});
if (e == 1 && e == 2 && e == 3) {
    console.log('biu')
}

3. 正则表达式

JS 中的 RegExp.prototype.exec() 作用是在一个指定字符串中执行一个搜索匹配，返回一个结果数组或 null。

当正则表达式使用 “g“ 标志时，可以多次执行 exec 方法来查找同一个字符串中的成功匹配。当你这样做时，查找将从正则表达式的 lastIndex 属性指定的位置开始。（test() 也会更新 lastIndex 属性）。

lastIndex 是正则表达式的一个可读可写的整型属性，用来指定下一次匹配的起始索引。只有正则表达式使用了表示全局检索的 “g“ 标志时，该属性才会起作用。

只有正则表达式使用了表示全局检索的 “g“ 标志时，该属性才会起作用。

综上所述，我们可以有方案如下：

var f = {
    reg: /\d/g,
    valueOf () {
        returnthis.reg.exec(123)[0]
    }
}
if (f == 1 && f == 2 && f == 3) {
    console.log('biu')
}