從一道毫無人性的刁鉆面試題說起
問題：在 JavaScript 中，你可以不用英文字母與數(shù)字，就執(zhí)行 console.log(1) 嗎?
換句話說，就在于代碼中不能出現(xiàn)任何英文字母(a-zA-Z)與數(shù)字(0-9)，除此之外(各種符號)都可以。執(zhí)行式碼之后，會執(zhí)行 console.log(1)，然后在控制臺中輸出 1。
如果你想到可以用什么庫或服務(wù)之類的東西做到，別急著說出答案。先自己想一下，看看有沒有辦法自己寫出來。如果能從零開始自己寫出來，就代表你對 js 這個語言以及各種自動類型轉(zhuǎn)換應(yīng)該是很熟悉的。
分析幾個關(guān)鍵點
要能成功執(zhí)行題目所要求的的 console.log(1)，必須要完成幾個關(guān)鍵點：
- 找出執(zhí)行代碼的方法
- 如何不用字母與數(shù)字得出數(shù)字的方法
- 如何不用字母與數(shù)字得到字母的方法
只要這三點都解決了，就能達成題目的要求。
先解決第一點：找出執(zhí)行代碼的方法
找出執(zhí)行代碼的方法
直接 console.log 是不可能的，因為就算你用字符串拼出 console，你也沒辦法像 PHP 那樣拿字符串來執(zhí)行函數(shù)。
那 eval 呢?evali 里面可以放字符串，可以是就可以。問題是我們也沒法使用 eval，因為不能用英文字母。
還有什么方法呢?還可以用 function constructor：new Function("console.log(1)") 來執(zhí)行，但問題是我們也不能用 new 這個關(guān)鍵字，所以乍一看也不行，不過不需要 new 也可以，只用 Function("console.log(1)") 就可以創(chuàng)建一個能夠執(zhí)行特定代碼的函數(shù)。
所以接下來的問題就變成了怎樣才能拿到 function constructor，只要能拿到就有機會。
在 JS 中可以用 .Constructor 拿到某個對象的構(gòu)造函數(shù)，例如 "".constructor 就會得到：ƒ String() { [native code] }，如果你有一個函數(shù)，就能拿到 function constructor，像這樣：(()=>{}).constructor，在這個問題中我們不能直接用 .constructor，應(yīng)該用：(()=>{})['constructor']。
如果不支持 ES6 ，不能用箭頭函數(shù)怎么辦，還有辦法得到一個函數(shù)嗎?
有，而且很容易，就是各種內(nèi)置函數(shù)，例如說 []['fill']['constructor']，其實就是 [].fill.constructor，或者是 ""['slice']['constructor']，也可以拿到 function constructor，所以這不是個問題，就算沒有箭頭函數(shù)也沒關(guān)系。
一開始我們期望的代碼是這樣：Function('console.log(1)')()，用前面的方法改寫的話，應(yīng)該把前面的 Function 替換成 (()=>{})['constructor']，變成 (()=>{})['constructor']('console.log(1)')()只要想辦法拼湊出這段代碼問題就解決了。現(xiàn)在我們解決了第一個問題：找到執(zhí)行函數(shù)的方法。
如何得到數(shù)字
接下來的數(shù)字就比較簡單了。
這里的關(guān)鍵在與 js 的強制多態(tài)，如果你有看過 js 類型轉(zhuǎn)換的文章，或許會記得 {} + [] 可以得出 0 這個數(shù)字。
假設(shè)你不知道這個，我來解釋一下：利用 ! 這個運算符，可以得到 false，例如 1[]或者 !{} 都可以得出 false。然后兩個 false 相加就可得到 0：![] + ![] ，以此類推，既然 ![] 是 false，那前面再加一個 !，!![] 就是 true，所以 ![] + !![] 就等于 false + true，也就是 0 + 1，結(jié)果就是 1。
或者用更簡短的方法，用來 +[] 也可以利用自動類型轉(zhuǎn)換得到 0 這個結(jié)果，那么 +!![] 就是 1。
有了 1 之后，就可以得到所有數(shù)字了，只要一直不斷暴力相加就行了，如果不想這樣做，也可以利用位運算 << >> 或者是乘號，比如說要湊出 8，就是 1 << 3，或者是 2 << 2，要湊出 2 就是(+!![])+(+!![])，所以 (+!![])+(+!![]) << (+!![])+(+!![]) 就是 8，只需要四個 1 就行了，不需要自己加 8 次。
不過現(xiàn)在可以先不考慮長度，只需要考慮能不能湊出來就行了，只要能得出 1 就足夠了。
如何得到字符串
最后就是要想辦法湊出字符串了，或者說要得到 (()=>{})['constructor']('console.log(1)')() 中的每一個字符。
怎樣才能得到字符呢?答案是和數(shù)字一樣，即強制多態(tài)。
上面說過 ![] 可以得到 false，那在后面加一個空字符串：![] + ''，不就可以得到 "false" 了嗎?這樣就可以拿到 a, e, f, l, s 這五個字符。例如 (![] + '')[1]就是 a，為了方便紀錄，我們來寫一小段代碼：
- const mapping = {
- a: "(![] + '')[1]",
- e: "(![] + '')[4]",
- f: "(![] + '')[0]",
- l: "(![] + '')[2]",
- s: "(![] + '')[3]",
- }
那既然有了false，那么拿到 true 也不是什么難事了，!![] + '' 可以得到 true，現(xiàn)在把代碼改成：
- const mapping = {
- a: "(![] + '')[1]",
- e: "(![] + '')[4]",
- f: "(![] + '')[0]",
- l: "(![] + '')[2]",
- r: "(!![] + '')[1]",
- s: "(![] + '')[3]",
- t: "(!![] + '')[0]",
- u: "(!![] + '')[2]",
- }
然后再用同樣的方法，用 ''+{} 可以得到 "[object Object]"(或是你要用神奇的 []+{} 也行)，現(xiàn)在代碼可以更新成這樣：
- const mapping = {
- a: "(![] + '')[1]",
- b: "(''+{})[2]",
- c: "(''+{})[5]",
- e: "(![] + '')[4]",
- f: "(![] + '')[0]",
- j: "(''+{})[3]",
- l: "(![] + '')[2]",
- o: "(''+{})[1]",
- r: "(!![] + '')[1]",
- s: "(![] + '')[3]",
- t: "(!![] + '')[0]",
- u: "(!![] + '')[2]",
- }
從數(shù)組或是對象取一個不存在的屬性會返回 undefined，再把 undefined 加上字串，就可以拿到字串的 undefined，就像這樣：[][{}]+''，可以得到 undefined。
拿到之后，我們的轉(zhuǎn)換表就變得更加完整了：
- const mapping = {
- a: "(![] + '')[1]",
- b: "(''+{})[2]",
- c: "(''+{})[5]",
- d: "([][{}]+'')[2]",
- e: "(![] + '')[4]",
- f: "(![] + '')[0]",
- i: "([][{}]+'')[5]",
- j: "(''+{})[3]",
- l: "(![] + '')[2]",
- n: "([][{}]+'')[1]",
- o: "(''+{})[1]",
- r: "(!![] + '')[1]",
- s: "(![] + '')[3]",
- t: "(!![] + '')[0]",
- u: "(!![] + '')[2]",
- }
看一下轉(zhuǎn)換表，再看看我們的目標字符串：(()=>{})['constructor']('console["log"](1)')()，稍微比對一下，就會發(fā)現(xiàn)要湊出 constructor 是沒有問題的，要湊出 console 也是沒問題的，可是就唯獨缺了 log 的 g，目前我們的轉(zhuǎn)換表里面沒有這個字符。
所以還需要從某個地方把 g 拿出來，才能拼湊出我們想要的字符串。或者也可以換個方法，用其他方式拿到字符。
我一開始想到兩個方法，第一個是利用進制轉(zhuǎn)換，把數(shù)字用 toString 轉(zhuǎn)成字符串時可以帶一個參數(shù) radix，代表這個數(shù)字要轉(zhuǎn)換成多少進制，像是 (10).toString(16) 就會得到 a，因為 10 進制的 10 就是 16 進制的 a。
英文字母一共 26 個，數(shù)字有 10 個，所以只要用 (10).toString(36) 就能得到 a，用 (16).toString(36) 就可以得到 g 了，可以用這個方法得到所有的英文字母。可是問題來了， toString 本身也有 g，但現(xiàn)在我們沒有，所以這方法行不通。
另一個方法是用 base64，JS 有兩個內(nèi)置函數(shù)：btoa 跟 atob，btoa 是把一個字符串編碼為 base64，例如 btoa('abc') 會得到 YWJj，然后再用 atob('YWJj') 解碼就會得到 abc。
只要想辦法讓 base64 編碼后的結(jié)果有 g 就行了，可以寫代碼去跑，也可以自己慢慢試，幸運的是 btoa(2) 能得到 Mg== 這個字符串。所以 btoa(2)[1] 的結(jié)果就是 g了。
不過下一個問題又來了，怎樣執(zhí)行 btoa?一樣只能通過上面的 function constructor：(()=>{})['constructor']('return btoa(2)[1]')()，這次每一個字符都湊得出來。
可以結(jié)合上面的 mapping，寫一小段簡單的代碼來幫助做轉(zhuǎn)換，目標是把一個字符串轉(zhuǎn)成沒有字符的形式：
- const mapping = {
- a: "(![] + '')[1]",
- b: "(''+{})[2]",
- c: "(''+{})[5]",
- d: "([][{}]+'')[2]",
- e: "(![] + '')[4]",
- f: "(![] + '')[0]",
- i: "([][{}]+'')[5]",
- j: "(''+{})[3]",
- l: "(![] + '')[2]",
- n: "([][{}]+'')[1]",
- o: "(''+{})[1]",
- r: "(!![] + '')[1]",
- s: "(![] + '')[3]",
- t: "(!![] + '')[0]",
- u: "(!![] + '')[2]",
- }
- const one = '(+!![])'
- const zero = '(+[])'
- function transformString(input) {
- return input.split('').map(char => {
- // 先假設(shè)數(shù)字只會有個位數(shù)，比較好做轉(zhuǎn)換
- if (/[0-9]/.test(char)) {
- if (char === '0') return zero
- return Array(+char).fill().map(_ => one).join('+')
- }
- if (/[a-zA-Z]/.test(char)) {
- return mapping[char]
- }
- return `"${char}"`
- })
- // 加上 () 保證執(zhí)行順序
- .map(char => `(${char})`)
- .join('+')
- }
- const input = 'constructor'
- console.log(transformString(input))
輸出是：
- ((''+{})[5])+((''+{})[1])+(([][{}]+'')[1])+((![] + '')[3])+((!![] + '')[0])+((!![] + '')[1])+((!![] + '')[2])+((''+{})[5])+((!![] + '')[0])+((''+{})[1])+((!![] + '')[1])
可以再寫一個函數(shù)只轉(zhuǎn)換數(shù)字，把數(shù)字去掉：
- function transformNumber(input) {
- return input.split('').map(char => {
- // 先假設(shè)數(shù)字只會有個位數(shù)，比較好做轉(zhuǎn)換
- if (/[0-9]/.test(char)) {
- if (char === '0') return zero
- let newChar = Array(+char).fill().map(_ => one).join('+')
- return`(${newChar})`
- }
- return char
- })
- .join('')
- }
- const input = 'constructor'
- console.log(transformNumber(transformString(input)))
得到的結(jié)果是：
- ((''+{})[((+!![])+(+!![])+(+!![])+(+!![])+(+!![]))])+((''+{})[((+!![]))])+(([][{}]+'')[((+!![]))])+((![] + '')[((+!![])+(+!![])+(+!![]))])+((!![] + '')[(+[])])+((!![] + '')[((+!![]))])+((!![] + '')[((+!![])+(+!![]))])+((''+{})[((+!![])+(+!![])+(+!![])+(+!![])+(+!![]))])+((!![] + '')[(+[])])+((''+{})[((+!![]))])+((!![] + '')[((+!![]))])
把結(jié)果丟給 console 執(zhí)行，發(fā)現(xiàn)得到的值就是 constructor 沒錯。所以綜合以上代碼，回到剛剛那一段：(()=>{})['constructor']('return btoa(2)[1]')()，要得到轉(zhuǎn)換完的結(jié)果就是：
- const con = transformNumber(transformString('constructor'))
- const fn = transformNumber(transformString('return btoa(2)[1]'))
- const result = `(()=>{})[${con}](${fn})()`
- console.log(result)
結(jié)果很長就不貼了，但確實能得到一個 g。
在繼續(xù)之前，先把代碼改一下，增加一個能直接轉(zhuǎn)換代碼的函數(shù)：
- function transform(code) {
- const con = transformNumber(transformString('constructor'))
- const fn = transformNumber(transformString(code))
- const result = `(()=>{})[${con}](${fn})()`
- return result;
- }
- console.log(transform('return btoa(2)[1]'))
好了，到這里其實已經(jīng)接很近終點了，只有一件事還沒有解決，那就是 btoa 是 WebAPI，瀏覽器才有，node.js 并沒有這個函數(shù)，所以想要做得更漂亮，就必須找到其他方式來產(chǎn)生 g 這個字符。
回憶一下一開始所提的，用 function.constructor 可以拿到 function constructor，以此類推，用 ''['constructor'] 可以拿到 string constructor，只要再加上一個字串，就可以拿到 string constructor 的內(nèi)容了!
像是這樣：''['constructor'] + ''，得到的結(jié)果是："function String() { [native code] }"，一下子就多了一堆字符串可用，而我們朝思暮想的 g 就是：(''['constructor'] + '')[14]。
由于我們的轉(zhuǎn)換器目前只能支持一位數(shù)的數(shù)字(因為做起來簡單)，我們改成：(''['constructor'] + '')[7+7]，可以寫成這樣：
- mapping['g'] = transform(`return (''['constructor'] + '')[7+7]`)
整合所有成果
經(jīng)歷過千辛萬苦之后，終于湊出了最麻煩的 g 這個字符，結(jié)合我們剛剛寫好的轉(zhuǎn)換器，就可以順利產(chǎn)生 console.log(1) 去除掉字母與數(shù)字后的版本：
- const mapping = {
- a: "(![] + '')[1]",
- b: "(''+{})[2]",
- c: "(''+{})[5]",
- d: "([][{}]+'')[2]",
- e: "(![] + '')[4]",
- f: "(![] + '')[0]",
- i: "([][{}]+'')[5]",
- j: "(''+{})[3]",
- l: "(![] + '')[2]",
- n: "([][{}]+'')[1]",
- o: "(''+{})[1]",
- r: "(!![] + '')[1]",
- s: "(![] + '')[3]",
- t: "(!![] + '')[0]",
- u: "(!![] + '')[2]",
- }
- const one = '(+!![])'
- const zero = '(+[])'
- function transformString(input) {
- return input.split('').map(char => {
- // 先假設(shè)數(shù)字只會有個位數(shù)，比較好做轉(zhuǎn)換
- if (/[0-9]/.test(char)) {
- if (char === '0') return zero
- return Array(+char).fill().map(_ => one).join('+')
- }
- if (/[a-zA-Z]/.test(char)) {
- return mapping[char]
- }
- return `"${char}"`
- })
- // 加上 () 保證執(zhí)行順序
- .map(char => `(${char})`)
- .join('+')
- }
- function transformNumber(input) {
- return input.split('').map(char => {
- // 先假設(shè)數(shù)字只會有個位數(shù)，比較好做轉(zhuǎn)換
- if (/[0-9]/.test(char)) {
- if (char === '0') return zero
- let newChar = Array(+char).fill().map(_ => one).join('+')
- return`(${newChar})`
- }
- return char
- })
- .join('')
- }
- function transform(code) {
- const con = transformNumber(transformString('constructor'))
- const fn = transformNumber(transformString(code))
- const result = `(()=>{})[${con}](${fn})()`
- return result;
- }
- mapping['g'] = transform(`return (''['constructor'] + '')[7+7]`)
- console.log(transform('console.log(1)'))
最后的代碼：
- (()=>{})[((''+{})[((+!![])+(+!![])+(+!![])+(+!![])+(+!![]))])+((''+{})[((+!![]))])+(([][{}]+'')[((+!![]))])+((![] + '')[((+!![])+(+!![])+(+!![]))])+((!![] + '')[(+[])])+((!![] + '')[((+!![]))])+((!![] + '')[((+!![])+(+!![]))])+((''+{})[((+!![])+(+!![])+(+!![])+(+!![])+(+!![]))])+((!![] + '')[(+[])])+((''+{})[((+!![]))])+((!![] + '')[((+!![]))])](((''+{})[((+!![])+(+!![])+(+!![])+(+!![])+(+!![]))])+((''+{})[((+!![]))])+(([][{}]+'')[((+!![]))])+((![] + '')[((+!![])+(+!![])+(+!![]))])+((''+{})[((+!![]))])+((![] + '')[((+!![])+(+!![]))])+((![] + '')[((+!![])+(+!![])+(+!![])+(+!![]))])+(".")+((![] + '')[((+!![])+(+!![]))])+((''+{})[((+!![]))])+((()=>{})[((''+{})[((+!![])+(+!![])+(+!![])+(+!![])+(+!![]))])+((''+{})[((+!![]))])+(([][{}]+'')[((+!![]))])+((![] + '')[((+!![])+(+!![])+(+!![]))])+((!![] + '')[(+[])])+((!![] + '')[((+!![]))])+((!![] + '')[((+!![])+(+!![]))])+((''+{})[((+!![])+(+!![])+(+!![])+(+!![])+(+!![]))])+((!![] + '')[(+[])])+((''+{})[((+!![]))])+((!![] + '')[((+!![]))])](((!![] + '')[((+!![]))])+((![] + '')[((+!![])+(+!![])+(+!![])+(+!![]))])+((!![] + '')[(+[])])+((!![] + '')[((+!![])+(+!![]))])+((!![] + '')[((+!![]))])+(([][{}]+'')[((+!![]))])+(" ")+("(")+("'")+("'")+("[")+("'")+((''+{})[((+!![])+(+!![])+(+!![])+(+!![])+(+!![]))])+((''+{})[((+!![]))])+(([][{}]+'')[((+!![]))])+((![] + '')[((+!![])+(+!![])+(+!![]))])+((!![] + '')[(+[])])+((!![] + '')[((+!![]))])+((!![] + '')[((+!![])+(+!![]))])+((''+{})[((+!![])+(+!![])+(+!![])+(+!![])+(+!![]))])+((!![] + '')[(+[])])+((''+{})[((+!![]))])+((!![] + '')[((+!![]))])+("'")+("]")+(" ")+("+")+(" ")+("'")+("'")+(")")+("[")+((+!![])+(+!![])+(+!![])+(+!![])+(+!![])+(+!![])+(+!![]))+("+")+((+!![])+(+!![])+(+!![])+(+!![])+(+!![])+(+!![])+(+!![]))+("]"))())+("(")+((+!![]))+((+!![])+(+!![]))+((+!![])+(+!![])+(+!![]))+(")"))()
用了 1800 個字符，成功寫出了只有：[，]，(，)，{，}，"，'，+ ，!，=，>這 12 個字符的程序，并且能夠順利執(zhí)行 console.log(1)。
而因為我們已經(jīng)可以順利拿到 String 這幾個字了，所以就可以用之前提過的位轉(zhuǎn)換的方法，得到任意小寫字符，像是這樣：
- mapping['S'] = transform(`return (''['constructor'] + '')[9]`)
- mapping['g'] = transform(`return (''['constructor'] + '')[7+7]`)
- console.log(transform('return (35).toString(36)')) // z
那要怎樣拿到任意大寫字符，或甚至任意字符呢?我也有想到幾種方式。
如果想拿到任意字符，可以通過 String.fromCharCode，或是寫成另一種形式：""['constructor']['fromCharCode']，就可以拿到任意字符。可是在這之前要先想辦法拿到大寫的 C，這個就要再想一下了。
除了這條路，還有另外一條，那就是靠編碼，例如說 '\u0043' 其實給你，看來編碼沒有辦法這樣拼起來(仔細想想發(fā)現(xiàn)滿合理的)。
除了這條路，還有另外一個方法，那就是依靠編碼，例如說 '\u0043' 其實就是大寫的 C，所以我原本以為可以通過這種方法來湊，但試了一下是不行的，像是 console.log("\u0043") 會印出 C 沒錯，但是 console.log(("\u00" + "43")) 就會直接報一個錯誤，看來編碼沒有辦法這樣拼起來。不過仔細想想還是很合理的。
總結(jié)
最后寫出來的那個轉(zhuǎn)換的函數(shù)其實并不完整，沒有辦法執(zhí)行任意代碼碼，沒有繼續(xù)做完是因為 jsfuck
(https://github.com/aemkei/jsfuck) 這個庫已經(jīng)寫得很清楚了，在 README 里面詳細了描述它的轉(zhuǎn)換過程，而且最后只用了 6 個字符而已，真的很佩服。
在它的代碼當中也可以看出是怎樣轉(zhuǎn)換的，大寫 C 的部分是用了一個 String 上名為 italics 的函數(shù)，可以產(chǎn)生<i></i>，之后再調(diào)用 escape，就會得到 %3Ci%3E%3C/i%3E，然后就得到大寫 C 了。
有些人可能會說我平時寫 BUG 寫得好好的，搞這些亂七八糟的有什么用，但這樣做的重點并不在于最后的結(jié)果，而是在訓(xùn)練幾個東西：
- 對于 js 語言的熟悉度，我們用了很多類型轉(zhuǎn)換和內(nèi)置方法來拼湊東西，可能有些是你從來沒聽到過的。
- 解決問題時縮小范圍的能力，從如何把字符串當作函數(shù)執(zhí)行，再到拼湊出數(shù)字和字符串，一步步的縮小問題，子問題解決之后原問題就解決了
