如果編程語言是一個(gè)大家庭，那么JavaScript無疑是那個(gè)有點(diǎn)怪異，但又讓所有人喜愛的“怪叔叔”——雖然大家都喜歡他，但似乎沒人能完全理解他。

你肯定聽過那些讓人啼笑皆非的故事，比如NaN竟然是個(gè)數(shù)字，或者JavaScript居然只用了10天就被開發(fā)出來（是真的?。?。但是，今天我們要深入挖掘一些更為深?yuàn)W的JavaScript冷知識(shí)——這些內(nèi)容即使是資深開發(fā)者也未必知道。

系好安全帶，讓我們一起探索這個(gè)充滿混亂與魅力的JavaScript世界吧！

1. +[] 其實(shí)是 0 —— JavaScript的“魔術(shù)數(shù)字”

假設(shè)你在做一個(gè)購物網(wǎng)站，客戶可以將商品加入購物車，每個(gè)商品都有一個(gè)價(jià)格。當(dāng)購物車為空時(shí)，你當(dāng)然希望它顯示出“0”元，而不是顯示空白。那該怎么做呢？JavaScript 給了你一個(gè)非常神奇的解決方案——+[]！

你可能會(huì)問：“空數(shù)組怎么變成數(shù)字0了？”其實(shí)，這就像你在餐廳里點(diǎn)了一道菜，服務(wù)員告訴你：‘這道菜是零元’，你看著菜單，確實(shí)什么都沒點(diǎn)，但系統(tǒng)卻自動(dòng)給你算了個(gè)0元賬單。

console.log(+[]); // 0
console.log(typeof +[]); // "number"

怎么回事呢？在JavaScript里，[] 是一個(gè)空數(shù)組，它本來并不是一個(gè)數(shù)字?？墒钱?dāng)你給它加一個(gè) + 符號(hào)，這個(gè)空數(shù)組會(huì)被迫變成一個(gè)字符串，空字符串 ""。然后，當(dāng)空字符串被轉(zhuǎn)換成數(shù)字時(shí)，它就變成了 0。就像購物車本來什么都沒放，但系統(tǒng)默默幫你計(jì)算了一個(gè)“空”賬單——0元。

這也許看起來很奇怪，但在實(shí)際的開發(fā)中，你可能會(huì)用這個(gè)技巧來進(jìn)行一些數(shù)值計(jì)算。比如，你在判斷一個(gè)數(shù)組是否為空時(shí)，可能會(huì)巧妙地用 +[] 來表示一個(gè)初始值 0，而不需要額外定義變量。就像在不看菜單的情況下，服務(wù)員已經(jīng)給你默默計(jì)算好了賬單。

2. void 運(yùn)算符的“秘密”

你可能見過 void 運(yùn)算符，很多人都知道它返回 undefined，但你知道嗎？這只是其中的一個(gè)方面，它背后其實(shí)有個(gè)不為人知的秘密。

比方說，你正在開發(fā)一個(gè)網(wǎng)站，需要在某個(gè)地方打印出“歡迎回來”，但又不希望這個(gè)打印操作返回任何值。正常情況下，console.log() 會(huì)打印出內(nèi)容，但它實(shí)際上會(huì)返回 undefined。這時(shí)候，如果你加上 void 運(yùn)算符，結(jié)果就變得更加神秘了。

void console.log("歡迎回來"); // 打印 "歡迎回來"，但是返回 undefined

那么，void 是怎么工作的呢？void 運(yùn)算符的作用是“評(píng)估一個(gè)表達(dá)式，但不返回其值”。換句話說，它執(zhí)行了 console.log("歡迎回來") 這個(gè)操作，讓它正常輸出，但卻不會(huì)返回任何值。看似毫無意義的 void 運(yùn)算符，其實(shí)在一些場景下非常有用，尤其是當(dāng)你不想讓某個(gè)操作的返回值影響其他操作時(shí)。

3. 函數(shù)也能擁有屬性

在 JavaScript 中，函數(shù)不僅僅是代碼塊，它們本質(zhì)上也是對(duì)象。這意味著，你可以像給普通對(duì)象添加屬性一樣，給函數(shù)也添加屬性。這聽起來是不是有點(diǎn)“魔幻”？

想象一下，你有一個(gè)簡單的函數(shù)，它的作用是打印“Hello”。在常規(guī)情況下，這個(gè)函數(shù)只會(huì)返回一個(gè)字符串：“Hello”。但如果你想賦予這個(gè)函數(shù)一些“個(gè)性”，也就是給它加上一些額外的屬性呢？JavaScript 允許你這么做！

function greet() {
  return "Hello";
}
greet.language = "English";
console.log(greet.language); // "English"

怎么回事？在上面的例子中，greet 是一個(gè)簡單的函數(shù)，但我們給它添加了一個(gè)名為 language 的屬性，值為 "English"。你可以看到，函數(shù) greet 不僅僅做它的本職工作（返回 "Hello"），還變得像一個(gè)對(duì)象一樣，承載了額外的信息。

這有什么用呢？你可以把它想象成給一個(gè)“工具”增加了“功能”。比如，你設(shè)計(jì)了一個(gè)非常實(shí)用的“智能助手”函數(shù)，它不僅能完成本職工作（比如計(jì)算、輸出等），你還可以給它增加一些額外的屬性，像“語言”、“版本號(hào)”等，用來記錄助手的詳細(xì)信息。

這種特性在實(shí)際開發(fā)中也非常有用，尤其是在一些需要對(duì)函數(shù)進(jìn)行動(dòng)態(tài)配置或擴(kuò)展的場景下。比如，你可能需要給某些函數(shù)標(biāo)記不同的功能，或者在調(diào)試時(shí)，添加一些用于記錄的元數(shù)據(jù)。這樣不僅使你的代碼更靈活，還能讓它看起來更“有趣”。

4. null 是個(gè)對(duì)象，它偏偏不喜歡你

在 JavaScript 中，有一個(gè)總是讓人抓狂的存在——null。它看起來不像對(duì)象，但偏偏系統(tǒng)把它當(dāng)成了對(duì)象。這聽起來就像是一個(gè)明明不是員工，卻拿到了公司員工卡的“客串角色”。來看看這段代碼：

console.log(typeof null); // "object"

為什么 null 是一個(gè)對(duì)象呢？這個(gè)問題的背后有著一段“歷史”故事。其實(shí)，早期 JavaScript 的類型系統(tǒng)并不完美，null 被錯(cuò)誤地標(biāo)記為對(duì)象。這種錯(cuò)誤一直沒有修復(fù)，因?yàn)槿绻薷牧诉@一點(diǎn)，整個(gè)互聯(lián)網(wǎng)的許多現(xiàn)有代碼都會(huì)因?yàn)檫@個(gè)不兼容的變化而崩潰。所以，盡管 null 看起來并不像一個(gè)真正的對(duì)象，我們?nèi)匀徊坏貌蝗淌苓@個(gè)奇怪的現(xiàn)象，直到今天。

為什么它會(huì)讓你感到困惑呢？可以把 null 想象成一個(gè)假的對(duì)象，盡管它并不具備對(duì)象的屬性和方法，但 JavaScript 系統(tǒng)卻偏偏把它當(dāng)成了對(duì)象。就好比你進(jìn)了一家公司，所有員工都穿著公司制服，而“null”雖然沒有做任何工作，但卻穿著制服被誤認(rèn)為是員工。

這也是 JavaScript 充滿“怪異”的一個(gè)典型例子，早期的設(shè)計(jì)決定了今天的我們不得不和它一起生活，盡管它有點(diǎn)讓人抓狂。

5. __proto__ 性能陷阱

在 JavaScript 中，每一個(gè)對(duì)象都有一個(gè)“隱藏的”屬性——__proto__，它指向?qū)ο蟮脑?。通過 __proto__，你可以查看和修改一個(gè)對(duì)象的原型鏈，但這里有個(gè)大問題：頻繁使用 __proto__ 會(huì)讓你的代碼變得非常慢！

現(xiàn)代的 JavaScript 引擎會(huì)優(yōu)化對(duì)象，當(dāng)它們的原型鏈不發(fā)生變化時(shí)，性能會(huì)變得更好。但是，一旦你開始修改對(duì)象的 __proto__，這種優(yōu)化就會(huì)迅速消失，就像調(diào)試時(shí)你的耐心一樣——一瞬間就沒有了。

