51CTO推薦專題：JavaScript學(xué)習(xí)筆記 有問有答

1. for.. 數(shù)組迭代的用法 Usage of for..in to iterate Arrays

舉例：

var myArray = [ “a”, “b”, “c” ];  
var totalElements = myArray.length;  
for (var i = 0; i < totalElements; i++) {  
   console.log(myArray[i]);  
} 

這里主要的問題是語句中的“for..."不能保證順序，這意味著你將獲得不同的執(zhí)行結(jié)果。此外，如果有人增加一些其他自定義功能的函數(shù)Array.prototype，你的循環(huán)將重復(fù)遍歷這些函數(shù)，就像原數(shù)組項(xiàng)。

解決辦法：一直使用規(guī)則的for循環(huán)來遍歷數(shù)組。

var myArray = [ “a”, “b”, “c” ];  
for (var i=0; i<myArray.length; i++) {  
    console.log(myArray[i]);  
} 

2. 數(shù)組維度 Array dimensions

舉例

var myArray = new Array(10); 

這里有兩個(gè)不同的問題。首先，開發(fā)者嘗試創(chuàng)建一個(gè)包含10項(xiàng)的數(shù)組，這將創(chuàng)建10個(gè)空槽的陣列。然而，如果你試圖得到一數(shù)組項(xiàng)，你將得到”未定義“的結(jié)果。換句話說，效果就像你沒有保存內(nèi)存空間。沒有真正的好原因來預(yù)定義數(shù)組長度。

第二個(gè)問題是開發(fā)者使用數(shù)組構(gòu)成器來創(chuàng)建數(shù)組，技術(shù)上是正確的，然而會(huì)比文字符號(hào)(literal notation)慢

解決辦法：使用文字符號(hào)來初始化數(shù)組，不要預(yù)定義數(shù)組長度。

var myArray = []; 

3. 未定義屬性 Undefined properties

舉例：

var myObject = {  
    someProperty: “value”,  
    someOtherProperty: undefined  
} 

未定義屬性，將在對象中創(chuàng)建元素( 鍵’someOtherProperty’ 和 值 ‘undefined’.)。如果你遍歷數(shù)組，檢測已存在的元素，那么下面的語句將都返回”未定義/undefined“

typeof myObject['someOtherProperty'] // undefined

typeof myObject['unknownProperty'] // undefined

解決辦法： 如果你想明確聲明對象中的未初始化的屬性，標(biāo)記它們?yōu)镹ull(空)。

var myObject = {  
    someProperty: “value”,  
    someOtherProperty: null 
} 

4. 閉包的濫用 Misuse of Closures

舉例：

function(a, b, c) {  
    var d = 10;  
    var element = document.getElementById(‘myID’);  
    element.onclick = (function(a, b, c, d) {  
        return function() {  
            alert (a + b + c + d);  
        }  
    })(a, b, c, d);  
} 

這里開發(fā)者使用兩個(gè)函數(shù)來傳遞參數(shù)a、b、c到onclick handler。雙函數(shù)根本不需要，徒增代碼的復(fù)雜性。

變量abc已經(jīng)在局部函數(shù)中被定義，因?yàn)樗麄円呀?jīng)在主函數(shù)中作為參數(shù)被聲明。局部函數(shù)中的任何函數(shù)都可創(chuàng)建主函數(shù)中定義的所有變量的閉包。因此不需要再次傳遞它們。

解決辦法：使用閉環(huán)來簡化你的代碼。

function (a, b, c) {  
    var d = 10;  
    var element = document.getElementById(‘myID’);  
    element.onclick = function() {  
        //a, b, and c come from the outer function arguments.  
        //d come from the outer function variable declarations.  
        //and all of them are in my closure  
        alert (a + b + c + d);  
};  
} 

5. 循環(huán)中的閉包 Closures in loops

舉例：

var elements = document.getElementByTagName(‘div’);  
for (var i = 0; i<elements.length; i++) {  
    elements[i].onclick = function() {  
        alert(“Div number “ + i);  
    }  
} 

在這里例子里面，當(dāng)用戶點(diǎn)擊不同的divs時(shí)，我們想觸發(fā)一個(gè)動(dòng)作(顯示“Div number 1”, “Div number 2”… 等) 。然而，如果你在頁面有10個(gè)divs，他們?nèi)慷紩?huì)顯示 “Div number 10”。

