首頁  >  文章  >  web前端  >  JavaScript在實際應用中需要注意的重點實例匯總

JavaScript在實際應用中需要注意的重點實例匯總

伊谢尔伦
伊谢尔伦原創
2017-07-26 13:44:261069瀏覽

你所建立的所有函數都是區分大小寫的 

單引號('字串')和雙引號("字串")在JavaScript中沒有特殊的區別,都可以用來創建字串.但作為一般原則,大多數WEB開發者都選擇使用單引號而不是雙引號,因為XHTML規範要求所有XHTML屬性值都必須使用雙引號括起來.
JavaScript不支援重載,在JavaScript中,腳本在執行時不會顧及函數定義時的參數,而是直接使用在作用域鏈中最後定義的那個函數。這意味著,相同名稱的函數永遠只存在一個實例 

閉包是與作用域相關的一個概念,它指的是內部函數即使在外部函數執行完成並終止後,依然可以存取其外部函數的屬性。當引用變數或方法時,JavaScript會沿著由物件執行路徑構成使用域鏈對使用域進行解析,尋找變數最近定義的值,一旦找到即使用該值。

function initAnchors(event){ 
  for (var i=1; i <=3; i++){ 
    var anchor = document.GetElementById(&#39;anchor&#39; + i); 
    anchor.attachEvent(&#39;onclick&#39;, function() {  
    alert(&#39;my id is anchor&#39; + i); 
    }); 
  } 
}

假設頁面中有三個A元素,ID分別為anchor1到anchor3,程式為三個A元素註冊onclick事件,點選第個A元素顯示"my id is anchorX",但實際運作情況卻不是這樣,點擊每個A元素都顯示"my id is anchor4"。為什麼會這樣呢,因為i的值實際上是在單擊事件發生時才從使用域鏈中取得的,當單擊事件發生時,initAnchors()已執行完畢,此時i的值等於4。解決方法可以如下 

function registerAnchorListner(anchor,i){ 
  anchor.attachEvent(&#39;onclick&#39;, function() {  
    alert(&#39;my id is anchor&#39; + i); 
  }   
} 
function initAnchors(event){ 
  for (var i=1; i <=3; i++){ 
    var anchor = document.GetElementById(&#39;anchor&#39; + i); 
    registerAnchorListner(anchor,i); 
  } 
} 
var anchor = document.GetElementById(&#39;anchor&#39; + i); 
anchor.attachEvent(&#39;onclick&#39;, function() { 
alert(&#39;my id is anchor&#39; + i); 

});

迭代物件,在編寫腳本時經常使用到迭代,如下: 

var list = [1,2,3,4]; 
for(var i = 0;i < list.length; i++){ 
  alert(list); 
}

另一種可供選擇的迭代方法是使用for循環遍歷位於(in )list中的每個屬性: 

for(var i in list){ 
  alert(list); 
}

此時,得到的是與使用前一迭代方法相同的結果,因為list是Array物件。
但是,當使用for(var i in item)方法操縱類似數組而又不是數組的對象時一定要格外小心,如下 

var all=document.getElementsByTagName(&#39;*&#39;); 
for(var i in all){ 
  //对照all元素进行某些操作 
}

在這次的迭代過程中,i的值會分別等於length、item和namedItem,而這很可能會導致程式碼中出現意外錯誤。在某些情況下,可以使用物件的hasOwnProperty()方法來避免這個問題。如果物件的屬性或方法是非繼承的,那麼hasOwnProperty()方法回傳true。即這裡的檢查不涉及從其它物件繼承的屬性和方法,只會檢查在特定物件本身中直接建立的屬性,例如指派給陣列的元素。因此,如果在for迴圈中使用這種檢查,那麼迴圈將會跳過length這樣屬性,因為length不是數組all的真係屬性,而是從派生數組all的NameNodeMap物件中繼承的屬性 

var all=document.getElementsByTagName(&#39;*&#39;); 
for(var i in all){ 
  if(!all.hasOwnProperty(i)) continue; 
  //对照all元素进行某些操作 
}


#

以上是JavaScript在實際應用中需要注意的重點實例匯總的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn