摘要：稍后我們?cè)僭敿?xì)剖析，接下來(lái)先看一個(gè)問(wèn)題。還內(nèi)建了一些在之前沒(méi)有暴露給開(kāi)發(fā)者的，它們代表了內(nèi)部語(yǔ)言行為。使用，可能有不少朋友一開(kāi)始就想到這種方式，簡(jiǎn)單貼一下閱讀更多

在 JavaScript 環(huán)境下，可以讓表達(dá)式 a == true && a == false 為 true 嗎？

就像下面這樣，可以在控制臺(tái)打印出 ’yeah":

// code here
if (a == true && a == false) {
    console.log("yeah");
}

JavaScript 是一門(mén)類型松散的語(yǔ)言，在使用 == 進(jìn)行比較時(shí)，倘若左右類型不一致，是會(huì)進(jìn)行類型裝換的。首先來(lái)了解一下寬松相等的概念，

先看看 ECMA 5.1 的規(guī)范，包含 toPrimitive:

If Type(x) is the same as Type(y), then

If Type(x) is Undefined, return true.

If Type(x) is Null, return true.

If Type(x) is Number, then

If x is NaN, return false.

If y is NaN, return false.

If x is the same Number value as y, return true.

If x is +0 and y is ?0, return true.

If x is ?0 and y is +0, return true.

Return false.

If Type(x) is String, then return true if x and y are exactly the same sequence of characters (same length and same characters in corresponding positions). Otherwise, return false.

If Type(x) is Boolean, return true if x and y are both true or both false. Otherwise, return false.

Return true if x and y refer to the same object. Otherwise, return false.

If x is null and y is undefined, return true.

If x is undefined and y is null, return true.

If Type(x) is Number and Type(y) is String, return the result of the comparison x == ToNumber(y).

If Type(x) is String and Type(y) is Number, return the result of the comparison ToNumber(x) == y.

If Type(x) is Boolean, return the result of the comparison ToNumber(x) == y.

If Type(y) is Boolean, return the result of the comparison x == ToNumber(y).

If Type(x) is either String or Number and Type(y) is Object, return the result of the comparison x == ToPrimitive(y).

If Type(x) is Object and Type(y) is either String or Number, return the result of the comparison ToPrimitive(x) == y.

Return false.

Table 10 — ToPrimitive Conversions

對(duì)于下述表達(dá)式：

x == y

類型相同，判斷的就是 x === y

類型不同

如果 x，y 其中一個(gè)是布爾值，將這個(gè)布爾值進(jìn)行 ToNumber 操作

如果 x，y 其中一個(gè)是字符串，將這個(gè)字符串進(jìn)行 ToNumber 操作

若果 x，y 一方為對(duì)象，將這個(gè)對(duì)象進(jìn)行 ToPrimitive 操作

至于 ToPrimitive，即求原始值，可以簡(jiǎn)單理解為進(jìn)行 valueOf() 和 toString() 操作。

稍后我們?cè)僭敿?xì)剖析，接下來(lái)先看一個(gè)問(wèn)題。

就像這樣：

// code here
if (x == !x) {
    console.log("yeah");
}

可能很多人會(huì)想到下面這個(gè)，畢竟我們也曾熱衷于各種奇技淫巧：

[] == ![] // true

但答案絕不僅僅局限于此，比如：

var x = new Boolean(false);


if (x == !x) {
    console.log("yeah");
}

理解這個(gè)問(wèn)題，基本上下面的這些例子都不是問(wèn)題了。

9 == "9"

9 == "9x"

9 == true

9 == undefined

9 == null

0 == undefined

0 == null

undefined == null

0 == false

"" == false

"1" == true

"9" == true

9 == [9]

"9" == [9]

"9" == [9, 4]

"9,4" == [9, 4]

[] == []

[] == ![]

![] == ![]

[] == {}

[] == !{}

{} == ![]

{} == {}

{} == !{}

9 == { toString() { return 9 }}

9 == { valueOf() { return 9 }}

9 == { a: 9 }

9 == {}

"[object Object]" == {}

在來(lái)看看什么是 ToPrimitive

貼個(gè)規(guī)范：8.12.8 [[DefaultValue]] (hint)

如果是 Date 求原始值，則 hint 是 String，其他均為 Number，即先調(diào)用 valueOf() 再調(diào)用 toString()。

如果 hint 為 Number，具體過(guò)程如下：

調(diào)用對(duì)象的 valueOf() 方法，如果值是原值則返回

否則，調(diào)用對(duì)象的 toString() 方法，如果值是原值則返回

否則，拋出 TypeError 錯(cuò)誤

// valueOf 和 toString 的調(diào)用順序
var a = {
    valueOf() {
        console.log("valueof")
        return []
    },
    toString() {
        console.log("toString")
        return {}
    }
}

a == 0
// valueof
// toString
// Uncaught TypeError: Cannot convert object to primitive value


// Date 類型先 toString，后 valueOf
var t = new Date("2018/04/01");
t.valueOf = function() {
    console.log("valueof")
    return []
}
t.toString = function() {
    console.log("toString")
    return {}
}
t == 0
// toString
// valueof
// Uncaught TypeError: Cannot convert object to primitive value

到目前為止，上面的都是 ES5 的規(guī)范，那么在 ES6 中，有什么變化呢

7.1.1ToPrimitive ( input [, PreferredType] )

在 ES6 中嗎，是可以自定義 @@toPrimitive 方法的，是 Well-Known Symbols(§6.1.5.1)中的一個(gè)。JavaScript 還內(nèi)建了一些在 ECMAScript 5 之前沒(méi)有暴露給開(kāi)發(fā)者的 symbol，它們代表了內(nèi)部語(yǔ)言行為。

// 沒(méi)有 Symbol.toPrimitive 屬性的對(duì)象
var obj1 = {};
console.log(+obj1); // NaN
console.log(`${obj1}`); // "[object Object]"
console.log(obj1 + ""); // "[object Object]"

// 擁有 Symbol.toPrimitive 屬性的對(duì)象
var obj2 = {
    [Symbol.toPrimitive](hint) {
        if (hint == "number") {
            return 10;
        }
        if (hint == "string") {
            return "hello";
        }
        return true;
    }
};
console.log(+obj2); // 10 -- hint is "number"
console.log(`${obj2}`); // "hello" -- hint is "string"
console.log(obj2 + ""); // "true" -- hint is "default"

有了上述鋪墊，答案就呼之欲出了

var a = {
    flag: false,
    toString() {
        return this.flag = !this.flag;
    }
}

或者使用 valueOf()：

var a = {
    flag: false,
    valueOf() {
        return this.flag = !this.flag;
    }
}

或者是直接改變 ToPrimitive 行為：

// 其實(shí)只需設(shè)置 default 即可
var a = {
    flag: false,
    [Symbol.toPrimitive](hint) {
        if (hint === "number") {
            return 10
        }
        if (hint === "string") {
            return "hello"
        }
        return this.flag = !this.flag
    }
}

但是，有沒(méi)有辦法是嚴(yán)格相等，即：

// code here
if (a === true && a === false) {
console.log("yeah");
}

答案是：有。

使用 defineProperty，可能有不少朋友一開(kāi)始就想到這種方式，簡(jiǎn)單貼一下：

let flag = false
Object.defineProperty(window, "a", {
    get() {
        return (flag = !flag)
    }
})

if (a === true && a === false) {
    console.log("yeah");
}

Can (a== 1 && a ==2 && a==3) ever evaluate to true?