- 相關(guān)推薦
JavaScript中易犯的10個(gè)小錯誤
在今天，JavaScript已經(jīng)成為了。網(wǎng)頁(yè)編輯的核心。尤其是過(guò)去的幾年，互聯(lián)網(wǎng)見(jiàn)證了在SPA開(kāi)發(fā)、圖形處理、交互等方面大量JS庫的出現。下面YJBYS小編為你介紹10個(gè)JavaScript中易犯的小錯誤。
如果初次打交道，很多人會(huì )覺(jué)得js很簡(jiǎn)單。確實(shí)，對于很多有經(jīng)驗的工程師，或者甚至是初學(xué)者而言，實(shí)現基本的js功能幾乎毫無(wú)障礙。但是JS的真實(shí)功能卻比很多人想象的要更加多樣、復雜。JavaScript的許多細節規定會(huì )讓你的網(wǎng)頁(yè)出現很多意想不到的bug，搞懂這些bug，對于成為一位有經(jīng)驗的JS開(kāi)發(fā)者很重要。
常見(jiàn)錯誤一：對于this關(guān)鍵詞的不正確引用
我曾經(jīng)聽(tīng)一位喜劇演員說(shuō)過(guò)：
“我從未在這里，因為我不清楚這里是哪里，是除了那里之外的地方嗎?”
這句話(huà)或多或少地暗喻了在js開(kāi)發(fā)中開(kāi)發(fā)者對于this關(guān)鍵字的使用誤區。This指代的是什么?它和日常英語(yǔ)口語(yǔ)中的this是一個(gè)意思嗎?
隨著(zhù)近些年js編程不斷地復雜化，功能多樣化，對于一個(gè)程序結構的內部指引、引用也逐漸變多起來(lái)
下面讓我們一起來(lái)看這一段代碼：
Game.prototype.restart = function () { this.clearLocalStorage();
this.timer = setTimeout(function(){ this.clearBoard(); }, 0);
};
運行上面的代碼將會(huì )出現如下錯誤：
Uncaught TypeError: undefined is not a function
這是為什么?this的調用和它所在的環(huán)境密切相關(guān)。之所以會(huì )出現上面的錯誤，是因為當你在調用 setTimeout()函數的時(shí)候, 你實(shí)際調用的是window.setTimeout(). 因此，在 setTimeout() 定義的函數其實(shí)是在window背景下定義的，而window中并沒(méi)有 clearBoard() 這個(gè)函數方法。
下面提供兩種解決方案。第一種比較簡(jiǎn)單直接的方法便是，把this存儲到一個(gè)變量當中，這樣他就可以在不同的環(huán)境背景中被繼承下來(lái)：
Game.prototype.restart = function () { this.clearLocalStorage();
var self = this;
this.timer = setTimeout(function(){ self.clearBoard();}, 0); };
第二種方法便是用bind()的方法，不過(guò)這個(gè)相比上一種要復雜一些，對于不熟悉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。
常見(jiàn)錯誤二：傳統編程語(yǔ)言的生命周期誤區
另一種易犯的錯誤，便是帶著(zhù)其他編程語(yǔ)言的思維，認為在JS中，也存在生命周期這么一說(shuō)。請看下面的代碼：
for (var i = 0; i < 10; i++) { /* ... */ } console.log(i);
如果你認為在運行console.log() 時(shí)肯定會(huì )報出 undefined 錯誤，那么你就大錯特錯了。我會(huì )告訴你其實(shí)它會(huì )返回 10嗎。
當然，在許多其他語(yǔ)言當中，遇到這樣的代碼，肯定會(huì )報錯。因為i明顯已經(jīng)超越了它的生命周期。在for中定義的變量在循環(huán)結束后，它的生命也就結束了。但是在js中，i的生命還會(huì )繼續。這種現象叫做 variable hoisting。
而如果我們想要實(shí)現和其他語(yǔ)言一樣的在特定邏輯模塊中具有生命周期的變量，可以用let關(guān)鍵字。
常見(jiàn)錯誤三：內存泄露
內存泄露在js變成中幾乎是一個(gè)無(wú)法避免的問(wèn)題。如果不是特別細心的話(huà)，在最后的檢查過(guò)程中，肯定會(huì )出現各種內存泄露問(wèn)題。下面我們就來(lái)舉例說(shuō)明一下：
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);
如果運行上面的代碼，你會(huì )發(fā)現你已經(jīng)造成了大量的內存泄露，每秒泄露1M的內存，顯然光靠GC(垃圾回收器)是無(wú)法幫助你的了。由上面的代碼來(lái)看，似乎是longstr在每次replaceThing調用的時(shí)候都沒(méi)有得到回收。這是為什么呢?
每一個(gè)theThing結構都含有一個(gè)longstr結構列表。每一秒當我們調用 replaceThing, 它就會(huì )把當前的指向傳遞給 priorThing. 但是到這里我們也會(huì )看到并沒(méi)有什么問(wèn)題，因為 priorThing 每回也是先解開(kāi)上次函數的指向才會(huì )接受新的賦值。并且所有的這一切都是發(fā)生在 replaceThing 函數體當中，按常理來(lái)說(shuō)當函數體結束之后，函數中的本地變量也將會(huì )被GC回收，也就不會(huì )出現內存泄露的問(wèn)題了，但是為什么會(huì )出現上面的錯誤呢?
這是因為longstr的定義是在一個(gè)閉包中進(jìn)行的，而它又被其他的閉包所引用，js規定，在閉包中引入閉包外部的變量時(shí)，當閉包結束時(shí)此對象無(wú)法被垃圾回收(GC)。關(guān)于在JS中的內存泄露問(wèn)題可以查看http://javascript.info/tutorial/memory-leaks#memory-management-in-javascript
常見(jiàn)錯誤四:比較運算符
JavaScript中一個(gè)比較便捷的地方，便是它可以給每一個(gè)在比較運算的結果變量強行轉化成布爾類(lèi)型。但是從另一方面來(lái)考慮，有時(shí)候它也會(huì )為我們帶來(lái)很多不便，下面的這些例子便是一些一直困擾很多程序員的代碼實(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ì )被人誤認為轉化為false)，但是其實(shí)不管是{ }還是[ ]都是一個(gè)實(shí)體類(lèi)，而任何的類(lèi)其實(shí)都會(huì )轉化為true。就像這些例子所展示的那樣，其實(shí)有些類(lèi)型強制轉化非常模糊。因此很多時(shí)候我們更愿意用 === 和 !== 來(lái)替代== 和 !=， 以此來(lái)避免發(fā)生強制類(lèi)型轉化。. ===和!== 的用法和之前的== 和 != 一樣，只不過(guò)他們不會(huì )發(fā)生類(lèi)型強制轉換。另外需要注意的一點(diǎn)是，當任何值與 NaN 比較的時(shí)候，甚至包括他自己，結果都是false。因此我們不能用簡(jiǎn)單的比較字符來(lái)決定一個(gè)值是否為 NaN 。我們可以用內置的 isNaN() 函數來(lái)辨別:
console.log(NaN == NaN); // false
console.log(NaN === NaN); // false
console.log(isNaN(NaN)); // true
常見(jiàn)錯誤五：低效的DOM操作
js中的DOM基本操作非常簡(jiǎn)單，但是如何能有效地進(jìn)行這些操作一直是一個(gè)難題。這其中最典型的問(wèn)題便是批量增加DOM元素。增加一個(gè)DOM元素是一步花費很大的操作。而批量增加對系統的花銷(xiāo)更是不菲。一個(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 )建出來(lái)，再把它們全部添加上去就會(huì )高效很多。
常見(jiàn)錯誤6:在for循環(huán)中的不正確函數調用
請大家看以下代碼：
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è)面上有10個(gè)按鈕的話(huà)，點(diǎn)擊每一個(gè)按鈕都會(huì )彈出 “This is element #10”! 。這和我們原先預期的并不一樣。這是因為當點(diǎn)擊事件被觸發(fā)的時(shí)候，for循環(huán)早已執行完畢，i的值也已經(jīng)從0變成了。
我們可以通過(guò)下面這段代碼來(lái)實(shí)現真正正確的效果：
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ì )被立即執行，把i+1傳遞給變量num。外面的函數返回里面的函數，而點(diǎn)擊事件函數便被設置為里面的函數。這樣每個(gè)觸發(fā)函數就都能夠是用正確的i值了。
常見(jiàn)錯誤7:原型繼承問(wèn)題
很大一部分的js開(kāi)發(fā)者都不能完全掌握原型的繼承問(wèn)題。下面具一個(gè)例子來(lái)說(shuō)明：
BaseObject = function(name) {
if(typeof name !== "undefined")
{ this.name = name; }
else
{ this.name = 'default' } };
這段代碼看起來(lái)很簡(jiǎn)單。如果你有name值，則使用它。如果沒(méi)有，則使用 ‘default’:
var firstObj = new BaseObject();
var secondObj = new BaseObject('unique');
console.log(firstObj.name); // -> 結果是'default'
console.log(secondObj.name); // -> 結果是 'unique'
但是如果我們執行delete語(yǔ)句呢:
delete secondObj.name;
我們會(huì )得到:
console.log(secondObj.name); // -> 結果是 'undefined'
但是如果能夠重新回到 ‘default’狀態(tài)不是更好么? 其實(shí)要想達到這樣的效果很簡(jiǎn)單，如果我們能夠使用原型繼承的話(huà):
BaseObject = function (name)
{ if(typeof name !== "undefined")
{ this.name = name; } };
BaseObject.prototype.name = 'default';
在這個(gè)版本中, BaseObject 繼承了原型中的name 屬性, 被設置為了 'default'.。這時(shí)，如果構造函數被調用時(shí)沒(méi)有參數，則會(huì )自動(dòng)設置為 default。相同地，如果name 屬性被從BaseObject移出，系統將會(huì )自動(dòng)尋找原型鏈，并且獲得 'default'值：
var thirdObj = new BaseObject('unique');
console.log(thirdObj.name);
delete thirdObj.name;
console.log(thirdObj.name); // -> 結果是 'default'
常見(jiàn)錯誤8:為實(shí)例方法創(chuàng )建錯誤的指引
我們來(lái)看下面一段代碼:
var MyObject = function() {}
MyObject.prototype.whoAmI = function() {
console.log(this === window ? "window" : "MyObj"); };
var obj = new MyObject();
現在為了方便起見(jiàn)，我們新建一個(gè)變量來(lái)指引 whoAmI 方法, 因此我們可以直接用 whoAmI() 而不是更長(cháng)的obj.whoAmI():
var whoAmI = obj.whoAmI;
接下來(lái)為了確保一切都如我們所預測的進(jìn)行，我們可以將 whoAmI 打印出來(lái):
console.log(whoAmI);
結果是：
function () { console.log(this === window ? "window" : "MyObj"); }
沒(méi)有錯誤!
但是現在我們來(lái)查看一下兩種引用的方法：
obj.whoAmI(); // 輸出 "MyObj" (as expected)
whoAmI(); // 輸出 "window" (uh-oh!)
哪里出錯了呢?
原理其實(shí)和上面的第二個(gè)常見(jiàn)錯誤一樣，當我們執行 var whoAmI = obj.whoAmI;的時(shí)候，新的變量 whoAmI 是在全局環(huán)境下定義的。因此它的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)
常見(jiàn)錯誤9:用字符串作為setTimeout 或者 setInterval的第一個(gè)參數
首先我們要聲明，用字符串作為這兩個(gè)函數的第一個(gè)參數并沒(méi)有什么語(yǔ)法上的錯誤。但是其實(shí)這是一個(gè)非常低效的做法。因為從系統的角度來(lái)說(shuō)，當你用字符串的時(shí)候，它會(huì )被傳進(jìn)構造函數，并且重新調用另一個(gè)函數。這樣會(huì )拖慢程序的進(jìn)度。
setInterval("logTime()", 1000);
setTimeout("logMessage('" + msgValue + "')", 1000);
另一種方法是直接將函數作為參數傳遞進(jìn)去：
setInterval(logTime, 1000);
setTimeout(function() {
logMessage(msgValue); }, 1000);
常見(jiàn)錯誤10:忽略 “strict mode”的作用
“strict mode” 是一種更加嚴格的代碼檢查機制，并且會(huì )讓你的代碼更加安全。當然，不選擇這個(gè)模式并不意味著(zhù)是一個(gè)錯誤，但是使用這個(gè)模式可以確保你的代碼更加準確無(wú)誤。
下面我們總結幾條“strict mode”的優(yōu)勢：
1. 讓Debug更加容易：在正常模式下很多錯誤都會(huì )被忽視掉，“strict mode”模式會(huì )讓Debug極致更加嚴謹。
2. 防止默認的全局變量：在正常模式下，給一個(gè)為經(jīng)過(guò)聲明的變量命名將會(huì )將這個(gè)變量自動(dòng)設置為全局變量。在strict模式下，我們取消了這個(gè)默認機制。
3. 取消this的默認轉換：在正常模式下，給this關(guān)鍵字指引到null或者undefined會(huì )讓它自動(dòng)轉換為全局。在strict模式下，我們取消了這個(gè)默認機制。
4. 防止重復的變量聲明和參數聲明：在strict模式下進(jìn)行重復的變量聲明會(huì )被抱錯，如(e.g., var object = {foo: "bar", foo: "baz"};) 同時(shí)，在函數聲明中重復使用同一個(gè)參數名稱(chēng)也會(huì )報錯，如 (e.g., function foo(val1, val2, val1){}),
5. 讓eval()函數更加安全。
6. 當遇到無(wú)效的delete指令的事后報錯：delete指令不能對類(lèi)中未有的屬性執行，在正常情況下這種情況只是默默地忽視掉，而在strict模式是會(huì )報錯的。
結語(yǔ)
正如和其他的技術(shù)語(yǔ)言一樣，你對JavaScript了解的的越深，知道它是如何運作，為什么這樣運作，你才會(huì )熟練地掌握并且運用這門(mén)語(yǔ)言。相反地，如果你缺少對JS模式的認知的話(huà)，你就會(huì )碰上很多的問(wèn)題。了解JS的一些細節上的語(yǔ)法或者功能將會(huì )有助于你提高編程的效率，減少變成中遇到的問(wèn)題。
【JavaScript中易犯的10個(gè)小錯誤】相關(guān)文章：
雅思寫(xiě)作中易犯的誤區解析03-29
幼兒英語(yǔ)啟蒙中家長(cháng)易犯的錯誤03-18
CSS開(kāi)發(fā)中10個(gè)易犯的錯誤03-15
做蛋糕時(shí)容易犯的小錯誤03-17
挑球易犯的錯誤03-20
托福寫(xiě)作中易犯7大類(lèi)語(yǔ)言錯誤03-31
在Java中執行JavaScript代碼04-01