十個JavaScript中易犯的小錯誤，你中了幾槍？

　　序言

　　在今天，JavaScript已經成為了網頁編輯的核心。尤其是過去的幾年，互聯網見證了在SPA開發、圖形處理、互動等方面大量JS庫的出現。

　　如果初次打交道，很多人會覺得js很簡單。確實，對於許多有經驗的工程師，甚至是初學者而言，實現基本的js功能幾乎毫無障礙。但JS的真實功能卻比許多人想像的更加多元、複雜。 JavaScript的許多細節規定會讓你的網頁出現很多意想不到的bug，搞懂這些bug，對於成為一位有經驗的JS開發者很重要。

　　常見錯誤一：對於this關鍵字的不正確引用

　　我曾經聽一位喜劇演員說過：

#「我從未在這裡，因為我不清楚這裡是哪裡，是除了那裡之外的地方嗎？」

　　這句話或多或少地暗喻了在js開發中開發者對於this關鍵字的使用誤區。 This指涉的是什麼？它和日常英語口說中的this是一個意思嗎？

　　隨著近些年js程式設計不斷地複雜化，功能多樣化，對於一個程式結構的內部指引、引用也逐漸變多起來

　　下面讓我們一起來看這一段程式碼：

Game.prototype.restart = function () {   this.clearLocalStorage(); 

    this.timer = setTimeout(function(){     this.clearBoard();        }, 0);

 };

　　執行上面的程式碼將會出現以下錯誤：

Uncaught TypeError: undefined is not a function

　　這是為什麼？ this的呼叫和它所在的環境密切相關。之所以會出現上面的錯誤，是因為當你在調用setTimeout()函數的時候, 你實際調用的是window.setTimeout(). 因此，在setTimeout() 定義的函數其實是在window背景下定義的，而window中並沒有clearBoard() 這個函數方法。

　　以下提供兩種解決方案。第一種比較簡單直接的方法便是，把this儲存到一個變數當中，這樣他就可以在不同的環境背景中被繼承下來：

Game.prototype.restart = function () {   this.clearLocalStorage();  

    var self = this;

    this.timer = setTimeout(function(){     self.clearBoard();}, 0); };

　　第二種方法便是用bind()的方法，不過這個相比上一種要複雜一些，對於不熟悉bind()的同學可以在微軟官方查看它的使用方法：http://www.php.cn/

Game.prototype.restart = function () {   this.clearLocalStorage();  

    this.timer = setTimeout(this.reset.bind(this), 0); };      

Game.prototype.reset = function(){     this.clearBoard();};

　　上面的例子中，兩個this均指涉的是Game.prototype。

　　常見錯誤二：傳統程式語言的生命週期迷思

　　另一種易犯的錯誤，便是帶著其他程式語言的思維，認為在JS中，也存在生命週期這麼一說。請看下面的程式碼：

for (var i = 0; i < 10; i++) {   /* ... */ } console.log(i);

　　如果你認為在執行console.log() 時肯定會報出 undefined 錯誤，那麼你就大錯特錯了。我會告訴你其實它會回傳 10嗎。

　　當然，在許多其他語言當中，遇到這樣的程式碼，一定會報錯。因為i明顯已經超越了它的生命週期。在for中定義的變數在迴圈結束後，它的生命也就結束了。但在js中，i的生命還會繼續。這種現象叫做 variable hoisting。

　　而如果我們想要實作和其他語言一樣的在特定邏輯模組中具有生命週期的變量，可以用let關鍵字。

　　常見錯誤三：記憶體外洩

　　記憶體洩漏在js變成中幾乎是一個無法避免的問題。如果不是特別細心的話，在最後的檢查過程中，一定會出現各種記憶體外洩問題。下面我們就來舉例說明一下：

var theThing = null; 

var replaceThing = function () {   

        var priorThing = theThing; 

        var unused = function () { 

                  if (priorThing) {       console.log("hi");     }   

       }; 

       theThing = {     longStr: new Array(1000000).join('*'),  // 

                  someMethod: function () {       console.log(someMessage);     }   
       }; 
};   
setInterval(replaceThing, 1000);

　　如果運行上面的程式碼，你會發現你已經造成了大量的內存洩露，每秒洩露1M的內存，顯然光靠GC（垃圾回收器）是無法幫助你的了。從上面的程式碼來看，似乎是longstr在每次replaceThing呼叫的時候都沒有被回收。這是為什麼呢？

　　每一個theThing結構都含有一個longstr結構列表。每一秒當我們調用replaceThing, 它就會把當前的指向傳遞給priorThing. 但是到這裡我們也會看到並沒有什麼問題，因為priorThing 每回也是先解開上次函數的指向才會接受新的賦值。而所有的這一切都是發生在replaceThing 函數體當中，按常理來說當函數體結束之後，函數中的本地變數也將會被GC回收，也就不會出現記憶體洩漏的問題了，但是為什麼會出現上面的錯誤呢？