看看下面這段代碼：

const obj = { a: 1 };
obj.__proto__ = { b: 2 }; // 現(xiàn)在你讓一切變慢了！

為什么這樣會(huì)影響性能呢？可以把 __proto__ 想象成一條“隱形的繩子”，它把每個(gè)對(duì)象和它的原型連接起來。當(dāng)你不去動(dòng)它時(shí)，JavaScript 引擎就能像高效的機(jī)器一樣執(zhí)行你的代碼?？墒?，一旦你開始用 __proto__ 來“拉扯”這條繩子，系統(tǒng)就需要重新計(jì)算和更新原型鏈，從而導(dǎo)致性能下降，程序執(zhí)行變慢。

這就好比你在企業(yè)中有一個(gè)高效的團(tuán)隊(duì)，每個(gè)人都按部就班地完成自己的工作，但如果你每天去干預(yù)他們，隨便換換角色、變換工作內(nèi)容，效率肯定會(huì)下降。同理，頻繁調(diào)整原型鏈，特別是通過 __proto__，會(huì)讓性能大打折扣。

解決方案是什么呢？如果你真的需要修改原型鏈，應(yīng)該使用 Object.setPrototypeOf，它是修改原型鏈的標(biāo)準(zhǔn)方法，而且性能上也比直接操作 __proto__ 更加高效。如果完全不需要改變?cè)玩?，最好就不要在運(yùn)行時(shí)去“干預(yù)”它。保持對(duì)象的穩(wěn)定性，性能自然也能得到保證。

6. 全局對(duì)象在“監(jiān)視”你

在瀏覽器中，window 是全局對(duì)象，而在 Node.js 中，它是 global?？墒牵诂F(xiàn)代的 JavaScript 模塊中？竟然沒有所謂的全局對(duì)象！

// 在瀏覽器中
console.log(window === globalThis); // true

// 在 Node.js 中
console.log(global === globalThis); // true

為什么會(huì)這樣呢？全局對(duì)象 window 和 global 看起來是那么熟悉，但它們其實(shí)只是在各自的環(huán)境中扮演了“主角”的角色。瀏覽器中的全局環(huán)境是由 window 提供的，而在 Node.js 中是 global。可是隨著現(xiàn)代 JavaScript 模塊化的出現(xiàn)，我們突然發(fā)現(xiàn)：在模塊中是沒有直接的全局對(duì)象的！每個(gè)模塊都擁有自己的作用域和獨(dú)立的上下文，不再像過去那樣可以隨時(shí)訪問全局環(huán)境。

于是，開發(fā)者們爭論了好久：在不同的環(huán)境中，究竟該如何統(tǒng)一訪問這個(gè)“全局對(duì)象”呢？

解決方案就是： globalThis。這是一個(gè)新出現(xiàn)的全局對(duì)象，它能在任何環(huán)境中都能訪問到，無論是瀏覽器、Node.js，還是其他 JavaScript 執(zhí)行環(huán)境，globalThis 都是全局對(duì)象的標(biāo)準(zhǔn)代表。

就像是你在不同的城市工作，常常會(huì)遇到不同的“老板”。在瀏覽器中，你的老板是 window，在 Node.js 中是 global，但是當(dāng)你進(jìn)入“跨國公司”后，終于有了一個(gè)統(tǒng)一的老板 globalThis，不管你身在何處，都能找到它。雖然它的名字聽起來有些“怪異”——globalThis，但它確實(shí)是跨環(huán)境的“萬能鑰匙”。

不過，這個(gè)萬能鑰匙其實(shí)還不太常用。大多數(shù)時(shí)候，我們還是習(xí)慣使用 window 或 global 來訪問全局對(duì)象，特別是在傳統(tǒng)的瀏覽器或 Node.js 中。盡管如此，globalThis 的出現(xiàn)無疑為跨平臺(tái)開發(fā)提供了便利，確保了代碼的兼容性。

7. 數(shù)字其實(shí)是“假”數(shù)字

