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

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

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

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

“我從未在這里，因?yàn)槲也磺宄@里是哪里，是除了那里之外的地方嗎？”

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

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

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

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

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

 };

運(yùn)行上面的代碼將會(huì)出現(xiàn)如下錯(cuò)誤：

Uncaught TypeError: undefined is not a function

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

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

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

    var self = this;

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

第二種方法便是用bind()的方法，不過這個(gè)相比上一種要復(fù)雜一些，對(duì)于不熟悉bind()的同學(xué)可以在微軟官方查看它的使用方法：https://msdn.microsoft.com/zh-cn/library/ff841995

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

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

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

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

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

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

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

如果你認(rèn)為在運(yùn)行console.log() 時(shí)肯定會(huì)報(bào)出 undefined 錯(cuò)誤，那么你就大錯(cuò)特錯(cuò)了。我會(huì)告訴你其實(shí)它會(huì)返回 10嗎。

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

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

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

內(nèi)存泄露在js變成中幾乎是一個(gè)無法避免的問題。如果不是特別細(xì)心的話，在最后的檢查過程中，肯定會(huì)出現(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);

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

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

這是因?yàn)閘ongstr的定義是在一個(gè)閉包中進(jìn)行的，而它又被其他的閉包所引用，js規(guī)定，在閉包中引入閉包外部的變量時(shí)，當(dāng)閉包結(jié)束時(shí)此對(duì)象無法被垃圾回收（GC）。關(guān)于在JS中的內(nèi)存泄露問題可以查看http://javascript.info/tutorial/memory-leaks#memory-management-in-javascript

常見錯(cuò)誤四:比較運(yùn)算符

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

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

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

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

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

常見錯(cuò)誤五：低效的DOM操作

js中的DOM基本操作非常簡單，但是如何能有效地進(jìn)行這些操作一直是一個(gè)難題。這其中最典型的問題便是批量增加DOM元素。增加一個(gè)DOM元素是一步花費(fèi)很大的操作。而批量增加對(duì)系統(tǒng)的花銷更是不菲。一個(gè)比較好的批量增加的辦法便是使用 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元素是一個(gè)非常昂貴的操作。但是如果是先把要添加的元素全部創(chuàng)建出來，再把它們?nèi)刻砑由先ゾ蜁?huì)高效很多。

常見錯(cuò)誤6:在for循環(huán)中的不正確函數(shù)調(diào)用

請(qǐng)大家看以下代碼：

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

運(yùn)行以上代碼，如果頁面上有10個(gè)按鈕的話，點(diǎn)擊每一個(gè)按鈕都會(huì)彈出 “This is element #10”! 。這和我們?cè)阮A(yù)期的并不一樣。這是因?yàn)楫?dāng)點(diǎn)擊事件被觸發(fā)的時(shí)候，for循環(huán)早已執(zhí)行完畢，i的值也已經(jīng)從0變成了。

我們可以通過下面這段代碼來實(shí)現(xiàn)真正正確的效果：

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

在這個(gè)版本的代碼中， makeHandler 在每回循環(huán)的時(shí)候都會(huì)被立即執(zhí)行，把i＋1傳遞給變量num。外面的函數(shù)返回里面的函數(shù)，而點(diǎn)擊事件函數(shù)便被設(shè)置為里面的函數(shù)。這樣每個(gè)觸發(fā)函數(shù)就都能夠是用正確的i值了。

常見錯(cuò)誤7:原型繼承問題

很大一部分的js開發(fā)者都不能完全掌握原型的繼承問題。下面具一個(gè)例子來說明：

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);  // -> 結(jié)果是'default' 

console.log(secondObj.name); // -> 結(jié)果是 'unique'

但是如果我們執(zhí)行delete語句呢:

delete secondObj.name;

我們會(huì)得到:

console.log(secondObj.name); // -> 結(jié)果是 'undefined'

但是如果能夠重新回到 ‘default’狀態(tài)不是更好么? 其實(shí)要想達(dá)到這樣的效果很簡單，如果我們能夠使用原型繼承的話:

BaseObject = function (name) 

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

{         this.name = name;     } };  

BaseObject.prototype.name = 'default';

在這個(gè)版本中, BaseObject 繼承了原型中的name 屬性, 被設(shè)置為了 ‘default’.。這時(shí)，如果構(gòu)造函數(shù)被調(diào)用時(shí)沒有參數(shù)，則會(huì)自動(dòng)設(shè)置為 default。相同地，如果name 屬性被從BaseObject移出，系統(tǒng)將會(huì)自動(dòng)尋找原型鏈，并且獲得 ‘default’值：

var thirdObj = new BaseObject('unique'); 

 console.log(thirdObj.name);  

 delete thirdObj.name;

 console.log(thirdObj.name);  // -> 結(jié)果是 'default'

