建站
咨詢
售后
建站咨詢
新聞中心
JavaScript 是一門弱類型語言，剛接觸的時候感覺方便快捷(不需要聲明變量類型了耶!)，接觸久了會發(fā)現(xiàn)它帶來的麻煩有的時候不在預期之內(nèi)
呵呵一笑，哪有這么夸張，可能有人看過這樣一段代碼
- [][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]][([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+([][[]]+[])[+!+[]]+(![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[+!+[]]+([][[]]+[])[+[]]+([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+!+[]]]((![]+[])[+!+[]]+(![]+[])[!+[]+!+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]+(!![]+[])[+[]]+(![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[!+[]+!+[]+[+[]]]+([]+[])[(![]+[])[+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+([][[]]+[])[+!+[]]+(!![]+[])[+[]]+([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+!+[]]]()[+!+[]+[!+[]+!+[]]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+!+[]]+(![]+[])[+!+[]]+([][[]]+[])[+!+[]]+(+![]+[![]]+([]+[])[([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+([][[]]+[])[+!+[]]+(![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[+!+[]]+([][[]]+[])[+[]]+([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+!+[]]])[!+[]+!+[]+[+[]]]+(!![]+[])[!+[]+!+[]+!+[]]+([]+[])[(![]+[])[+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+([][[]]+[])[+!+[]]+(!![]+[])[+[]]+([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+!+[]]]()[+!+[]+[!+[]+!+[]]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[!+[]+!+[]+[+[]]])()
這個占了好大的篇幅哈 3167 個字符，粘貼到瀏覽器的 Console 控制臺，直接彈出了 orange，隨叫隨到有不有
對于不知道原理出處的給大家一個地址：http://www.jsfuck.com/
JSFuck 的變態(tài)程度達到了***，因為它的理念是 Write any JavaScript with 6 Characters: []()!+
或許又有人說：這個只是搞怪的吧，實際誰這么寫代碼啊
說的沒錯，當一段代碼變得晦澀難懂的時候，甚至到上文的混亂字符(天書)，卻能實現(xiàn)任意功能這就變得不可預期，也就是說 JS 代碼的安全性沒有保障
當然本文不會研究這些無意義的字符原理是怎么實現(xiàn)的因為人家的 Github 文檔已經(jīng)描述的特別全面了，感興趣的可以研究下：https://github.com/aemkei/jsfuck
我們聊一聊每天能看到用到的方法底層是怎么解析的，熟知轉(zhuǎn)換分成兩種一種是隱式轉(zhuǎn)換，另一種是強制的類型轉(zhuǎn)換
隱式轉(zhuǎn)換
當遇到以下幾種情況，JavaScript會自動轉(zhuǎn)換數(shù)據(jù)類型：
- 不同類型的數(shù)據(jù)進行互相運算
- 對非布爾值類型的數(shù)據(jù)求布爾值
- 對非數(shù)值類型的數(shù)據(jù)使用一元運算符(即 "+" 和 "-")
隱式轉(zhuǎn)換為 Boolean
大多數(shù)在做 if 判斷時會用到，這里只需記住六個轉(zhuǎn)換為 false，其它全部為 true
- null
- undefined
- NaN
- ''
- -0
- +0
隱式轉(zhuǎn)換為 String
字符串的自動轉(zhuǎn)換，主要發(fā)生在加法運算時。當一個值為字符串，另一個值為非字符串，則后者轉(zhuǎn)為字符串。
- '1' + 2 // '12'
- '1' + true // "1true"
- '1' + false // "1false"
- '1' + {} // "1[object Object]"
- '1' + [] // "1"
- '1' + function (){} // "1function (){}"
- '1' + undefined // "1undefined"
- '1' + null // "1null"
隱式轉(zhuǎn)換為 Number
除了加法運算符有可能把運算子轉(zhuǎn)為字符串，其他運算符都會把兩側(cè)的運算子自動轉(zhuǎn)成數(shù)值
- '5' - '2' // 3
- '5' * '2' // 10
- true - 1 // 0
- false - 1 // -1
- '1' - 1 // 0
- '5' * [] // 0
- false / '5' // 0
- 'abc' - 1 // NaN
- +'abc' // NaN
- -'abc' // NaN
- +true // 1
- -false // 0
隱式轉(zhuǎn)換的基礎表現(xiàn)都在這了，強調(diào)的是這些轉(zhuǎn)換的背后都伴隨著強制轉(zhuǎn)換，使用 Boolean、Number 和 String，下面重點講一下強制轉(zhuǎn)換的原理
強制轉(zhuǎn)換
看到上面例子也許你已經(jīng)有些許疑問了，比如上面的這個 '1' + {} 怎么就輸出 1[object Object] 了呢
如上面強調(diào)的，你會猜測首先執(zhí)行 String({}) 得到 "[object Object]" ，然后再字符串拼接，是的我們總能得到轉(zhuǎn)換背后的實現(xiàn)原理，其實真實原理要比這個復雜，見下文
強制轉(zhuǎn)換為 Boolean
這里略過因為與隱式轉(zhuǎn)換相同，切記 []、{} 都轉(zhuǎn)換成 true
強制轉(zhuǎn)換為 String
基本類型的轉(zhuǎn)換結(jié)果與隱式轉(zhuǎn)換相同，這里說一下對象的轉(zhuǎn)換，加深上面引用例子的解析
對象轉(zhuǎn)換字符串分成三步
- 先調(diào)用toString方法，如果toString方法返回的是原始類型的值，則對該值使用String方法，不再進行以下步驟
- 如果toString方法返回的是復合類型的值，再調(diào)用valueOf方法，如果valueOf方法返回的是原始類型的值，則對該值使用String方法，不再進行以下步驟
- 如果valueOf方法返回的是復合類型的值，則報錯
再分解這個例子
- String({})
- // "[object Object]"
上面代碼相當于下面這樣
- String({}.toString())
- // "[object Object]"
如果 toString 方法和 valueOf 方法，返回的都不是原始類型的值，則 String 方法報錯
- var obj = {
- valueOf: function () {
- console.log("valueOf");
- return {};
- },
- toString: function () {
- console.log("toString");
- return {};
- }
- };
- String(obj)
- // TypeError: Cannot convert object to primitive value
我們不難看出可以對 toString 方法和 valueOf 方法進行改寫，測試其先后運行的順序也簡單的多
- String({toString:function(){return 3;}})
- // "3"
- String({valueOf:function (){return 2;}})
- // "[object Object]"
- String({valueOf:function (){return 2;},toString:function(){return 3;}})
- // "3"
結(jié)果表示toString方法先于valueOf方法執(zhí)行
強制轉(zhuǎn)換為 Number
基本類型轉(zhuǎn)換如下
- Number("123") // 123
- Number("123abc") // NaN
- Number("") // 0
- Number(false) // 0
- Number(undefined) // NaN
- Number(null) // 0
對象轉(zhuǎn)換一樣要復雜些，與 String 唯一不同的就是 valueOf 方法在前， toString 方法在后，其它不贅述見上文例子。
isNaN() 并不陌生，isNaN({}) //true 的內(nèi)在轉(zhuǎn)換過程是相同的
總結(jié)
其它的轉(zhuǎn)換原則還有很多，看到這我們還是不能解釋文章開始的代碼轉(zhuǎn)換的過程，掌握這些更多是保證正常書寫代碼規(guī)避錯誤的發(fā)生，十分好奇的可以研究下比較特殊的轉(zhuǎn)化原則，還有好多好多。
分享文章：JavaScript類型轉(zhuǎn)換深度學習
文章出自：http://www.5511xx.com/article/coeodhj.html
