JavaScript中的陷阱大集合
本文主要介紹怪異的Javascript，毋庸置疑，它絕對有怪異的一面。當軟件開發者開始使用世界上使用最廣泛的語言編寫代碼時，他們會在這個過 程中發現很多有趣的“特性”。即便是老練的Javascript開發者也可以在本文找到一些有趣的新陷阱，請留意這些陷阱，當然也可以盡情享受由這些陷阱 帶來的“樂趣”!
函數和操作符
雙等號
==操作符比較時會進行類型的強制轉換，這意味著它可以比較兩個不同類型的對象，在執行比較之前它將會嘗試把這兩個對象轉換成同一個類型，舉一個例子：
- "1" == 1 //true
然而，這樣往往會誤導我們，而且我們也不需要這樣子來比較。在上面的例子中，我們完全可以先將字符串轉換成數字型，然后利用對類型敏感的三重等號(===)來進行比較，如：
- Number("1") === 1; //true
或者，更好的是，確保你放在首位的操作數的類型是正確的。
由于雙等號具有強制類型轉換的行為，所以它會打破一般的傳遞性規則，這點有點嚇人，請看下面的列子：
- "" == 0 //true - 空字符串會被強制轉換為數字0.
- 0 == "0" //true - 數字0會被強制轉換成字符串"0"
- "" == "0" //false - 兩操作數都是字符串所以不執行強制轉換
如果使用三重等號，上面的三個比較都將返回false。
parseInt不把10作為數字基數
如果你忽略parseInt的第二個參數，那么數字的基數將由下面的規則所決定：
◆ 默認基數為10，即按10進制解析
◆ 如果數字以0x開頭，那么基數為16，即按16進制解析
◆ 如果數字以0開頭，那么基數為8，即按8進制解析
一個常見的錯誤是我們讓用戶輸入以0開頭的數字，這時候它就按8進制的方式去解析了，于是我們就看到了如下的效果：
- parseInt("8"); //8
- parseInt("08"); //0
因此，我們很多時候都會指定parseInt的第二個參數，如下所示：
- parseInt("8", 10); //8
- parseInt("08", 10); //8
ECMAScript5方面的說明：ECMAScript已不再支持8進制的解析假設，另外，如果忽略parseInt的第二個參數將會引起JSLint的警告。
字符串替換
字符串替換函數僅僅會替換第一個匹配項，并不能替換你所期望的全部匹配項。如下代碼：
- "bob".replace("b", "x"); // "xob"
- "bob".replace(/b/, "x"); // "xob" (使用了正則表達式)
如果要替換所有的匹配項，我們可以使用正則表達式，并為他它添加全局修飾符，如下代碼：
- "bob".replace(/b/g, "x"); // "xox"
- "bob".replace(new RegExp("b", "g"), "x"); // "xox" (alternate explicit RegExp)
全局修飾符確保了替換函數找到第一個匹配項后不會停止對下一個匹配項的替換。
“+"操作符會執行相加操作和字符串連接操作
php作為另一種弱類型語言，可以使用”.“操作符對字符串進行連接。Javascript卻不是這樣的 - 所以當操作數是字符串的時候”a+b“通常是執行連接操作。如果你想執行數字相加那你就要引起注意了，因為輸入的內容可能是字符串類型的，所以你在執行相 加操作前需要先將其轉換成數字類型，代碼如下：
- 1 + document.getElementById("inputElem").value; // 連接操作
- 1 + Number(document.getElementById("inputElem").value); // 相加操作
需要注意的是，相減操作會嘗試將操作數轉換成數字類型，代碼如下：
- "3" - "1"; // 2
盡管有時候你想用減法將字符串從另一個字符串中減掉，但這時候往往會產生一些邏輯錯誤。
很多時候我們用數字和空串相加來實現數字轉換成字符串的操作，代碼如下：
- 3 + ""; // "3"
但是這樣做并不好，所以我們可以用String(3)來取代上面的方法。
typeof
typeof這會返回一個javascript基本類型的實例的類型。Array實際上不是基本類型，所以typeof Array對象將返回Object，代碼如下：
- typeof {} === "object" //true
- typeof "" === "string" //true
- typeof [] === "array"; //false
當你對自己的對象的實例使用這個操作符時將會得到相同的結果(typeof = "object")。
另外說明一點，”typeof null“將返回”object“，這個有點詭異。
instanceof
instanceof返回指定對象是否是由某個類構造的實例，這個對我們檢查指定對象是否是自定義類型之一很有幫助，但是，如果你是用文本語法創建的內置類型那可能會得出錯誤的結果，代碼如下：
- "hello" instanceof String; //false
- new String("hello") instanceof String; //true
由于Array實際上不是內置類型(只是偽裝成內置類型 - 因此對它使用typeof不能得到預期的結果)，但是使用instanceof就能得到預期效果了，代碼如下所示：
- ["item1", "item2"] instanceof Array; //true
- new Array("item1", "item2") instanceof Array; //true
唉，不爽!總的來說，如果你想測試Boolean, String, Number, 或者Function的類型，你可以使用typeof，對于其他的任何類型，你可以使用instanceof測試。
哦，還有一點，在一個function中，有一個預定義變量叫“arguments”，它以一個array的形式傳遞給function。然而，它并不是真正的array，它只是一個類似array的對象，帶有長度屬性并且屬性值從0-length。非常奇怪...你可以用下面的小伎倆將它轉換成真正的數組：
- var args = Array.prototype.slice.call(arguments, 0);
這個對由getElementsByTagName返回的NodeList對象也是一樣的 - 它們都可以用以上的代碼轉換成合適的數組。
eval
eval 可以將字符串以javascript代碼的形式來解析執行，但是一般來說我們不建議這么做。因為eval非常慢 - 當javascript被加載到瀏覽器中時，它會被編譯成本地代碼;然而執行的過程中每次遇到eval表達式，編譯引擎都將重新啟動執行編譯，這樣做的代 價太大了。而且這樣做也丑陋無比，有很多eval被濫用的例子。另外，在eval中的代碼會在當前范圍內執行，因此它可以修改局部變量，以及在你的范圍內 添加一些讓你意想不到的東西。
JSON 轉換是我們經常要做的;通常我們使用“var obj = eval(jsonText);”來進行轉換。然而現在幾乎所有的瀏覽器都支持本地JSON對象，你可以使用“var obj = JSON.parse(jsonText);”來替代前面的代碼。相反你也可以用“JSON.stringify”將JSON對象轉換成字符串。更妙的 是，你可以使用“jQuery.parseJSON”來完成上述的工作。
setTimeout和setInterval函數的第一個參數可以用字符串作為函數體來解析執行，當然，我們也不建議這樣做，我們可以用實際的函數來替代。
最后，Function的構造函數和eval非常像，唯一不同的是，Function構造函數是在全局范圍內執行的。
with
with表達式將為你提供訪問對象屬性的速記方式，但我們是否應該使用它，仍然存在矛盾的觀點。Douglas Crockford不太喜歡它。John Resig在他的書中有找了很多with的巧妙用法，但是他也承認這將會影響性能并且會產生一點混亂。來看看我們分離出來的with代碼塊，他不能準確地告訴我們現在正在執行什么，代碼如下所示：
- with (obj) {
- bob = "mmm";
- eric = 123;
- }
我是否剛剛修改了一個叫bob的局部變量?或者我是否設置了obj.bob?如果obj.bob已經被定義，那么它將會被重置為“mmm”。否則，如果有 另一個bob在這個范圍中，那么他將會被改變。否則，全局變量bob會被設置。最后，下面的寫法可以非常明確地表達你的意思：
- obj.bob = "mmm";
- obj.eric = 123;
ECMAScript5說明：ES5嚴格的來說已經不支持with表達式。
#p#
類型和構造函數
使用“new”關鍵字構造內置類型
Javascript中有Object, Array, Boolean, Number, String, 和Function這些類型，他們各自都有各自的文字語法，所以就不需要顯式構造函數了。
| 顯式構造(不建議) | 文字語法(推薦) |
| var a = new Object(); a.greet = "hello"; |
var a = { greet: "hello" }; |
| var b = new Boolean(true); | var b = true; |
| var c = new Array("one", "two"); | var c = ["one", "two"]; |
| var d = new String("hello"); | var d = "hello" |
| var e = new Function("greeting", "alert(greeting);"); | var e = function(greeting) { alert(greeting); }; |
然而，如果你使用new關鍵字來構造上面其中的一種類型，你實際上將會得到一個類型為Object并且繼承自你要構造的類型的原型的對象(Function類型除外)。所以盡管你用new關鍵字構造了一個Number類型，它也將是一個Object類型，如下代碼：
- typeof new Number(123); // "object"
- typeof Number(123); // "number"
- typeof 123; // "number"
上面的第三項是文本語法，為了避免沖突，我們應該使用這種方法來構造上面的這些類型。
使用“new”關鍵字來構造任何東西
如果你自寫構造函數并且忘記了new關鍵字，那么悲劇就發生了：
- var Car = function(colour) {
- this.colour = colour;
- };
- var aCar = new Car("blue");
- console.log(aCar.colour); // "blue"
- var bCar = Car("blue");
- console.log(bCar.colour); // error
- console.log(window.colour); //"blue"
使用new關鍵字調用函數會創建一個新的對象，然后調用新對象上下文中的函數，最后再返回該對象。相反的，如果不使用new關鍵在調用函數，那它將會變成一個全局對象。
偶然忘記使用new關鍵字意味著很多可選擇的對象構造模式已經出現可以完全刪除使用這個關鍵字的需求的情況，盡管這超出了本文的范圍，但我還是建議你去進一步閱讀。
沒有Integer類型
數值計算是相對緩慢的，因為沒有Integer類型。只有Number類型 - Number是IEEE標準中雙精度浮點運算(64位)類型。這就意味著Number會引起下面的精度舍入錯誤：
- 0.1 + 0.2 === 0.3 //false
因為integers和floats沒有區別，不像C#和JAVA下面代碼是true：
- 0.0 === 0; //true
最后是一個關于Number的疑問，我們該如何實現下面的問題：
- a === b; //true
- 1/a === 1/b; //false
答案是按照Number的規范是允許出現+0和-0的，+0等于-0，但是正無窮大不等于負無窮大，代碼如下：
- var a = 0 * 1; // 這個結果為0
- var b = 0 * -1; // 這個結果為-0 (你也可以直接"b=-0",但是你為何要這樣做?)
- a === b; //true: 0等于-0
- 1/a === 1/b; //false: 正無窮大不等于負無窮大
作用域
沒有塊作用域
因為你可能已經注意到上一個觀點，javascript中沒有塊作用域的概念，只有函數作用域?？梢栽囋囅旅娴拇a：
- for(var i=0; i<10; i++) {
- console.log(i);
- }
- var i;
- console.log(i); // 10
當i被定義在for循環中，退出循環后它人被保留在這個作用域內，所以最后調用console.log輸出了10。這里有一個JSLint警告來讓你避免這個問題：強制將所有的變量定義在函數的開頭。 我們有可能通過寫一個立即執行的function來創建一個作用域：
- (function (){
- for(var i=0; i<10; i++) {
- console.log(i);
- }
- }());
- var i;
- console.log(i); // undefined
當你在內部函數之前聲明一個變量，然后在函數里重聲明這個變量，那將會出現一個奇怪的問題，示例代碼如下：
- var x = 3;
- (function (){
- console.log(x + 2); // 5
- x = 0; //No var declaration
- }());
但是，如果你在內部函數中重新聲明x變量，會出現一個奇怪的問題：
- var x = 3;
- (function (){
- console.log(x + 2); //NaN - x is not defined
- var x = 0; //var declaration
- }());
這是因為在函數中x變量被重新定義了，這說明了翻譯程序將var表達式移動到了函數頂部了，最終就變成這樣執行了：
- var x = 3;
- (function (){
- var x;
- console.log(x + 2); //NaN - x is not defined
- x = 0;
- }());
這個實在是太有意義了!
全局變量
Javascript 有一個全局作用域，在為你的代碼創建命名空間時一定要小心謹慎。全局變量會給你的應用增加一些性能問題，因為當你訪問它們時，運行時不得不通過每一個作用 域來建立知道找到它們為止。他們會因你的有意或者無意而被訪問或者修改，這將導致另外一個更加嚴重的問題 - 跨站點腳本攻擊。如果一個不懷好意的家伙在你的頁面上找出了如何執行那些代碼的方法，那么他們就可以通過修改全局變量非常容易地擾亂你的應用。缺乏經驗的 開發者在無意中會不斷的將變量添加到全局作用域中，通過本文，將會告訴大家這樣會發生什么意外的事情。
我曾經看到過下面的代碼，它將嘗試聲明兩個值相等的局部變量：
- var a = b = 3;
這樣非常正確的得到了a=3和b=3，但是a在局部作用域中而b在全局作用域中，”b=3“將會被先執行，全局操作的結果，3，再被分配給局部變量a。
下面的代碼聲明了兩個值為3的變量，這樣能達到預期的效果：
- var a = 3,
- b = a;
“this”和內部函數
“this“關鍵字通常指當前正在執行的函數所在的對象，然而，如果函數并沒有在對象上被調用，比如在內部函數中，”this“就被設置為全局對象(window)，如下代碼：
- var obj = {
- doSomething: function () {
- var a = "bob";
- console.log(this); // 當前執行的對象
- (function () {
- console.log(this); // window - "this" is reset
- console.log(a); // "bob" - still in scope
- }());
- }
- };
- obj.doSomething();
#p#
雜項
數據不存在：”null“和”undefined“
有兩種對象狀態來表明數據不存在：null和undefined。這會讓那些從其他編程語言比如C#轉過來的程序員變得相當混亂。也許你會期望下面的代碼返回true：
- var a;
- a === null; //false
- a === undefined; //true
”a“實際上是undefined的(盡管你用雙等號==來與null比較會得出true的結果，但這只是表面上看起來正確的另一個錯誤)。
如果你想檢查一個變量是否真的存在值，那你不能用雙等號==去判斷，要用下面的方法：
- if(a !== null && a !== undefined) {
- ...
- }
”哈“，你也許會說，既然null和undefined都是false，那么你可以這樣去做：
- if(a) {
- ...
- }
當然，0是false，空字符串也是。那么如果這其中一個是a的正確的值的話，你就要用前者了。那種比較短小的比較方式，適合于比較objects, arrays, 和booleans類型。
重定義undefined
非常正確，你可以重定義undefined，因為它不是一個保留字：
- undefined = "surprise!";
但是，你要通過給undefined變量分配一個值或者使用”void“操作符來取回值(否則這是相當沒用的)。
- undefined = void 0;
這就是為什么jquery腳本庫的第一行要這樣寫了：
- (function ( window, undefined ) {
- ... // jQuery library!
- }(window));
這個函數被調用時是傳入一個參數的，同時確保了第二個參數”undefined“實際上是undefined的。
順便說一下，你不能重定義null - 但是你可以重定義NaN，Infinity和帶構造函數的內置類型。可以這樣嘗試一下：
- Array = function (){ alert("hello!"); }
- var a = new Array();
當然，你可以在任何地方用文字語法聲明Array。
可選的分號
Javascript代碼中分號是可選的，所以初學者寫代碼就簡單多了。但是很不幸的是如果忽略了分號并不會給任何人帶來方便。結果是當解釋器遇到錯誤時，必須追溯并嘗試去猜測因為哪些分號漏寫導致的問題。
這里有一個經典的例子：
- return
- {
- a: "hello"
- };
上面的代碼并不會返回一個對象，而是返回了undefined - 但是也沒有錯誤拋出。其實是因為分號自動加到了return語句后面，其他的代碼都是非常正確的，但是就是什么都不執行，這就證明了在 javascript中，左花括號應該緊跟這一行而不該換行，這不只是一個編程風格的問題。下面的代碼才會正確返回一個屬性為a的對象：
- return {
- a: "hello"
- };
NaN
NaN的類型是...Number
- typeof NaN === "number" //true
另外NaN和任何東西比較都是false：
- NaN === NaN; // false
因為NaN之間是不能比較的，唯一判斷一個數字是否為NaN的方法是調用isNaN方法。
從另一個方面可以說明，我們也可以用函數isFinite，當其中一個操作數為NaN或者InFinity時返回false。
arguments對象
在一個函數中，我們可以引用arguments對象來遍歷傳入的參數列表，第一個比較怪異的地方是這個對象并不是Array，而是一個類似 Array的對象(有一個length屬性，其值在0-length-1之間)。為了將其轉換成array，我們可以array的splice函數來創建 其對應的array數組：
- (function(){
- console.log(arguments instanceof Array); // false
- var argsArray = Array.prototype.slice.call(arguments);
- console.log(argsArray instanceof Array); // true
- }());
第二個比較怪異的地方是當一個函數的簽名中有顯式arguments參數時，它們是可以被重新分配的并且arguments對象也會被改變。這就表明了arguments對象指向了變量本身。你不能利用arguments對象來給出它們的初始值：
- (function(a){
- alert(arguments[0]); //1
- a = 2;
- alert(arguments[0]); //2
- }(1));
結束本文!
這樣我就總結完了這些javascript陷阱。我肯定還會有更多這樣的陷阱，期待大家更多的意見和點評。
PS - 我真的很喜歡Javascript。
原文：http://www.codeproject.com/KB/scripting/javascript-gotchas.aspx
譯文：http://www.cnblogs.com/sxwgf/archive/2011/11/14/javascript-gotchas.html
譯者：王國峰
【編輯推薦】
