JavaScript:(a==1 && a==2 && a==3)能

light 發(fā)布于2019-08-22 13:55 / 1706人閱讀

摘要：我們舉個(gè)例子我們可以對上述對象使用方法，他會(huì)返回一個(gè)對象。在我們的問題中會(huì)企圖將對象轉(zhuǎn)化成數(shù)字的類型，進(jìn)行比較。幸運(yùn)的是，在中有符號。當(dāng)我們每次調(diào)用的時(shí)候，他會(huì)將變量增加返回給我們。

如果你能確切的答出可以，那恭喜你，你可以繞道了

前言

有人會(huì)說，這個(gè)問題好奇葩，放在別的語言里，這要是能輸出true，估計(jì)是見鬼了，但是你別說，放在js中好真有可能。最近在一個(gè)人的推特上提了一個(gè)問題：

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

答案：yes

在這篇文章中，我將解釋這段代碼的原理：

const a = {
  num: 0,
  valueOf: function() {
    return this.num += 1
  }
};
const equality = (a==1 && a==2 && a==3);
console.log(equality); // true

你可以打開chorme瀏覽器，然后打開開發(fā)者模式，在console中輸入這段代碼，你就可以看到輸出結(jié)果([windows]: Ctrl + Shift + J [mac]: Cmd + Opt + J)

有什么竅門呢？

其實(shí)也沒有，能有的就是js中的兩個(gè)概念：

隱式轉(zhuǎn)換

object的valueOf函數(shù)

隱式轉(zhuǎn)換

注意：這題里面我們用的是==而不是===，在js中==代表的是等于而不是全等，那么就存在變量的隱式轉(zhuǎn)化問題。這就意味著結(jié)果會(huì)比我們所期望的更多的可能性。對于js的隱式轉(zhuǎn)化，真的有很多文章，我推薦一下以下幾篇博客，如果你想要了解，可以點(diǎn)進(jìn)去：

推薦博客

valueOf

JavaScript提供了一種將對象轉(zhuǎn)化為原始值的方法：Object.prototype.valueOf()，默認(rèn)情況下，返回正在被調(diào)用的對象。

我們舉個(gè)例子:

const a = {
  num: 0
}

我們可以對上述對象使用valueOf方法，他會(huì)返回一個(gè)對象。

a.valueOf();
// {num: 0}

是不是很酷，我們可以用typeOf來檢測一下這個(gè)輸出結(jié)果的類型：

typeof a.valueOf();
// "object"

為了讓valueOf可以更方便將一個(gè)對象轉(zhuǎn)化成原始值，我們可以重寫他，換種說法就是我們可以通過valueOf來返回一個(gè)字符串、數(shù)字、布爾值等來代替一個(gè)對象，我們可以看以下代碼：

a.valueOf = function() {
  return this.num;
}

我們已經(jīng)重寫了原生的valueOf()方法，當(dāng)我們調(diào)用valueOf的時(shí)候，他會(huì)返回a.num。那我們現(xiàn)在運(yùn)行以下：

a.valueOf();
// 0

我們得到0了，這很合理，因?yàn)?就是賦給a.num的值。那我們可以來做幾個(gè)測試：

typeof a.valueOf();
// "number"

a.num == a.valueOf()
// true

很好，但為什么這個(gè)很重要呢？

這很重要，因?yàn)楫?dāng)你兩種不同類型的遇到相等操作符的時(shí)候，js會(huì)對其進(jìn)行類型轉(zhuǎn)化——它企圖將操作數(shù)的類型轉(zhuǎn)化為類似的。

在我們的問題中：(a==1 && a==2 && a==3)JavaScript會(huì)企圖將對象轉(zhuǎn)化成數(shù)字的類型，進(jìn)行比較。當(dāng)要轉(zhuǎn)化的是一個(gè)Object的時(shí)候，JavaScript會(huì)調(diào)用valueOf()方法。

自從我們改變了valueOf()方法之后，我們能不能做到以下幾點(diǎn)呢：

a == 0

// true

我們做到了，異常輕松。

現(xiàn)在我們需要做的的一點(diǎn)是：當(dāng)我們每次去調(diào)用a的值的時(shí)候，能改變它。

幸運(yùn)的是，在JavaScript中有+=符號。

+=這個(gè)運(yùn)算符可以輕松的去改變一個(gè)的值，我們可以舉個(gè)簡單的例子:

let b = 1
console.log(b+=1); // 2
console.log(b+=1); // 3
console.log(b+=1); // 4

正如你所見的，我們每次使用加法賦值運(yùn)算符，可以讓我們的變量增加。

所以我們可以將這個(gè)觀念用到valueOf()中。

a.valueOf = function() {
  return this.num += 1;
}

當(dāng)我們每次調(diào)用valueOf的時(shí)候，他會(huì)將變量增加1返回給我們。

隨著這個(gè)改變，我們來運(yùn)行下面的代碼：

const equality = (a==1 && a==2 && a==3);
console.log(equality); // true

這就是它的工作原理。

記住下面兩點(diǎn):

使用相等操作符，js會(huì)做強(qiáng)制類型轉(zhuǎn)化

我們的對象每次調(diào)用valueOf()它的值會(huì)增加1

所以比較的時(shí)候我們每次都能得到true。

補(bǔ)充第二點(diǎn)的運(yùn)算過程

a                     == 1   -> 
a.valueOf()           == 1   -> 
a.num += 1            == 1   -> 
0     += 1            == 1   ->
1                     == 1   -> true
a                     == 2   -> 
a.valueOf()           == 2   -> 
a.num += 1            == 2   -> 
1     += 1            == 2   ->
2                     == 2   -> true
a                     == 3   -> 
a.valueOf()           == 3   -> 
a.num += 1            == 3   -> 
2     += 1            == 3   ->
3                     == 3   -> true

總結(jié)

謝謝你觀看這個(gè)小實(shí)驗(yàn)，希望你能從中學(xué)到東西，有興趣的朋友也可以去我的github點(diǎn)個(gè)star，你的支持是我持續(xù)輸出的動(dòng)力，謝謝！！！