你以為數(shù)字是數(shù)字，對(duì)吧？在 JavaScript 中，數(shù)字可不完全是“真實(shí)”的數(shù)字。它們是基于 IEEE 754 標(biāo)準(zhǔn)的浮動(dòng)小數(shù)點(diǎn)數(shù)。這個(gè)標(biāo)準(zhǔn)雖然很強(qiáng)大，但也導(dǎo)致了一些非常搞笑甚至“不可思議”的數(shù)學(xué)錯(cuò)誤。

比如，看看這段代碼：

console.log(0.1 + 0.2 === 0.3); // false
console.log(0.1 + 0.2); // 0.30000000000000004

為什么 0.1 + 0.2 并不等于 0.3？看起來簡單的數(shù)學(xué)運(yùn)算，結(jié)果居然是“假的”！這是因?yàn)?JavaScript 采用的是浮動(dòng)小數(shù)點(diǎn)數(shù)表示數(shù)字，而浮動(dòng)小數(shù)點(diǎn)數(shù)不能精確表示所有的十進(jìn)制小數(shù)。就像你在一塊金條上用尺子測量，尺子有限制，測出來的數(shù)據(jù)永遠(yuǎn)不可能完全準(zhǔn)確。尤其是當(dāng)數(shù)字需要被轉(zhuǎn)換或四舍五入時(shí)，就會(huì)出現(xiàn)像 0.30000000000000004 這樣的“誤差”。

可以把這個(gè)問題想象成你買了一瓶水，水瓶上標(biāo)明容量是 500 毫升，但實(shí)際上每次倒水時(shí)，總是多出一點(diǎn)點(diǎn)，怎么倒也倒不出精確的 500 毫升，最后可能會(huì)得到 499.999 毫升——這就是計(jì)算機(jī)世界中的“浮動(dòng)小數(shù)點(diǎn)誤差”。

為什么這對(duì)你很重要呢？如果你在做財(cái)務(wù)、賬單、科學(xué)計(jì)算等對(duì)精度要求非常高的工作時(shí)，可能會(huì)遇到很多這種“意外”錯(cuò)誤。你可能會(huì)發(fā)現(xiàn)，精確到小數(shù)點(diǎn)后幾位的計(jì)算總是跟你預(yù)期的不一樣。比如會(huì)出現(xiàn)以下這種情況：

let total = 0;
for (let i = 0; i < 10; i++) {
  total += 0.1;
}
console.log(total); // 0.9999999999999999 而不是 1

這就是為什么會(huì)計(jì)人員盡量避免使用 JavaScript 的原因——你可不想讓系統(tǒng)里的財(cái)務(wù)計(jì)算因?yàn)檫@樣的小數(shù)點(diǎn)誤差而出問題，對(duì)吧？

解決方案是什么呢？如果你需要進(jìn)行精確的數(shù)學(xué)運(yùn)算（比如金融應(yīng)用），你可以使用一些專門的庫（如 BigDecimal 或 Decimal.js），這些庫能幫助你處理高精度的數(shù)字運(yùn)算，避免這種浮動(dòng)小數(shù)點(diǎn)帶來的困擾。

8. 默認(rèn)參數(shù)有自己的作用域

有時(shí)候，JavaScript 會(huì)讓你感覺像在玩“潛伏的代碼游戲”。比如，默認(rèn)參數(shù)的作用域，聽起來似乎很簡單，但實(shí)際上它會(huì)給你帶來一些非常“出人意料”的行為。

來看看這段代碼：

function show(x = 5, y = x + 1) {
  const x = 10; // 錯(cuò)誤！x 已經(jīng)在參數(shù)作用域中定義了
  console.log(y);
}
show();

這段代碼出錯(cuò)的原因是什么？當(dāng)你定義函數(shù)的默認(rèn)參數(shù)時(shí)，這些參數(shù)會(huì)創(chuàng)建一個(gè)獨(dú)立的作用域。換句話說，函數(shù)內(nèi)部的默認(rèn)參數(shù)會(huì)形成一個(gè)“局部”作用域，而與函數(shù)主體的作用域完全分開。因此，盡管你在參數(shù)中已經(jīng)定義了 x（并給它賦值為 5），在函數(shù)內(nèi)部再定義 x 變量時(shí)，JavaScript 會(huì)認(rèn)為你是在重復(fù)定義這個(gè)變量，從而報(bào)錯(cuò)。

