JavaScript中常見陷阱小結(jié)
更新時(shí)間:2010年04月27日 17:03:38 作者:
JavaScript中常見陷阱,都是一些實(shí)際應(yīng)用中,需要注意的地方,需要的朋友可以參考下。
你所創(chuàng)建的所有函數(shù)都是區(qū)分大小寫的
單引號(hào)('字符串')和雙引號(hào)("字符串")在JavaScript中沒有特殊的區(qū)別,都可以用來(lái)創(chuàng)建字符串.但作為一般原則,大多數(shù)WEB開發(fā)者都選擇使用單引號(hào) 而不是雙引號(hào),因?yàn)閄HTML規(guī)范要求所有XHTML屬性值都必須使用雙引號(hào)括起來(lái).
JavaScript不支持重載,在JavaScript中,腳本在執(zhí)行時(shí)不會(huì)顧及函數(shù)定義時(shí)的參數(shù),而是直接使用在作用域鏈中最后定義的那個(gè)函數(shù)。這意味著,相同名稱的函數(shù)永遠(yuǎn)只存在一個(gè)實(shí)例
閉包是與作用域相關(guān)的一個(gè)概念,它指的是內(nèi)部函數(shù)即使在外部函數(shù)執(zhí)行完成并終止后,依然可以訪問其外部函數(shù)的屬性。當(dāng)引用一個(gè)變量或方法時(shí),JavaScript會(huì)沿著由對(duì)象執(zhí)行路徑構(gòu)成使用域鏈對(duì)使用域進(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è)頁(yè)面中有三個(gè)A元素,ID分別為anchor1到anchor3,程序?yàn)槿齻€(gè)A元素注冊(cè)onclick事件,單擊第個(gè)A元素顯示"my id is anchorX",但實(shí)際運(yùn)行情況卻不是這樣,單擊每個(gè)A元素都顯示"my id is anchor4"。為什么會(huì)這樣呢,因?yàn)閕的值實(shí)際上是在單擊事件發(fā)生時(shí)才從使用域鏈中取得的,當(dāng)單擊事件發(fā)生時(shí),initAnchors()已執(zhí)行完畢,此時(shí)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);
});
迭代對(duì)象,在編寫腳本時(shí)經(jīng)常使用到迭代,如下:
var list = [1,2,3,4];
for(var i = 0;i < list.length; i++){
alert(list);
}
另一種可供選擇的迭代方法是使用for循環(huán)遍歷位于(in)list中的每個(gè)屬性:
for(var i in list){
alert(list);
}
此時(shí),得到的是與使用前一迭代方法相同的結(jié)果,因?yàn)閘ist是一個(gè)Array對(duì)象。
但是,當(dāng)使用for(var i in item)方法操縱類似數(shù)組而又不是數(shù)組的對(duì)象時(shí)一定要格外小心,如下
var all=document.getElementsByTagName('*');
for(var i in all){
//對(duì)照all元素進(jìn)行某些操作
}
在這次的迭代過程中,i的值會(huì)分別等于length、item和namedItem,而這很可能會(huì)導(dǎo)致代碼中出現(xiàn)意外錯(cuò)誤。在某些情況下,可以使用對(duì)象的hasOwnProperty()方法來(lái)避免這個(gè)問題。如果對(duì)象的屬性或方法是非繼承的,那么hasOwnProperty()方法返回true。即這里的檢查不涉及從其它對(duì)象繼承的屬性和方法,只會(huì)檢查在特定對(duì)象自身中直接創(chuàng)建的屬性,比如分配給數(shù)組的元素。因此,在如果在for循環(huán)中使用這種檢查,那么循環(huán)將會(huì)跳過length這樣屬性,因?yàn)閘ength不是數(shù)組all的真系屬性,而是從派生數(shù)組all的NameNodeMap對(duì)象中繼承的屬性
var all=document.getElementsByTagName('*');
for(var i in all){
if(!all.hasOwnProperty(i)) continue;
//對(duì)照all元素進(jìn)行某些操作
}
單引號(hào)('字符串')和雙引號(hào)("字符串")在JavaScript中沒有特殊的區(qū)別,都可以用來(lái)創(chuàng)建字符串.但作為一般原則,大多數(shù)WEB開發(fā)者都選擇使用單引號(hào) 而不是雙引號(hào),因?yàn)閄HTML規(guī)范要求所有XHTML屬性值都必須使用雙引號(hào)括起來(lái).
JavaScript不支持重載,在JavaScript中,腳本在執(zhí)行時(shí)不會(huì)顧及函數(shù)定義時(shí)的參數(shù),而是直接使用在作用域鏈中最后定義的那個(gè)函數(shù)。這意味著,相同名稱的函數(shù)永遠(yuǎn)只存在一個(gè)實(shí)例
閉包是與作用域相關(guān)的一個(gè)概念,它指的是內(nèi)部函數(shù)即使在外部函數(shù)執(zhí)行完成并終止后,依然可以訪問其外部函數(shù)的屬性。當(dāng)引用一個(gè)變量或方法時(shí),JavaScript會(huì)沿著由對(duì)象執(zhí)行路徑構(gòu)成使用域鏈對(duì)使用域進(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è)頁(yè)面中有三個(gè)A元素,ID分別為anchor1到anchor3,程序?yàn)槿齻€(gè)A元素注冊(cè)onclick事件,單擊第個(gè)A元素顯示"my id is anchorX",但實(shí)際運(yùn)行情況卻不是這樣,單擊每個(gè)A元素都顯示"my id is anchor4"。為什么會(huì)這樣呢,因?yàn)閕的值實(shí)際上是在單擊事件發(fā)生時(shí)才從使用域鏈中取得的,當(dāng)單擊事件發(fā)生時(shí),initAnchors()已執(zhí)行完畢,此時(shí)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);
});
迭代對(duì)象,在編寫腳本時(shí)經(jīng)常使用到迭代,如下:
復(fù)制代碼 代碼如下:
var list = [1,2,3,4];
for(var i = 0;i < list.length; i++){
alert(list);
}
另一種可供選擇的迭代方法是使用for循環(huán)遍歷位于(in)list中的每個(gè)屬性:
復(fù)制代碼 代碼如下:
for(var i in list){
alert(list);
}
此時(shí),得到的是與使用前一迭代方法相同的結(jié)果,因?yàn)閘ist是一個(gè)Array對(duì)象。
但是,當(dāng)使用for(var i in item)方法操縱類似數(shù)組而又不是數(shù)組的對(duì)象時(shí)一定要格外小心,如下
復(fù)制代碼 代碼如下:
var all=document.getElementsByTagName('*');
for(var i in all){
//對(duì)照all元素進(jìn)行某些操作
}
在這次的迭代過程中,i的值會(huì)分別等于length、item和namedItem,而這很可能會(huì)導(dǎo)致代碼中出現(xiàn)意外錯(cuò)誤。在某些情況下,可以使用對(duì)象的hasOwnProperty()方法來(lái)避免這個(gè)問題。如果對(duì)象的屬性或方法是非繼承的,那么hasOwnProperty()方法返回true。即這里的檢查不涉及從其它對(duì)象繼承的屬性和方法,只會(huì)檢查在特定對(duì)象自身中直接創(chuàng)建的屬性,比如分配給數(shù)組的元素。因此,在如果在for循環(huán)中使用這種檢查,那么循環(huán)將會(huì)跳過length這樣屬性,因?yàn)閘ength不是數(shù)組all的真系屬性,而是從派生數(shù)組all的NameNodeMap對(duì)象中繼承的屬性
復(fù)制代碼 代碼如下:
var all=document.getElementsByTagName('*');
for(var i in all){
if(!all.hasOwnProperty(i)) continue;
//對(duì)照all元素進(jìn)行某些操作
}
您可能感興趣的文章:
- JavaScript中for..in循環(huán)陷阱介紹
- 比較搞笑的js陷阱題
- JavaScript性能陷阱小結(jié)(附實(shí)例說(shuō)明)
- Javascript 陷阱 window全局對(duì)象
- JavaScript 存在陷阱 刪除某一區(qū)域所有節(jié)點(diǎn)
- 幫助避免錯(cuò)誤的Javascript陷阱清單
- 錯(cuò)誤剖析之JavaScript的9個(gè)陷阱及評(píng)點(diǎn)
- JavaScript的9個(gè)陷阱及評(píng)點(diǎn)分析
- 在JavaScript中遭遇級(jí)聯(lián)表達(dá)式陷阱
- JavaScript中常見的八個(gè)陷阱總結(jié)
相關(guān)文章
原生JS實(shí)現(xiàn)圖片懶加載(lazyload)實(shí)例
圖片懶加載也是比較常見的一種性能優(yōu)化的方法,本篇文章主要介紹了原生JS實(shí)現(xiàn)圖片懶加載(lazyload)實(shí)例,這里整理了詳細(xì)的代碼,有需要的小伙伴可以參考下2017-06-06詳解微信開發(fā)中snsapi_base和snsapi_userinfo及靜默授權(quán)的實(shí)現(xiàn)
這篇文章主要介紹了詳解微信開發(fā)中snsapi_base和snsapi_userinfo及靜默授權(quán)的實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2017-03-03Bootstrap入門書籍之(四)菜單、按鈕及導(dǎo)航
這篇文章主要介紹了Bootstrap入門書籍之(四)菜單、按鈕及導(dǎo)航的相關(guān)資料,需要的朋友可以參考下2016-02-02JavaScript面向?qū)ο缶幊虒?shí)現(xiàn)模擬
面向?qū)ο缶幊?Object Oriented Programming)將現(xiàn)實(shí)世界中的復(fù)雜關(guān)系抽象成一個(gè)個(gè)對(duì)象,通過對(duì)象之間的分工合作對(duì)現(xiàn)實(shí)世界進(jìn)行模擬2022-10-105個(gè)你不知道的JavaScript字符串處理庫(kù)(小結(jié))
這篇文章主要介紹了5個(gè)你不知道的JavaScript字符串處理庫(kù),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06