自执行函数和匿名函数-阿里云开发者社区

开发者社区> 醉意人间> 正文

自执行函数和匿名函数

简介:   在很多JS库中都能看到下面的代码: function(){ //所有库代码代码 }();   这样写的一个目的是——封装。 JavaScript并不是面向对象的,所以它不支持封装。
+关注继续查看

 

 

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Java匿名内部类与回调函数
    之所以将匿名内部类和回调函数两个知识点一起写,是因为最近学习zookeeper的时候正好遇到这么一个例子。详细内容请参考:https://www.w3cschool.cn/zookeeper/zookeeper_api.html 以下是与ZooKeeper集合连接的完整代码。
5544 0
Angular Component class属性初始化和构造函数执行的先后顺序
Angular Component class属性初始化和构造函数执行的先后顺序
18 0
7.4 匿名函数和高阶函数
1、匿名函数:没有名字的函数 def sum(s, y):     return x * y m = lambda x, y: x * y print(m) print(m(4, 5)) 2、sorted() 高阶函数 对字典进行排序 mm=dict(a=1,c=10,b=4,d=9) for i in mm:     print(i) for j in mm.
667 0
前端进阶|第九天 逆天的立即执行函数(IIFE)
前端进阶|第九天 逆天的立即执行函数(IIFE) 每天一个知识点
882 0
Angular Component template函数执行上下文的对象
Angular Component template函数执行上下文的对象
5 0
第10周-任务0-构造和析构函数的执行过程实例解析
【题目】阅读程序,先分析程序的执行结果,在上机时运行程序进行对照,再通过单步执行跟踪程序的运行,达到理解基类、派生类中构造函数、析构函数执行过程的目的。 程序如下: #include &lt;iostream&gt; using namespace std; class Part  //部件类 { public:     Part();     Part(int i);     ~
933 0
在mongodb服务器上存储和执行 js 函数 - 存储过程
虽然官方不推荐使用将业务逻辑存储在数据库中,并且提示在 mongodb 中执行 javascript 存在性能限制。 但实际上,将 javascript 函数存储在 mongodb 中执行,还是非常有必要的,更方便,许多场景下性能会更好(在执行大量查询处理时不需要将数据传回客户端引擎)。 在目前的版本中,我们任然可以将 javascript 函数存储在 mongodb 内置的一个特殊集合 db.system.js 中,然后这些变量就可以在任何 mongodb 的 javascript 上下文中调用,包括:db.eval()、$where子句、mapReduce。 自从 mongodb 3
33 0
lambda匿名函数使用
#!/usr/bin/pythonfun=lambda x:x*x-xprint fun(3)
448 0
+关注
醉意人间
喜欢GIS,喜欢将GIS技术在中国推广
412
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载