為什么會(huì)發(fā)生這種情況呢？可以把它想象成，你在一個(gè)小鎮(zhèn)上設(shè)立了兩個(gè)行政辦公室，一個(gè)負(fù)責(zé)管理全鎮(zhèn)的事務(wù)，另一個(gè)則只管理鎮(zhèn)里的某個(gè)特定區(qū)域。默認(rèn)參數(shù)就像是那個(gè)“區(qū)域管理辦公室”，它的管理區(qū)域與整個(gè)鎮(zhèn)的事務(wù)（即函數(shù)主體）是完全分開的。所以，當(dāng)你在“區(qū)域管理辦公室”內(nèi)設(shè)定了 x = 5 時(shí)，它和函數(shù)主體中的 x 并不共享同一個(gè)空間。如果你在鎮(zhèn)上的其他地方再定義一個(gè) x，自然就會(huì)沖突。

這個(gè)特性為什么值得注意呢？這個(gè)行為可能會(huì)讓你非常困惑，特別是在你想使用默認(rèn)參數(shù)和其他變量時(shí)。默認(rèn)參數(shù)的作用域是獨(dú)立的，這意味著在定義默認(rèn)值時(shí)，參數(shù)不會(huì)直接訪問函數(shù)內(nèi)部定義的變量，這可能會(huì)導(dǎo)致一些意外的錯(cuò)誤。

9. with 語句是個(gè)“時(shí)間膠囊”

在 JavaScript 中，有一個(gè)曾經(jīng)被廣泛使用的語句——with，但如今它已經(jīng)幾乎沒人用了。它不僅讓人困惑，還容易出錯(cuò)。with 語句可以擴(kuò)展一個(gè)代碼塊的作用域，使其包含一個(gè)對(duì)象的所有屬性。

看看這個(gè)例子：

const obj = { a: 1, b: 2 };
with (obj) {
  console.log(a); // 1
  console.log(b); // 2
}

with 語句到底做了什么？它把對(duì)象 obj 的屬性提升到了代碼塊內(nèi)部的作用域中。也就是說，在 with (obj) 內(nèi)，你可以像訪問普通變量一樣直接訪問對(duì)象 obj 的屬性。對(duì)于這段代碼，a 和 b 都是 obj 的屬性，但通過 with 語句，你無需通過 obj.a 或 obj.b 來訪問它們。

問題出在哪兒呢？雖然看起來 with 語句可以減少代碼的冗余，但它卻制造了很多問題，尤其是在調(diào)試和理解代碼時(shí)。因?yàn)?nbsp;with 會(huì)影響作用域鏈，造成一些不明確的情況，容易導(dǎo)致意外的錯(cuò)誤。例如，如果在 with 語句的代碼塊內(nèi)存在和對(duì)象屬性同名的局部變量，就會(huì)發(fā)生沖突，甚至導(dǎo)致代碼的執(zhí)行結(jié)果出乎意料。

這種模糊的作用域問題讓調(diào)試變得異常困難，就像你在迷霧中試圖找尋一條明確的道路。程序員可能會(huì)因?yàn)?nbsp;with 語句而花費(fèi)大量時(shí)間去排查問題。

為什么 with 語句現(xiàn)在幾乎沒人用呢？現(xiàn)代的 JavaScript 開發(fā)者幾乎避免使用 with，它在 ECMAScript 5 中被嚴(yán)格模式（strict mode）完全禁用。雖然它仍然存在于語言中，但因?yàn)樗菀滓l(fā)錯(cuò)誤并且不易調(diào)試，基本上已經(jīng)成為了過時(shí)的產(chǎn)物。

所以，如何避免 with 的困擾呢？最簡單的辦法就是不使用 with。你完全可以通過直接訪問對(duì)象屬性來實(shí)現(xiàn)相同的效果：

const obj = { a: 1, b: 2 };
console.log(obj.a); // 1
console.log(obj.b); // 2

