1.13 JavaScript4:函式和閉包
函式
函式就是重複執行的程式碼片。
函式定義與執行
<script type="text/javascript"> // 函式定義 function aa(){ alert('hello!'); } // 函式執行 aa(); </script>
變數與函式預解析
JavaScript解析過程分為兩個階段,先是編譯階段,然後執行階段,在編譯階段會將function定義的函式提前,並且將var定義的變數宣告提前,將它賦值為undefined。
<script type="text/javascript"> aa();// 彈出 hello! alert(bb);// 彈出 undefined function aa(){ alert('hello!'); } var bb = 123; </script>
提取行間事件
在html行間呼叫的事件可以提取到javascript中呼叫,從而做到結構與行為分離。
<!--行間事件呼叫函式--> <script type="text/javascript"> function myalert(){ alert('ok!'); } </script> ...... <input type="button" name="" value="彈出" onclick="myalert()"> <!-- 提取行間事件 --> <script type="text/javascript"> window.onload = function(){ var oBtn = document.getElementById('btn1'); oBtn.onclick = myalert; function myalert(){ alert('ok!'); } } </script> ...... <input type="button" name="" value="彈出" id="btn1">
匿名函式
定義的函式可以不給名稱,這個叫做匿名函式,可以將匿名函式直接賦值給元素繫結的事件來完成匿名函式的呼叫。
<script type="text/javascript"> window.onload = function(){ var oBtn = document.getElementById('btn1'); /* oBtn.onclick = myalert; function myalert(){ alert('ok!'); } */ // 直接將匿名函式賦值給繫結的事件 oBtn.onclick = function (){ alert('ok!'); } } </script>
函式傳參
<script type="text/javascript"> function myalert(a){ alert(a); } myalert(12345); </script>
函式’return’關鍵字
函式中’return’關鍵字的作用:
1、返回函式執行的結果
2、結束函式的執行
3、阻止預設行為
<script type="text/javascript"> function add(a,b){ var c = a + b; return c; alert('here!'); } var d = add(3,4); alert(d);//彈出7 </script>
封閉函式
封閉函式是javascript中匿名函式的另外一種寫法,建立一個一開始就執行而不用命名的函式。
一般定義的函式和執行函式:
function changecolor(){ var oDiv = document.getElementById('div1'); oDiv.style.color = 'red'; } changecolor();
封閉函式:
(function(){ var oDiv = document.getElementById('div1'); oDiv.style.color = 'red'; })();
還可以在函式定義前加上“~”和“!”等符號來定義匿名函式
!function(){ var oDiv = document.getElementById('div1'); oDiv.style.color = 'red'; }()
閉包
什麼是閉包
函式巢狀函式,內部函式可以引用外部函式的引數和變數,引數和變數不會被垃圾回收機制收回
function aaa(a){ var b = 5; function bbb(){ a++; b++; alert(a); alert(b); } return bbb; } var ccc = aaa(2); ccc(); ccc();
改寫成封閉函式的形式:
var ccc = (function(a){ var b = 5; function bbb(){ a++; b++; alert(a); alert(b); } return bbb; })(2); ccc(); ccc();
用處
1、將一個變數長期駐紮在記憶體當中,可用於迴圈中存索引值
<script type="text/javascript"> window.onload = function(){ var aLi = document.getElementsByTagName('li'); for(var i=0;i<aLi.length;i++) { (function(i){ aLi[i].onclick = function(){ alert(i); } })(i); } } </script> ...... <ul> <li>111</li> <li>222</li> <li>333</li> <li>444</li> <li>555</li> </ul>
2、私有變數計數器,外部無法訪問,避免全域性變數的汙染
<script type="text/javascript"> var count = (function(){ var a = 0; function add(){ a++; return a; } return add; })() count(); count(); var nowcount = count(); alert(nowcount); </script>
-
學院Go語言視訊主頁
ofollow,noindex" target="_blank">https://edu.csdn.net/lecturer/1928 -
掃碼獲取海量視訊及原始碼 QQ群:721929980