　　這是因為longstr的定義是在一個閉包中進行的，而它又被其他的閉包所引用，js規定，在閉包中引入閉包外部的變數時，當閉包結束時此物件無法被垃圾回收（GC）。關於在JS中的記憶體洩漏問題可以查看http://www.php.cn/

　　常見錯誤四:比較運算子

　　JavaScript中一個比較便捷的地方，便是它可以給每一個在比較運算的結果變數強行轉換成布林類型。但從另一方面來考慮，有時候它也會為我們帶來很多不便，以下的這些例子便是一些一直困擾很多程式設計師的程式碼實例：

console.log(false == '0'); 

console.log(null == undefined); 

console.log(" \t\r\n" == 0); 

console.log('' == 0);  // And these do too! 

if ({}) // ... 

if ([]) // ...

　　最后两行的代码虽然条件判断为空（经常会被人误认为转化为false），但是其实不管是{ }还是[ ]都是一个实体类，而任何的类其实都会转化为true。就像这些例子所展示的那样，其实有些类型强制转化非常模糊。因此很多时候我们更愿意用 === 和 !== 来替代== 和 !=， 以此来避免发生强制类型转化。. ===和!== 的用法和之前的== 和 != 一样，只不过他们不会发生类型强制转换。另外需要注意的一点是，当任何值与 NaN 比较的时候，甚至包括他自己，结果都是false。因此我们不能用简单的比较字符来决定一个值是否为 NaN 。我们可以用内置的 isNaN() 函数来辨别:

console.log(NaN == NaN);    // false 

console.log(NaN === NaN);   // false 

console.log(isNaN(NaN));    // true

　　常见错误五：低效的DOM操作

　　js中的DOM基本操作非常简单，但是如何能有效地进行这些操作一直是一个难题。这其中最典型的问题便是批量增加DOM元素。增加一个DOM元素是一步花费很大的操作。而批量增加对系统的花销更是不菲。一个比较好的批量增加的办法便是使用 document fragments ：

var p = document.getElementsByTagName("my_p");  

var fragment = document.createDocumentFragment(); 

 for (var e = 0; e < elems.length; e++) { fragment.appendChild(elems[e]); } p.appendChild(fragment.cloneNode(true));

　　直接添加DOM元素是一个非常昂贵的操作。但是如果是先把要添加的元素全部创建出来，再把它们全部添加上去就会高效很多。

　　常见错误6:在for循环中的不正确函数调用

　　请大家看以下代码：

var elements = document.getElementsByTagName('input');

var n = elements.length; 

for (var i = 0; i < n; i++) {     

elements[i].onclick = function() {         

console.log("This is element #" + i);     }; }

　　运行以上代码，如果页面上有10个按钮的话，点击每一个按钮都会弹出 “This is element #10”! 。这和我们原先预期的并不一样。这是因为当点击事件被触发的时候，for循环早已执行完毕，i的值也已经从0变成了。

　　我们可以通过下面这段代码来实现真正正确的效果：

var elements = document.getElementsByTagName('input'); 

var n = elements.length; 

var makeHandler = function(num) {  // outer function

      return function() { 

console.log("This is element #" + num);      }; }; 

for (var i = 0; i < n; i++) 

{     elements[i].onclick = makeHandler(i+1); }

　　在这个版本的代码中， makeHandler 在每回循环的时候都会被立即执行，把i＋1传递给变量num。外面的函数返回里面的函数，而点击事件函数便被设置为里面的函数。这样每个触发函数就都能够是用正确的i值了。

　　常见错误7:原型继承问题

　　很大一部分的js开发者都不能完全掌握原型的继承问题。下面具一个例子来说明：

BaseObject = function(name) {     

if(typeof name !== "undefined") 

{         this.name = name;     } 

else 

{         this.name = 'default'     } };

　　这段代码看起来很简单。如果你有name值，则使用它。如果没有，则使用 ‘default’:

var firstObj = new BaseObject(); 

var secondObj = new BaseObject('unique');  

console.log(firstObj.name);  // -> 结果是'default' 

console.log(secondObj.name); // -> 结果是 'unique'

　　但是如果我们执行delete语句呢:

delete secondObj.name;

　　我们会得到:

console.log(secondObj.name); // -> 结果是 'undefined'

　　但是如果能够重新回到 ‘default’状态不是更好么? 其实要想达到这样的效果很简单，如果我们能够使用原型继承的话:

BaseObject = function (name) 

