自执行函数和匿名函数

 

 

在很多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