在今天，JavaScript已經(jīng)成為了網(wǎng)頁編輯的核心。尤其是過去的幾年，互聯(lián)網(wǎng)見-證了在SPA開發(fā)、圖形處理、交互等方面大量JS庫的出現(xiàn)。

如果初次打交道，很多人會覺得js很簡單。確實，對于很多有經(jīng)驗的工程師，或者甚至是初學(xué)者而言，實現(xiàn)基本的js功能幾乎 毫無障礙。但是JS的真實功能卻比很多人想象的要更加多樣、復(fù)雜。JavaScript的許多細節(jié)規(guī)定會讓你的網(wǎng)頁出現(xiàn)很多意想不到的bug，搞懂這些 bug，對于成為一位有經(jīng)驗的JS開發(fā)者很重要。

常見錯誤一：對于this關(guān)鍵詞的不正確引用

我曾經(jīng)聽一位喜劇演員說過：

“我從未在這里，因為我不清楚這里是哪里，是除了那里之外的地方嗎?”

這句話或多或少地暗喻了在js開發(fā)中開發(fā)者對于this關(guān)鍵字的使用誤區(qū)。This指代的是什么?它和日常英語口語中的this是一個意思嗎?

隨著近些年js編程不斷地復(fù)雜化，功能多樣化，對于一個程序結(jié)構(gòu)的內(nèi)部指引、引用也逐漸變多起來

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

Game.prototype.restart = function () { this.clearLocalStorage(); 
 
this.timer = setTimeout(function(){ this.clearBoard(); }, 0); 
 
}; 

運行上面的代碼將會出現(xiàn)如下錯誤：

Uncaught TypeError: undefined is not a function 

這 是為什么?this的調(diào)用和它所在的環(huán)境密切相關(guān)。之所以會出現(xiàn)上面的錯誤，是因為當(dāng)你在調(diào)用 setTimeout()函數(shù)的時候, 你實際調(diào)用的是window.setTimeout(). 因此，在 setTimeout() 定義的函數(shù)其實是在window背景下定義的，而window中并沒有 clearBoard() 這個函數(shù)方法。

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

Game.prototype.restart = function () { this.clearLocalStorage(); 
var self = this; 
this.timer = setTimeout(function(){ self.clearBoard();}, 0); }; 

第二種方法便是用bind()的方法，不過這個相比上一種要復(fù)雜一些，對于不熟悉bind()的同學(xué)可以在微軟官方查看它的使用方法：

Game.prototype.restart = function () { this.clearLocalStorage(); 
this.timer = setTimeout(this.reset.bind(this), 0); }; 
Game.prototype.reset = function(){ this.clearBoard();}; 

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

常見錯誤二：傳統(tǒng)編程語言的生命周期誤區(qū)

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

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

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

當(dāng)然，在許多其他語言當(dāng)中，遇到這樣的代碼，肯定會報錯。因為i明顯已經(jīng)超越了它的生命周期。在for中定義的變量在循環(huán)結(jié)束后，它的生命也就結(jié)束了。但是在js中，i的生命還會繼續(xù)。這種現(xiàn)象叫做 variable hoisting。

而如果我們想要實現(xiàn)和其他語言一樣的在特定邏輯模塊中具有生命周期的變量，可以用let關(guān)鍵字。

#p#

常見錯誤三：內(nèi)存泄露

內(nèi)存泄露在js變成中幾乎是一個無法避免的問題。如果不是特別細心的話，在最后的檢查過程中，肯定會出現(xiàn)各種內(nèi)存泄露問題。下面我們就來舉例說明一下：

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); 

如果運行上面的代碼，你會發(fā)現(xiàn)你已經(jīng)造成了大量的內(nèi)存泄露，每秒泄露1M的內(nèi)存，顯然光靠GC(垃圾回-收器)是無法幫助你的了。由上面的代碼來看，似乎是longstr在每次replaceThing調(diào)用的時候都沒有得到回-收。這是為什么呢?

