• 立即执行函数(function(){})()与闭包


    变量的作用域

    一、在js中,变量的定义并不是以代码块作为作用域的,而是以函数作为作用域。也就是说,如果变量是在某个函数中定义的,那么,它在函数以外的地方是不可见的。但是,如果该变量是定义在if或者for这样的代码块中,它在代码块之外是可见的。

    二、在js中,术语“全局变量”指的是定义在所有函数之外的变量(也就是定义在全局代码中的变量),与之相对的是“局部变量”,所指的是在某个函数中定义的变量。其中,函数内的代码可以像访问自己的局部变量那样访问全局变量,反之则不行。

    立即执行函数

    匿名(function(){})()

    //声明一个普通函数,函数的名字叫fn
    function fn(){
        console.log("hello");
    }
    /*然后将函数的名字去掉即是匿名函数*/
    
    //匿名函数,运行时会发现报错啦!
    function (){
        console.log("hello");
    }
    
    /**单独运行一个匿名函数,由于不符合语法要求,会报错!
     *解决方法只需要给匿名函数包裹一个括号即可,匿名函数在其它应用场景中外层括号可以省略
     */
    (function (){
        //由于没有执行该匿名函数,所以不会执行匿名函数体内的语句。
        console.log("hello");
    })
    
    //在匿名函数后面加上一个括号即可立即执行
    (function (){
        console.log("hello");
    })()
    
    //若需要传值,直接将参数写到括号内即可
    (function (str){
        console.log("hello "+str);
    })("world!")

    当一个匿名函数被括起来,然后再在后面加一个括号,这个匿名函数就能立即运行起来。

    匿名函数的应用场景

    事件
    <input type="button" value="点我!" id="btn">
    
    <script>
        //获得按钮元素
        var sub=document.querySelector("#btn");
        //给按钮增加点击事件。
        sub.onclick=function(){
            alert("当点击按钮时会执行到我哦!");
        }
    </script>
    对象
    var obj={
        name:"Java",
        age:18,
        fn:function(){
            return "Program:"+this.name+"age:"+this.age;
        }
    };
    
    //调用
    console.log(obj.fn());
    函数表达式
    //将匿名函数赋值给变量fn。
    var fn=function(){
        return "赋给变量的匿名函数!";
    }
    
    //调用方式与调用普通函数一样
    console.log(fn());
    回调函数
    setInterval(function(){
        console.log("这是一个回调函数,每次1秒钟会被执行一次");
    },1000);
    返回值
    //将匿名函数作为返回值
    function fn(){
    
        //返回匿名函数
        return function(){
            return "hello";
        }
    
    }
    
    //调用匿名函数
    console.log(fn()());
    
    //或用变量接收匿名函数然后用变量名调用
    var box=fn();
    console.log(box());

    $(function(){})

    $(function(){});是$(document).ready(function(){});的简写,相当于window.onload = function(){} ,虽然这段jquery代码与javascript代码在功能上可以互换,但执行的时间不一样,前者页面框架加载完成就执行,后者页面中所有内容加载完成才执行。

    闭包

    (function(){})()不叫闭包叫立即执行函数,所谓闭包,要拆成闭和包,闭指代不想暴露给外部的数据,包指代将数据打包出去暴露给外部;之所以这么说原因在于JS的函数作用域,函数内部的变量函数外部无法访问,这形成了闭函数外部想得到函数内部的变量,可以通过某些方法譬如通过return等语句将内部的变量暴露出去,这形成了包;因而——立即执行函数只是函数的一种调用方式,和闭包没有必然的联系;闭包是和作用域扯上关系的,而(function(){})()是函数声明完就执行,只是有时想要用到闭包那么可以用(function(){})()来构成闭包,而不是(function(){})()是闭包。闭包的本质是执行完后只返回有用的数据,包内变量完全销毁,防止全局污染

    闭包本身定义比较抽象,MDN官方上解释是:A closure is the combination of a function and the lexical environment within which that function was declared.
    中文解释是:闭包是一个函数和该函数被定义时的词法环境的组合。

    普通函数实现闭包

    按照闭包起的作用来理解它:就是能在一个函数外部执行这个函数内部定义的方法,并访问这个函数内部定义的变量。

    function box(){
      var a = 10;
      function inner(){
        return a;
      }
      return inner;
    }
    
    var outer = box();  //获取函数内部的函数
    console.log(outer());//并执行这个函数,返回结果10

    正常情况,box执行过后,会被回收机制回收所占用的内存,包括其内部定义的局部变量。但是此时box执行过后返回一个内部的函数inner,这个inner引用了内部的变量a,inner又被外部outer给接收,回收机制检查到内部的变量被引用,就不会执行回收。

    • 这个案例中用到的闭包其实是inner和inner被定义时的词法环境,这个闭包被return出来后被外部的outer引用,因此可以在box外部执行这个inner,inner能够读取到box内部的变量a。

    • 使用这个闭包的目的是为了在box外部访问a,就是通过执行outer()。

    匿名函数实现闭包

    //1.把内部inner这个具名函数改为匿名函数并直接return
    function box(){
      var a = 10;
      return function(){
        console.log(a) ; 
      }
    }
    
    var outer = box();
    outer();//10
    
    //2.把外部var outer = box()改成立即执行的匿名函数
    var outer = (function(){
      var a=10;
      return function(){
        console.log(a);
      }
    })();
    //outer作为立即执行匿名函数执行结果的一个接收,这个执行结果是闭包,outer等于这个闭包。
    //执行outer就相当于执行了匿名函数内部return的闭包函数
    //这个闭包函数可以访问到匿名函数内部的私有变量a,所以打印出10
    outer();//10

    ————————————————
    参考:https://blog.csdn.net/qq_36189935/article/details/85275404
    参考:https://www.jianshu.com/p/0a3150afb7ed

  • 相关阅读:
    DataSet数据导出为Excel文档(每个DataTable为一个Sheet)
    K2 Blackpearl 4.6.8 安装步骤详解
    解决未能从程序集xxx中加载类型System.ServiceModel.Activation.HttpModule的问题
    将博客搬至CSDN
    PMS-授权中心
    如何从现有版本1.4.8升级到element UI2.0.11
    Maven私有仓库: 发布release版本报错:Return code is: 400, ReasonPhrase: Repository does not allow upd ating assets: maven-releases.
    spring boot + dubbo开发遇到过的异常
    java,javascript中的url编码
    SpringBoot favicon.ico
  • 原文地址:https://www.cnblogs.com/aeolian/p/12027326.html
Copyright © 2020-2023  润新知