常見錯(cuò)誤8:為實(shí)例方法創(chuàng)建錯(cuò)誤的指引

我們來看下面一段代碼:

var MyObject = function() {} 

 MyObject.prototype.whoAmI = function() {     

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

 var obj = new MyObject();

現(xiàn)在為了方便起見，我們新建一個(gè)變量來指引 whoAmI 方法, 因此我們可以直接用 whoAmI() 而不是更長的obj.whoAmI():

var whoAmI = obj.whoAmI;

接下來為了確保一切都如我們所預(yù)測的進(jìn)行，我們可以將 whoAmI 打印出來:

console.log(whoAmI);

結(jié)果是：

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

沒有錯(cuò)誤！

但是現(xiàn)在我們來查看一下兩種引用的方法：

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

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

哪里出錯(cuò)了呢？

原理其實(shí)和上面的第二個(gè)常見錯(cuò)誤一樣，當(dāng)我們執(zhí)行 var whoAmI = obj.whoAmI;的時(shí)候，新的變量 whoAmI 是在全局環(huán)境下定義的。因此它的this 是指window, 而不是obj！

正確的編碼方式應(yīng)該是：

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)

常見錯(cuò)誤9:用字符串作為setTimeout 或者 setInterval的第一個(gè)參數(shù)

首先我們要聲明，用字符串作為這兩個(gè)函數(shù)的第一個(gè)參數(shù)并沒有什么語法上的錯(cuò)誤。但是其實(shí)這是一個(gè)非常低效的做法。因?yàn)閺南到y(tǒng)的角度來說，當(dāng)你用字符串的時(shí)候，它會(huì)被傳進(jìn)構(gòu)造函數(shù)，并且重新調(diào)用另一個(gè)函數(shù)。這樣會(huì)拖慢程序的進(jìn)度。

setInterval("logTime()", 1000); 

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

另一種方法是直接將函數(shù)作為參數(shù)傳遞進(jìn)去：

setInterval(logTime, 1000);   

setTimeout(function() { 

logMessage(msgValue); }, 1000);

常見錯(cuò)誤10:忽略 “strict mode”的作用

“strict mode” 是一種更加嚴(yán)格的代碼檢查機(jī)制，并且會(huì)讓你的代碼更加安全。當(dāng)然，不選擇這個(gè)模式并不意味著是一個(gè)錯(cuò)誤，但是使用這個(gè)模式可以確保你的代碼更加準(zhǔn)確無誤。

下面我們總結(jié)幾條“strict mode”的優(yōu)勢：

1. 讓Debug更加容易：在正常模式下很多錯(cuò)誤都會(huì)被忽視掉，“strict mode”模式會(huì)讓Debug極致更加嚴(yán)謹(jǐn)。
2. 防止默認(rèn)的全局變量：在正常模式下，給一個(gè)為經(jīng)過聲明的變量命名將會(huì)將這個(gè)變量自動(dòng)設(shè)置為全局變量。在strict模式下，我們?nèi)∠诉@個(gè)默認(rèn)機(jī)制。
3. 取消this的默認(rèn)轉(zhuǎn)換：在正常模式下，給this關(guān)鍵字指引到null或者undefined會(huì)讓它自動(dòng)轉(zhuǎn)換為全局。在strict模式下，我們?nèi)∠诉@個(gè)默認(rèn)機(jī)制。
4. 防止重復(fù)的變量聲明和參數(shù)聲明：在strict模式下進(jìn)行重復(fù)的變量聲明會(huì)被抱錯(cuò)，如(e.g., var object = {foo: “bar”, foo: “baz”};) 同時(shí)，在函數(shù)聲明中重復(fù)使用同一個(gè)參數(shù)名稱也會(huì)報(bào)錯(cuò)，如 (e.g., function foo(val1, val2, val1){}),
5. 讓eval()函數(shù)更加安全。
6. 當(dāng)遇到無效的delete指令的事后報(bào)錯(cuò)：delete指令不能對(duì)類中未有的屬性執(zhí)行，在正常情況下這種情況只是默默地忽視掉，而在strict模式是會(huì)報(bào)錯(cuò)的。

結(jié)語

正如和其他的技術(shù)語言一樣，你對(duì)JavaScript了解的的越深，知道它是如何運(yùn)作，為什么這樣運(yùn)作，你才會(huì)熟練地掌握并且運(yùn)用這門語言。相反地，如果你缺少對(duì)JS模式的認(rèn)知的話，你就會(huì)碰上很多的問題。了解JS的一些細(xì)節(jié)上的語法或者功能將會(huì)有助于你提高編程的效率，減少變成中遇到的問題。

 

轉(zhuǎn)自:1ke.co，原文鏈接:toptal