javascript閉包簡單程式碼例項

admin發表於2017-03-23
原文網址 : https://www.softwhy.com/article-4333-1.html
JavaScript

本章節並不介紹關於javascript的相關理論，只是分享幾個使用閉包的簡單程式碼例項，供學習的朋友參考之用，如需要了解閉包的概念問題，可以參考一下幾個文章:

1.閉包的概念可以參閱javascript閉包概念簡單解析一章節。 

2.比較程式碼分析可以參閱javascript閉包用法例項程式碼分析一章節。 

下面是分享的幾個程式碼例項:

程式碼一:

[JavaScript] 純文字檢視 複製程式碼
function say(){
  var num=666;
  var show=function(){
    alert(num);
  }
  num++;
  return show;
}
var sayAlert=say();
sayAlert();

程式碼二:

[JavaScript] 純文字檢視 複製程式碼
function setUpSomeGlobals(){
  var num=666;
  gAlertNumber=function(){
    alert(num);
  }
  gIncreaseNumber=function(){
    num++;
  }
  gSetNumber=function(x){
    num=x;
  }
}
setUpSomeGlobals();
gAlertNumber();
gIncreaseNumber();
gAlertNumber();
gSetNumber(12);
gAlertNumber();

例項三:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="http://www.softwhy.com/" />   
<title>螞蟻部落</title> 
<style type="text/css">
ul li{
  width:200px;
  height:25px;
  line-height:25px;
  list-style:none;
  font-size:12px;
}
</style>
<script type="text/javascript"> 
window.onload=function(){
  var oshow=document.getElementById("show");
  var obox=document.getElementById("box");
  var lis=obox.getElementsByTagName("li");
  for(var index=0;index<lis.length;index++){
    (function(index){
     lis[index].onclick=function(){
       oshow.innerHTML=index;
     }
    })(index)
  }
}
</script> 
<body>
<div id="show"></div>
<ul id="box">
  <li>螞蟻部落歡迎您</li>
  <li>沒有人一開始就是高手</li>
  <li>只有當下的時間才是最可貴的</li>
  <li>每一天都是新的，要好好的珍惜</li>
  <li>只有努力奮鬥才會有美好的明天</li>
</ul>
</body>
</html>

相關文章