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語言視訊主頁
https://edu.csdn.net/lecturer/1928 -
掃碼獲取海量視訊及原始碼 QQ群:721929980
相關文章
- JavaScript4:函式和閉包JavaScript函式
- JS閉包函式和回撥函式JS函式
- 函式閉包函式
- 閉包函式函式
- 淺談匿名函式和閉包函式
- go 閉包函式Go函式
- js函式閉包JS函式
- PHP 回撥、匿名函式和閉包PHP函式
- 回撥函式 與 函式閉包函式
- 閉包函式(匿名函式)的理解函式
- swift1.2語言函式和閉包函式介紹Swift函式
- JS閉包函式概念JS函式
- JavaScript 匿名函式 閉包JavaScript函式
- 課時20:內嵌函式和閉包函式
- js中的函式巢狀和閉包JS函式巢狀
- 探索c#之函式建立和閉包C#函式
- JS函式表示式——函式遞迴、閉包JS函式遞迴
- 淺談C#的函式建立和閉包C#函式
- 理解Python函式閉包Python函式
- js函式 函式自呼叫 返回函式的函式 (閉包)JS函式
- JS學習理解之閉包和高階函式JS函式
- Swift 1.1語言第7章 函式和閉包Swift函式
- Python 閉包函式說明Python函式
- 3. 匿名函式與閉包函式
- python中的閉包函式Python函式
- 立即執行函式(IIFE)&&閉包函式
- PHP閉包函式使用詳解PHP函式
- iOS學習筆記42 Swift(二)函式和閉包iOS筆記Swift函式
- PHP 中的匿名函式和閉包基礎學習PHP函式
- 匿名函式和閉包的相關應用詳解函式
- PHP新特性之閉包、匿名函式PHP函式
- Python基礎之閉包函式Python函式
- 閉包函式,裝飾器詳解函式
- JavaScript進階系列01,函式的宣告,函式引數,函式閉包JavaScript函式
- 深入理解javascript原型和閉包(2)——函式和物件的關係JavaScript原型函式物件
- js閉包與封閉函式與其他知識點JS函式
- python 關於 函式物件與閉包Python函式物件
- .NET併發程式設計-函式閉包程式設計函式