| title | layout | categories | tags | exccerpt |
|---|---|---|---|---|
JavaScript中語句與函數的執行辨析 |
post |
JavaScript |
javascript函數 匿名函數 javascript語句 |
Javascript中函數與匿名函數及語句的使用辨析 |
Javascript代碼中，語句和函數以及匿名函數的執行存在一些區別，所以在編寫過程中也存在一些“坑“。
script 中的語句
html文檔中的javascript語句是寫在 <script></script> 中的，每條語句末尾需要添加分號 ;，表示此條語句執行結束。例如下面的代碼：
<script>
var x = 9;
alert(x);
</script>文檔加載到這塊代碼區域時，就會立刻執行這兩條語句，即彈出提示框爲x的值，但是如果把語句換成函數定義，代碼如下：
<script>
var x = 9;
function fx()
{
alert(x);
}
fx();
</script>這時第一行語句會被執行，第二至五行是函數定義，並不會執行這個函數，直到最後一行語句纔會真正執行這個定義過的函數。
如果需要立刻執行函數的話，就需要使用匿名函數了。所謂匿名函數，顧名思義，即不會給這個執行的函數定義“函數名”，而且是一個立即執行的語句。格式如下：
<script>
var x = 9;
(function(){
alert(x);
})();
</script>注意代碼中的三個括號的位置，以及最後跟的那個分號，表示這是一個立即執行的語句。
當然匿名函數也能傳遞參數，例如：
<script>
(function(var x){
alert(x);
})(9);
</script>效果和上面一樣。
但有時又需要不立即執行的函數，例如：
<script>
setTimeout(function(){
var x = 9;
alert(x);
}, 2000);
</script>效果與下面代碼一樣：
<script>
var x = 9;
setTimeout("alert(x)", 2000);
</script>這是Javascript中的延時函數，表示2秒後彈出提示。setTimeout() 自身就是一個函數，裏面的 “alert(x)” 是這個函數的一個參數，即一個加引號的語句。便於理解，可以寫成這樣：
setTimeout("alert();", 2000);
這樣寫並不會出錯。
所以這個函數 setTimeout() 的參數是一個不用立即執行的匿名函數 function(){}，也可以是一個語句塊，從而進行參數傳遞。
通俗講，這裏加引號的語句塊相當於不加引號的匿名函數。
標籤屬性中的語句
在 html 標籤中也能使用語句，通常用於設置元素的屬性。
先對比區分以下代碼：
<script>
function fx()
{
alert();
}
</script>
<button οnclick="alert()">Button1</button>
<button οnclick="fx()">Button2</button>
<button οnclick=fx()>Button3</button>
<button οnclick=(function(){alert();})()>Button4</button>
<button οnclick="(function(){alert();})()">Button5</button>
<button οnclick=function(){alert();}>Button6</button>
<button οnclick="function(){alert();}">Button7</button>猜一下哪個按鈕點擊無效……
答案是最後的**“Button6”和"Button7"，然後就能發現規律了，屬性所設置的值必須是能立即執行**的語句塊、函數或匿名函數，最後那兩種情況是行不通的。