{     if(typeof name !== "undefined") 

{         this.name = name;     } };  

BaseObject.prototype.name = 'default';

　　在这个版本中, BaseObject 继承了原型中的name 属性, 被设置为了 'default'.。这时，如果构造函数被调用时没有参数，则会自动设置为 default。相同地，如果name 属性被从BaseObject移出，系统将会自动寻找原型链，并且获得 'default'值：

 var thirdObj = new BaseObject('unique'); 

 console.log(thirdObj.name);  

 delete thirdObj.name;

 console.log(thirdObj.name);  // -> 结果是 'default'

　　常见错误8:为实例方法创建错误的指引

　　我们来看下面一段代码:

var MyObject = function() {} 

 MyObject.prototype.whoAmI = function() {     

console.log(this === window ? "window" : "MyObj"); }; 

 var obj = new MyObject();

　　现在为了方便起见，我们新建一个变量来指引 whoAmI 方法, 因此我们可以直接用 whoAmI() 而不是更长的obj.whoAmI():

var whoAmI = obj.whoAmI;

　　接下来为了确保一切都如我们所预测的进行，我们可以将 whoAmI 打印出来:

console.log(whoAmI);

　　结果是：

function () {     console.log(this === window ? "window" : "MyObj"); }

　　没有错误！

　　但是现在我们来查看一下两种引用的方法：

obj.whoAmI();  // 输出 "MyObj" (as expected) 

whoAmI();      // 输出 "window" (uh-oh!)

　　哪里出错了呢？

　　原理其实和上面的第二个常见错误一样，当我们执行 var whoAmI = obj.whoAmI;的时候，新的变量 whoAmI 是在全局环境下定义的。因此它的this 是指window, 而不是obj！

　　正确的编码方式应该是：

var MyObject = function() {}  

MyObject.prototype.whoAmI = function() {     

      console.log(this === window ? "window" : "MyObj"); }; 

var obj = new MyObject(); 

obj.w = obj.whoAmI;   // still in the obj namespace  obj.whoAmI();  // 输出 "MyObj" (as expected) 

obj.w();       // 输出 "MyObj" (as expected)

　　常见错误9:用字符串作为setTimeout 或者 setInterval的第一个参数

　　首先我们要声明，用字符串作为这两个函数的第一个参数并没有什么语法上的错误。但是其实这是一个非常低效的做法。因为从系统的角度来说，当你用字符串的时候，它会被传进构造函数，并且重新调用另一个函数。这样会拖慢程序的进度。

setInterval("logTime()", 1000); 

setTimeout("logMessage('" + msgValue + "')", 1000);

　　另一种方法是直接将函数作为参数传递进去：

setInterval(logTime, 1000);   

setTimeout(function() { 

logMessage(msgValue); }, 1000);

　　常见错误10:忽略 “strict mode”的作用

 　　“strict mode” 是一种更加严格的代码检查机制，并且会让你的代码更加安全。当然，不选择这个模式并不意味着是一个错误，但是使用这个模式可以确保你的代码更加准确无误。

　　下面我们总结几条“strict mode”的优势：

　　1. 讓Debug更加容易：在正常模式下很多錯誤都會被忽略掉，「strict mode」模式會讓Debug極致更加嚴謹。

　　2. 防止預設的全域變數：在正常模式下，為一個已宣告的變數命名將會將這個變數自動設定為全域變數。在strict模式下，我們取消了這個預設機制。

　　3. 取消this的預設轉換：在正常模式下，給this關鍵字指引到null或undefined會讓它自動轉換為全域。在strict模式下，我們取消了這個預設機制。

　　4. 防止重複的變數宣告與參數宣告：在strict模式下進行重複的變數宣告會被抱錯，如(e.g., var object = {foo: "bar", foo: "baz" };) 同時，在函數宣告中重複使用同一個參數名稱也會報錯，如(e.g., function foo(val1, val2, val1){}),

#　　5. 讓eval()函數更安全。

　　6. 當遇到無效的delete指令的事後報錯：delete指令不能對類別中未有的屬性執行，在正常情況下這種情況只是默默地忽視掉，而在strict模式是會報錯的。

　　結語

　　正如和其他的技術語言一樣，你對JavaScript了解的的越深，知道它是如何運作，為什麼這樣運作，你才會熟練地掌握並且運用這門語言。相反地​​，如果你缺少對JS模式的認知的話，你就會碰上很多的問題。了解JS的一些細節上的語法或功能將會有助於你提高程式設計的效率，減少變成中遇到的問題。

 以上就是十個JavaScript中易犯的小錯誤，你中了幾槍？的內容，更多相關內容請關注PHP中文網（www.php.cn）！

#