1.13 JavaScript4：函式和閉包

尹成發表於2018-11-09
JavaScript函式

函式

函式就是重複執行的程式碼片。

函式定義與執行

<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>

 

相關文章