自執行函數和匿名函數

 

 

在很多JS庫中都能看到下面的代碼：

function(){ //所有庫代碼代碼
}();

 

這樣寫的一個目的是——封裝。

JavaScript並不是面向對象的，所以它不支持封裝。但是在不支持封裝的語言里同樣可以實現封裝。而實現的方法就是匿名函數或者自執行函數，其實自執行函數是特殊的匿名函數。在JS中類是通過函數來模擬的，其實很難理解，但是理解了也是比較輕松的，都知道在C#/Java等語言中，類是創建對象的模板，也是屬性和方法的集合，類中中可以定義多個方法，既然在JS中可以通過函數來模擬，那么函數中自然也就可以定義新的函數，或者說內部函數，如下面的就是一個類：

//定義
function F(x) { this.x = x; function double(x){return x*x;} this.getDoubleX = function(){ return double(this.x); } } //使用
f = new F(12); alert(f.getDoubleX());

 

函數F相當於一個構造函數，而函數里面的其他定義都是函數私有的外部無法訪問，例如double函數。這樣就變相實現了私有方法。其他打上“this.”前綴的成員相當於公開成員，外部可以訪問。前面的博客中我寫過如何寫一個可以復用的JS文件，這個就采用的是自執行函數，現在給一個將圖片翻轉360度的，這個函數就是給windows增加了一個新的對象或者命名空間，這個命名空間用來存放我自己定義的東東：

 

(function (wx) { var T$ = function (id) { return document.getElementById(id); } var ua = navigator.userAgent, isIE = /msie/i.test(ua) && !window.opera; var i = 0, sinDeg = 0, cosDeg = 0, timer = null; var rotate = function (target, degree) { target = T$(target); var orginW = target.clientWidth, orginH = target.clientHeight; clearInterval(timer); function run(angle) { if (isIE) { // IE
                    cosDeg = Math.cos(angle * Math.PI / 180); sinDeg = Math.sin(angle * Math.PI / 180); with (target.filters.item(0)) { M11 = M22 = cosDeg; M12 = -(M21 = sinDeg); } target.style.top = (orginH - target.offsetHeight) / 2 + 'px'; target.style.left = (orginW - target.offsetWidth) / 2 + 'px'; } else if (target.style.MozTransform !== undefined) {  // Mozilla
                    target.style.MozTransform = 'rotate(' + angle + 'deg)'; } else if (target.style.OTransform !== undefined) {   // Opera
                    target.style.OTransform = 'rotate(' + angle + 'deg)'; } else if (target.style.webkitTransform !== undefined) { // Chrome Safari
                    target.style.webkitTransform = 'rotate(' + angle + 'deg)'; } else { target.style.transform = "rotate(" + angle + "deg)"; } } timer = setInterval(function () { i += 10; run(i); if (i > degree - 1) { i = 0; clearInterval(timer); } }, 10); } wx.liuyu = {}; wx.liuyu.rotate = rotate; // windows.rotate = rotate;
 }) (window);

 

調用

window.onload = function () {         document.getElementById('demo').onclick = function () {             window.liuyu.rotate('demo', 360); } }

 其實還可以采用下面這種方式，這種方式給左邊的變量返回了一個對象，記住這個不是函數的定義，而是可以直接執行的：

  var Img=function () { var T$ = function (id) { return document.getElementById(id); } var ua = navigator.userAgent, isIE = /msie/i.test(ua) && !window.opera; var i = 0, sinDeg = 0, cosDeg = 0, timer = null; var rotate = function (target, degree) { target = T$(target); var orginW = target.clientWidth, orginH = target.clientHeight; clearInterval(timer); function run(angle) { if (isIE) { // IE
                    cosDeg = Math.cos(angle * Math.PI / 180); sinDeg = Math.sin(angle * Math.PI / 180); with (target.filters.item(0)) { M11 = M22 = cosDeg; M12 = -(M21 = sinDeg); } target.style.top = (orginH - target.offsetHeight) / 2 + 'px'; target.style.left = (orginW - target.offsetWidth) / 2 + 'px'; } else if (target.style.MozTransform !== undefined) {  // Mozilla
                    target.style.MozTransform = 'rotate(' + angle + 'deg)'; } else if (target.style.OTransform !== undefined) {   // Opera
                    target.style.OTransform = 'rotate(' + angle + 'deg)'; } else if (target.style.webkitTransform !== undefined) { // Chrome Safari
                    target.style.webkitTransform = 'rotate(' + angle + 'deg)'; } else { target.style.transform = "rotate(" + angle + "deg)"; } } timer = setInterval(function () { i += 10; run(i); if (i > degree - 1) { i = 0; clearInterval(timer); } }, 10); } return {"rotate":rotate}; }(); window.onload = function () { document.getElementById('demo').onclick = function () { Img.rotate('demo', 360); } }

 

對於上面的這個方式，有些人可能不太明白，我們可以這樣理解：

  var Img=function () { var T$ = function (id) { return document.getElementById(id); } var ua = navigator.userAgent, isIE = /msie/i.test(ua) && !window.opera; var i = 0, sinDeg = 0, cosDeg = 0, timer = null; var rotate = function (target, degree) { target = T$(target); var orginW = target.clientWidth, orginH = target.clientHeight; clearInterval(timer); function run(angle) { if (isIE) { // IE
                    cosDeg = Math.cos(angle * Math.PI / 180); sinDeg = Math.sin(angle * Math.PI / 180); with (target.filters.item(0)) { M11 = M22 = cosDeg; M12 = -(M21 = sinDeg); } target.style.top = (orginH - target.offsetHeight) / 2 + 'px'; target.style.left = (orginW - target.offsetWidth) / 2 + 'px'; } else if (target.style.MozTransform !== undefined) {  // Mozilla
                    target.style.MozTransform = 'rotate(' + angle + 'deg)'; } else if (target.style.OTransform !== undefined) {   // Opera
                    target.style.OTransform = 'rotate(' + angle + 'deg)'; } else if (target.style.webkitTransform !== undefined) { // Chrome Safari
                    target.style.webkitTransform = 'rotate(' + angle + 'deg)'; } else { target.style.transform = "rotate(" + angle + "deg)"; } } timer = setInterval(function () { i += 10; run(i); if (i > degree - 1) { i = 0; clearInterval(timer); } }, 10); } return {"rotate":rotate}; } window.onload = function () { //Img.rotate('demo', 360);
        document.getElementById('demo').onclick = function () { var xRotate = Img(); xRotate.rotate('demo', 360); } } </script>

 

這兩個的微小區別其實跟JS的編譯和運行兩個階段有關，從下面的例子可以看出：

 

function a(){ alert("a") } var b = function(){ alert("b") } 

它們倆有何不同呢？前者為函數聲明，后者為函數表達式。函數聲明作為一種聲明，當然會在預編譯階級有所動作（聲明提前），而函數表達式則不會。另一個區別是，函數聲明不能直接加一對括號讓它們執行。第三個區別，表達式還可以繼續細分，表達式是由常量，變量，操作符，函數等組合而成，計算以后返回一個結果值，至少也會返回一個undefined。

 

參考：     http://www.cnblogs.com/TomXu/archive/2011/12/31/2289423.html

          http://www.nowamagic.net/javascript/js_UsageOfAnonymousFunctions.php

          http://www.cnblogs.com/rubylouvre/archive/2010/02/11/1667364.html