這樣，不僅能避免 with 帶來的作用域混亂，也能讓你的代碼更易讀、易維護(hù)。

10. 注釋可能會(huì)讓你的代碼崩潰

在 JavaScript 中，注釋本來是用來幫助我們理解代碼的對(duì)吧？然而，JavaScript 竟然有一種奇怪的注釋方式，它來自 HTML，能讓你在瀏覽器中安心使用，但如果不小心，竟然會(huì)導(dǎo)致代碼崩潰！

看看這個(gè)代碼例子：

<!-- console.log("Hello"); // 在瀏覽器中正常工作 -->
console.log("Goodbye"); // 在 Node.js 中會(huì)報(bào)錯(cuò) SyntaxError！

怎么回事？在 HTML 中，我們常用 <!-- --> 來包裹注釋，但當(dāng)你把這段代碼放進(jìn) JavaScript 文件里時(shí)，<!-- 和 --> 看起來像是注釋標(biāo)記，但實(shí)際上，它們會(huì)被解釋成單行注釋的開始符號(hào)。更奇怪的是，這種“HTML 注釋”的方式在不同的環(huán)境下表現(xiàn)完全不同——在瀏覽器中，<!-- 被當(dāng)作一個(gè)普通的注釋處理，代碼不會(huì)出錯(cuò)；但在 Node.js 環(huán)境中，它卻會(huì)被當(dāng)成語法錯(cuò)誤，導(dǎo)致你的代碼崩潰。

為什么會(huì)出現(xiàn)這種情況？這種行為的根源其實(shí)在于歷史。早期，JavaScript 和 HTML 是混雜在一起的。在 HTML 中，我們用 <!-- 來表示注釋，而在 JavaScript 中，這種標(biāo)記被意外地當(dāng)作了合法的語法。這種兼容性問題在不同環(huán)境中表現(xiàn)出來的方式不同，導(dǎo)致開發(fā)者在不同平臺(tái)間使用 JavaScript 時(shí)，可能會(huì)遇到這些奇怪的陷阱。

這個(gè)問題會(huì)帶來什么麻煩？如果你在一個(gè) JavaScript 文件中不小心使用了 HTML 樣式的注釋（<!--），而這個(gè)代碼被加載到 Node.js 環(huán)境下，直接就會(huì)出現(xiàn) SyntaxError。而瀏覽器在遇到這類注釋時(shí)，卻不會(huì)出錯(cuò)。這會(huì)讓開發(fā)者在不同環(huán)境下調(diào)試時(shí)，浪費(fèi)很多時(shí)間去尋找“看不見”的錯(cuò)誤。

怎么避免這個(gè)問題呢？最簡單的解決辦法是，始終使用標(biāo)準(zhǔn)的 JavaScript 注釋方式：

• 單行注釋：// 這是單行注釋
• 多行注釋：/* 這是多行注釋 */

永遠(yuǎn)避免使用 HTML 樣式的注釋 <!-- -->，這樣能確保你的代碼在不同的執(zhí)行環(huán)境中都能正常工作。

// 正確的注釋方式
console.log("Hello");  // 這是一個(gè)正常的注釋

結(jié)束

JavaScript 就像你朋友圈里的那個(gè)“古靈精怪”的朋友，雖然有點(diǎn)混亂、復(fù)雜，但總能帶給你無窮的樂趣。即便你覺得自己已經(jīng)對(duì)它了如指掌，但它總有一些新奇的“怪癖”會(huì)在不經(jīng)意間讓你大吃一驚。

每當(dāng)你遇到一個(gè)自信滿滿的 JavaScript 專家時(shí)，不妨拋出這些“奇怪的事實(shí)”，看看他們的表情是不是瞬間凝固，眉頭微挑。你會(huì)發(fā)現(xiàn)，連老牌的開發(fā)者也有可能被這些“意外的驚喜”逗得啞口無言。

編程的世界總是充滿了挑戰(zhàn)與樂趣，而 JavaScript 就是那個(gè)永遠(yuǎn)讓你保持好奇心的“魔法盒子”。它有時(shí)讓你抓狂，但更多的時(shí)候，它卻讓你充滿成就感。繼續(xù)探索，繼續(xù)編碼吧！