問題是當(dāng)我們使用局部函數(shù)創(chuàng)建一個(gè)閉包時(shí)，函數(shù)中的代碼可以訪問變量i。關(guān)鍵是函數(shù)內(nèi)部i和函數(shù)外部i涉及同樣的變量。當(dāng)我們的循環(huán)結(jié)束，i指向了值10，所以局部函數(shù)中的i的值將是10。

解決辦法：使用第二函數(shù)來傳遞正確的值。

var elements = document.getElementsByTagName(‘div’);  
for (var i = 0; i<elements.length; i++) {  
    elements[i].onclick = (function(idx) { //Outer function  
        return function() { //Inner function  
            alert(“Div number “ + idx);  
        }  
    })(i);  
} 

6. DOM對象的內(nèi)測泄漏 Memory leaks with DOM objects

舉例：

function attachEvents() {  
    var element = document.getElementById(‘myID’);  
    element.onclick = function() {  
        alert(“Element clicked”);  
    }  
};  
attachEvents(); 

該代碼創(chuàng)建了一個(gè)引用循環(huán)。變量元素包含函數(shù)的引用(歸于onclick屬性)。同時(shí)，函數(shù)保持一個(gè)DOM元素的引用(提示函數(shù)內(nèi)部可以訪問元素， 因?yàn)殚]包。)。所以JavaScript垃圾收集器不能清除元素或是函數(shù)，因?yàn)樗麄儽幌嗷ヒ?。大部分的JavaScript引擎對于清除循環(huán)應(yīng)用都不夠 聰明。

解決辦法：避免那些閉包，或者不去做函數(shù)內(nèi)的循環(huán)引用。

function attachEvents() {  
    var element = document.getElementById(‘myID’);  
    element.onclick = function() {  
        //Remove element, so function can be collected by GC  
        delete element;  
        alert(“Element clicked”);  
    }  
};  
attachEvents(); 

#p#

7. 區(qū)別整數(shù)數(shù)字和浮點(diǎn)數(shù)字 Differentiate float numbers from integer numbers

舉例：

var myNumber = 3.5;  
var myResult = 3.5 + 1.0; //We use .0 to keep the result as float 

在JavaScript中，浮點(diǎn)與整數(shù)間沒有區(qū)別。事實(shí)上，JavaScript中的每個(gè)數(shù)字都表示使用雙精度64位格式IEEE 754。簡單理解，所有數(shù)字都是浮點(diǎn)。

解決辦法：不要使用小數(shù)(decimals)，轉(zhuǎn)換數(shù)字(numbers)到浮點(diǎn)(floats)。

var myNumber = 3.5;  
var myResult = 3.5 + 1; //Result is 4.5, as expected 

8. with()作為快捷方式的用法 Usage of with() as a shortcut

舉例：

team.attackers.myWarrior = { attack: 1, speed: 3, magic: 5};  
with (team.attackers.myWarrior){  
    console.log ( “Your warrior power is ” + (attack * speed));  
} 

討論with()之前，要明白JavaScript contexts 如何工作的。每個(gè)函數(shù)都有一個(gè)執(zhí)行 context(語句)，簡單來說，包括函數(shù)可以訪問的所有的變量。因此 context 包含 arguments 和定義變量。

with() 真正是做什么?是插入對象到 context 鏈，它在當(dāng)前 context 和父級(jí) context間植入。就像你看到的with()的快捷方式會(huì)非常慢。

解決辦法：不要使用with() for shortcuts，僅for context injection，如果你確實(shí)需要時(shí)。

team.attackers.myWarrior = { attack: 1, speed: 3, magic: 5};  
var sc = team.attackers.myWarrior;  
console.log(“Your warrior power is ” + (sc.attack * sc.speed)); 

9.setTimeout/setInterval 字符串的用法 Usage of strings with setTimeout/setInterval

舉例：

function log1() { console.log(document.location); }  
function log2(arg) { console.log(arg); }  
var myValue = “test”;  
setTimeout(“log1()”, 100);  
setTimeout(“log2(” + myValue + “)”, 200); 

