JavaScript中常見陷阱小結(jié)
更新時間：2010年04月27日 17:03:38 作者：
JavaScript中常見陷阱，都是一些實(shí)際應(yīng)用中，需要注意的地方，需要的朋友可以參考下。
你所創(chuàng)建的所有函數(shù)都是區(qū)分大小寫的
單引號('字符串')和雙引號("字符串")在JavaScript中沒有特殊的區(qū)別,都可以用來創(chuàng)建字符串.但作為一般原則,大多數(shù)WEB開發(fā)者都選擇使用單引號 而不是雙引號,因?yàn)閄HTML規(guī)范要求所有XHTML屬性值都必須使用雙引號括起來.
JavaScript不支持重載，在JavaScript中，腳本在執(zhí)行時不會顧及函數(shù)定義時的參數(shù)，而是直接使用在作用域鏈中最后定義的那個函數(shù)。這意味著，相同名稱的函數(shù)永遠(yuǎn)只存在一個實(shí)例
閉包是與作用域相關(guān)的一個概念，它指的是內(nèi)部函數(shù)即使在外部函數(shù)執(zhí)行完成并終止后，依然可以訪問其外部函數(shù)的屬性。當(dāng)引用一個變量或方法時，JavaScript會沿著由對象執(zhí)行路徑構(gòu)成使用域鏈對使用域進(jìn)行解析，查找變量最近定義的值，一旦找到即使用該值。function initAnchors(event){
for (var i=1; i <=3; i++){
var anchor = document.GetElementById('anchor' + i);
anchor.attachEvent('onclick', function() {
alert('my id is anchor' + i);
});
}
}
假設(shè)頁面中有三個A元素，ID分別為anchor1到anchor3，程序?yàn)槿齻€A元素注冊onclick事件，單擊第個A元素顯示"my id is anchorX"，但實(shí)際運(yùn)行情況卻不是這樣，單擊每個A元素都顯示"my id is anchor4"。為什么會這樣呢，因?yàn)閕的值實(shí)際上是在單擊事件發(fā)生時才從使用域鏈中取得的，當(dāng)單擊事件發(fā)生時，initAnchors()已執(zhí)行完畢，此時i的值等于4。解決方法可以按如下
function registerAnchorListner(anchor,i){
anchor.attachEvent('onclick', function() {
alert('my id is anchor' + i);
}
}
function initAnchors(event){
for (var i=1; i <=3; i++){
var anchor = document.GetElementById('anchor' + i);
registerAnchorListner(anchor,i);
}
}
var anchor = document.GetElementById('anchor' + i);
anchor.attachEvent('onclick', function() {
alert('my id is anchor' + i);
});
迭代對象,在編寫腳本時經(jīng)常使用到迭代，如下：
var list = [1,2,3,4];
for(var i = 0;i < list.length; i++){
alert(list);
}
另一種可供選擇的迭代方法是使用for循環(huán)遍歷位于(in)list中的每個屬性：
for(var i in list){
alert(list);
}
此時，得到的是與使用前一迭代方法相同的結(jié)果，因?yàn)閘ist是一個Array對象。
但是，當(dāng)使用for(var i in item)方法操縱類似數(shù)組而又不是數(shù)組的對象時一定要格外小心，如下
var all=document.getElementsByTagName('*');
for(var i in all){
//對照all元素進(jìn)行某些操作
}
在這次的迭代過程中，i的值會分別等于length、item和namedItem，而這很可能會導(dǎo)致代碼中出現(xiàn)意外錯誤。在某些情況下，可以使用對象的hasOwnProperty()方法來避免這個問題。如果對象的屬性或方法是非繼承的，那么hasOwnProperty()方法返回true。即這里的檢查不涉及從其它對象繼承的屬性和方法，只會檢查在特定對象自身中直接創(chuàng)建的屬性，比如分配給數(shù)組的元素。因此，在如果在for循環(huán)中使用這種檢查，那么循環(huán)將會跳過length這樣屬性，因?yàn)閘ength不是數(shù)組all的真系屬性，而是從派生數(shù)組all的NameNodeMap對象中繼承的屬性
var all=document.getElementsByTagName('*');
for(var i in all){
if(!all.hasOwnProperty(i)) continue;
//對照all元素進(jìn)行某些操作
}
單引號('字符串')和雙引號("字符串")在JavaScript中沒有特殊的區(qū)別,都可以用來創(chuàng)建字符串.但作為一般原則,大多數(shù)WEB開發(fā)者都選擇使用單引號 而不是雙引號,因?yàn)閄HTML規(guī)范要求所有XHTML屬性值都必須使用雙引號括起來.
JavaScript不支持重載，在JavaScript中，腳本在執(zhí)行時不會顧及函數(shù)定義時的參數(shù)，而是直接使用在作用域鏈中最后定義的那個函數(shù)。這意味著，相同名稱的函數(shù)永遠(yuǎn)只存在一個實(shí)例
閉包是與作用域相關(guān)的一個概念，它指的是內(nèi)部函數(shù)即使在外部函數(shù)執(zhí)行完成并終止后，依然可以訪問其外部函數(shù)的屬性。當(dāng)引用一個變量或方法時，JavaScript會沿著由對象執(zhí)行路徑構(gòu)成使用域鏈對使用域進(jìn)行解析，查找變量最近定義的值，一旦找到即使用該值。function initAnchors(event){
復(fù)制代碼 代碼如下:
for (var i=1; i <=3; i++){
var anchor = document.GetElementById('anchor' + i);
anchor.attachEvent('onclick', function() {
alert('my id is anchor' + i);
});
}
}
假設(shè)頁面中有三個A元素，ID分別為anchor1到anchor3，程序?yàn)槿齻€A元素注冊onclick事件，單擊第個A元素顯示"my id is anchorX"，但實(shí)際運(yùn)行情況卻不是這樣，單擊每個A元素都顯示"my id is anchor4"。為什么會這樣呢，因?yàn)閕的值實(shí)際上是在單擊事件發(fā)生時才從使用域鏈中取得的，當(dāng)單擊事件發(fā)生時，initAnchors()已執(zhí)行完畢，此時i的值等于4。解決方法可以按如下
復(fù)制代碼 代碼如下:
function registerAnchorListner(anchor,i){
anchor.attachEvent('onclick', function() {
alert('my id is anchor' + i);
}
}
function initAnchors(event){
for (var i=1; i <=3; i++){
var anchor = document.GetElementById('anchor' + i);
registerAnchorListner(anchor,i);
}
}
var anchor = document.GetElementById('anchor' + i);
anchor.attachEvent('onclick', function() {
alert('my id is anchor' + i);
});
迭代對象,在編寫腳本時經(jīng)常使用到迭代，如下：
復(fù)制代碼 代碼如下:
var list = [1,2,3,4];
for(var i = 0;i < list.length; i++){
alert(list);
}
另一種可供選擇的迭代方法是使用for循環(huán)遍歷位于(in)list中的每個屬性：
復(fù)制代碼 代碼如下:
for(var i in list){
alert(list);
}
此時，得到的是與使用前一迭代方法相同的結(jié)果，因?yàn)閘ist是一個Array對象。
但是，當(dāng)使用for(var i in item)方法操縱類似數(shù)組而又不是數(shù)組的對象時一定要格外小心，如下
復(fù)制代碼 代碼如下:
var all=document.getElementsByTagName('*');
for(var i in all){
//對照all元素進(jìn)行某些操作
}
在這次的迭代過程中，i的值會分別等于length、item和namedItem，而這很可能會導(dǎo)致代碼中出現(xiàn)意外錯誤。在某些情況下，可以使用對象的hasOwnProperty()方法來避免這個問題。如果對象的屬性或方法是非繼承的，那么hasOwnProperty()方法返回true。即這里的檢查不涉及從其它對象繼承的屬性和方法，只會檢查在特定對象自身中直接創(chuàng)建的屬性，比如分配給數(shù)組的元素。因此，在如果在for循環(huán)中使用這種檢查，那么循環(huán)將會跳過length這樣屬性，因?yàn)閘ength不是數(shù)組all的真系屬性，而是從派生數(shù)組all的NameNodeMap對象中繼承的屬性
復(fù)制代碼 代碼如下:
var all=document.getElementsByTagName('*');
for(var i in all){
if(!all.hasOwnProperty(i)) continue;
//對照all元素進(jìn)行某些操作
}
相關(guān)文章
當(dāng)一個元素上的事件被觸發(fā)的時候，比如說鼠標(biāo)點(diǎn)擊了一個按鈕，同樣的事件將會在那個元素的所有祖先元素中被觸發(fā)2013-01-01
javascript中的startWith和endWith的幾種實(shí)現(xiàn)方法
javascript中的startWith和endWith的幾種實(shí)現(xiàn)方法，需要的朋友可以參考一下2013-05-05
這篇文章主要介紹了JS中使用變量保存arguments對象的方法的相關(guān)資料,非常不錯具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
本篇文章給大家詳細(xì)分析了javascript數(shù)組拍平的方法，對此有興趣的朋友跟著小編一起學(xué)習(xí)下吧。2018-01-01
javascript各種形式的復(fù)制代碼效果，有直接復(fù)制url，復(fù)制文本框中的內(nèi)容、隱藏表單中的內(nèi)容，復(fù)制span中的內(nèi)容2008-09-09
基于javascript實(shí)現(xiàn)貪吃蛇經(jīng)典小游戲
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)貪吃蛇小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
JavaScript實(shí)現(xiàn)網(wǎng)頁播放器
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)網(wǎng)頁播放器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
簡單三步實(shí)現(xiàn)報(bào)表頁面集成天氣
本文主要介紹了基于javascript實(shí)現(xiàn)報(bào)表頁面集成天氣的方法步驟，簡單三步，一看就懂。具有很好的參考價(jià)值，需要的朋友一起來看下吧2016-12-12
JavaScript使用setTimeout實(shí)現(xiàn)倒計(jì)時效果
這篇文章主要為大家詳細(xì)介紹了JavaScript使用setTimeout實(shí)現(xiàn)倒計(jì)時效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-02-02
這篇文章主要給大家介紹了關(guān)于怎么使用js計(jì)算當(dāng)前一周的日期的相關(guān)資料,我們可以使用JavaScript的Date對象來獲取近一周的日期,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下2023-09-09