每一個theThing結(jié)構(gòu)都含有一個longstr結(jié)構(gòu)列表。每一秒當(dāng)我們調(diào)用 replaceThing, 它就會把當(dāng)前的指向傳遞給 priorThing. 但是到這里我們也會看到并沒有什么問題，因為 priorThing 每回也是先解開上次函數(shù)的指向才會接受新的賦值。并且所有的這一切都是發(fā)生在 replaceThing 函數(shù)體當(dāng)中，按常理來說當(dāng)函數(shù)體結(jié)束之后，函數(shù)中的本地變量也將會被GC回-收，也就不會出現(xiàn)內(nèi)存泄露的問題了，但是為什么會出現(xiàn)上面的錯誤呢?

這是因為longstr的定義是在一個閉包中進行的，而它又被其他的閉包所引用，js規(guī)定，在閉包中引入閉包外部的變量時，當(dāng)閉包結(jié)束時此對象無法被垃圾回-收(GC)。

常見錯誤四:比較運算符

JavaScript中一個比較便捷的地方，便是它可以給每一個在比較運算的結(jié)果變量強行轉(zhuǎn)化成布爾類型。但是從另一方面來考慮，有時候它也會為我們帶來很多不便，下面的這些例子便是一些一直困擾很多程序員的代碼實例：

console.log(false == '0'); 
console.log(null == undefined); 
console.log(" \t\r\n" == 0); 
console.log('' == 0); // And these do too! 
if ({}) // ... 
if ([]) // ... 

最 后兩行的代碼雖然條件判斷為空(經(jīng)常會被人誤認為轉(zhuǎn)化為false)，但是其實不管是{ }還是[ ]都是一個實體類，而任何的類其實都會轉(zhuǎn)化為true。就像這些例子所展示的那樣，其實有些類型強制轉(zhuǎn)化非常模糊。因此很多時候我們更愿意用 === 和 !== 來替代== 和 !=， 以此來避免發(fā)生強制類型轉(zhuǎn)化。. ===和!== 的用法和之前的== 和 != 一樣，只不過他們不會發(fā)生類型強制轉(zhuǎn)換。另外需要注意的一點是，當(dāng)任何值與 NaN 比較的時候，甚至包括他自己，結(jié)果都是false。因此我們不能用簡單的比較字符來決定一個值是否為 NaN 。我們可以用內(nèi)置的 isNaN() 函數(shù)來辨別:

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

#p#

常見錯誤五：低效的DOM操作

js中的DOM基本操作非常簡單，但是如何能有效地進行這些操作一直是一個難題。這其中最典型的問題便是批量增加DOM元 素。增加一個DOM元素是一步花費很大的操作。而批量增加對系統(tǒng)的花銷更是不菲。一個比較好的批量增加的辦法便是使用 document fragments ：

var div = document.getElementsByTagName("my_div"); 
var fragment = document.createDocumentFragment(); 
for (var e = 0; e < elems.length; e++) { fragment.appendChild(elems[e]); } div.appendChild(fragment.cloneNode(true)); 

直接添加DOM元素是一個非常昂貴的操作。但是如果是先把要添加的元素全部創(chuàng)建出來，再把它們?nèi)刻砑由先ゾ蜁咝Ш芏唷?/font>

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); }; } 

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); } 

BaseObject = function(name) { 
if(typeof name !== "undefined")  
{ this.name = name; } 
else 
{ this.name = 'default' } }; 

var firstObj = new BaseObject();   
var secondObj = new BaseObject('unique');  
console.log(firstObj.name); // -> 結(jié)果是'default' 
console.log(secondObj.name); // -> 結(jié)果是 'unique' 

delete secondObj.name; 

BaseObject = function (name) 
{ if(typeof name !== "undefined") 
{ this.name = name; } }; 
BaseObject.prototype.name = 'default'; 

var thirdObj = new BaseObject('unique'); 
console.log(thirdObj.name);  
delete thirdObj.name; 
console.log(thirdObj.name); // -> 結(jié)果是 'default' 

var MyObject = function() {} 
MyObject.prototype.whoAmI = function() { 
console.log(this === window ? "window" : "MyObj"); }; 
var obj = new MyObject(); 

var whoAmI = obj.whoAmI; 

console.log(whoAmI); 

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

obj.whoAmI(); // 輸出 "MyObj" (as expected) 
whoAmI(); // 輸出 "window" (uh-oh!) 

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) 

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

setInterval(logTime, 1000); 
setTimeout(function() { 
logMessage(msgValue); }, 1000);