setTimeout() 和 setInterval() 可被或一個(gè)函數(shù)或一個(gè)字符串作為首個(gè)參數(shù)。如果你傳遞一個(gè)字符串，引擎將創(chuàng)建一個(gè)新函數(shù)(使用函數(shù)構(gòu)造器)，這在一些瀏覽器中會(huì)非常慢。相反，傳遞函數(shù)本身作為首個(gè)參數(shù)，更快、更強(qiáng)大、更干凈。

解決辦法： 一定不要使用 strings for setTimeout() 或 setInterval()。

function log1() { console.log(document.location); }  
function log2(arg) { console.log(arg); }  
var myValue = “test”;  
setTimeout(log1, 100); //Reference to a function  
setTimeout(function(){ //Get arg value using closures  
    log2(arg);  
}, 200); 

10.setInterval() 的用法 Usage of setInterval() for heavy functions

舉例：

function domOperations() {  
    //Heavy DOM operations, takes about 300ms  
}  
setInterval(domOperations, 200); 

setInterval() 將一函數(shù)列入計(jì)劃被執(zhí)行，僅是在沒有另外一個(gè)執(zhí)行在主執(zhí)行隊(duì)列中等待。JavaScript 引擎只增加下一個(gè)執(zhí)行到隊(duì)列如果沒有另外一個(gè)執(zhí)行已在隊(duì)列。這可能導(dǎo)致跳過執(zhí)行或者運(yùn)行2個(gè)不同的執(zhí)行，沒有在它們之間等待200ms的情況下。

一定要搞清，setInterval() 沒有考慮進(jìn)多長時(shí)間domOperations() 來完成任務(wù)。

解決辦法：避免 setInterval()，使用 setTimeout()

function domOperations() {  
    //Heavy DOM operations, takes about 300ms  
    //After all the job is done, set another timeout for 200 ms  
    setTimeout(domOperations, 200);  
}  
setTimeout(domOperations, 200); 

11. ”this“的濫用 Misuse of ‘this’

這個(gè)常用錯(cuò)誤，沒有例子，因?yàn)榉浅ｋy創(chuàng)建來演示。this的值在JavaScript中與其他語言有很大的不同。

函數(shù)中的this值被定義是在當(dāng)函數(shù)被調(diào)用時(shí)，而非聲明的時(shí)間，這一點(diǎn)非常重要。下面的案例中，函數(shù)內(nèi)this有不同的含義。

* Regular function: myFunction(‘arg1’);

this points to the global object, wich is window for all browers.

* Method: someObject.myFunction(‘arg1’);

this points to object before the dot, someObject in this case.

* Constructor: var something = new myFunction(‘arg1’);

this points to an empty Object.

* Using call()/apply(): myFunction.call(someObject, ‘arg1’);

this points to the object passed as first argument.

12. eval()訪問動(dòng)態(tài)屬性的用法 Usage of eval() to access dynamic properties

舉例：

var myObject = { p1: 1, p2: 2, p3: 3};  
var i = 2;  
var myResult = eval(‘myObject.p’+i); 

主要問題在于使用eval() 開始一個(gè)新的執(zhí)行語句，會(huì)非常的慢。

解決辦法：使用方括號(hào)表示法(square bracket notation)代替 eval()。

var myObject = { p1: 1, p2: 2, p3: 3};  
var i = 2;  
var myResult = myObject[“p”+i]; 

13. 未定義(undefined)作為變量的用法 Usage of undefined as a variable

舉例：

if ( myVar === undefined ) {  
    //Do something  
} 

在上面的例子中，未定義實(shí)際上是一變量。所有的JavaScript引擎會(huì)創(chuàng)建初始化的變量window.undefined 給未定義作為值。然而注意的是變量不僅是可讀，任何其他的代碼可以剛改它的值。很奇怪能找到window.undefined 有來自未定義的不同的值的場景，但是為什么冒險(xiǎn)呢?

解決辦法：檢查未定義時(shí)，使用typeof。

if ( typeof myVar === “undefined” ) {  
    //Do something  
} 

原文鏈接：http://my.oschina.net/qinqinbaby

【編輯推薦】

1. 泄露你的JavaScript技術(shù)很爛的五個(gè)表現(xiàn)
2. 經(jīng)典格斗游戲《街頭霸王》的JavaScript實(shí)現(xiàn)
3. 九個(gè)令人驚嘆的HTML 5和JavaScript實(shí)驗(yàn)
4. UglifyJS有個(gè)超贊的JavaScript解析器
5. 16款最流行的JavaScript框架