zoukankan      html  css  js  c++  java
  • 闭包及相关问题

    先从闭包特点解释,应该更好理解.
    闭包的两个特点:

    1、作为一个函数变量的一个引用 - 当函数返回时,其处于激活状态。
    2、一个闭包就是当一个函数返回时,一个没有释放资源的栈区。

    其实上面两点可以合成一点,就是闭包函数返回时,该函数内部变量处于激活状态,函数所在栈区依然保留.

    我们所熟知的主流语言,像C,java等,在函数内部只要执行了return,函数就会返回结果,然后内存中删除该函数所在的区域.生命周期也就停止了.一般的js函数也是这样.
    但是有闭包特性的js函数有点特殊.
    就例子来说:

    function a(){
    var i=0;
    function b(){
    alert(++i);
    }
    return b;
    }
    var c = a();
    c();

    这是个标准的闭包.在函数a中定义了函数b,a又return了b的值.这些可以先不管.
    var c = a();
    c();
    这两句执行很重要.
    在var c = a();这行里,执行了a函数,那么肯定a经过了return.按照主流语言的函数特性,现在c的值就是a的返回值.
    第二行c()的执行实际执行的就是b函数.最后不管执行的是谁,会弹出一个值为0的窗口,到此为止,所有的生命周期按理论来说就算全部结束了.
    可是,如果我们再多执行一行.
    var c = a();
    c();
    c();
    第一次弹出0,第二次执行却弹出了1.

    也就是说,第一次c()后,a中的i依然保留.自然a在内存的栈区依然保留.

    a是return过了,但是,a及内部值却依然存在,这就是闭包.

    好了,总结下,
    1,闭包外层是个函数.
    2,闭包内部都有函数.
    3,闭包会return内部函数,且内部函数访问了外层函数的变量。

    闭包的应用场景

    1、保护函数内的变量安全。以最开始的例子为例,函数a中i只有函数b才能访问,而无法通过其他途径访问到,因此保护了i的安全性。
    2、在内存中维持一个变量。依然如前例,由于闭包,函数a中i的一直存在于内存中,因此每次执行c(),都会给i自加1。

    根据参考资料的应用场景,我们会自然的想到java或是c++的类.虽然JS没有类的概念,但是有了类的相似执行结果.

    另外,还有一种格式:
    (function(a,b){...})(a,b);
    如果你使用过jquery,并且看过他的代码,会见到这种写法,这个应该叫匿名立即执行函数.用他的目的,是避免这个块内的变量和外面的变量名冲突。

    闭包与变量: 

    另外,作用域链的配置机制引出了另外一个问题,就是闭包只能取得包含函数中任何变量的最后一个值。闭包保存的是整个变量对象,而不是某个特殊的变量。如:

    function create(){
      var result = [];
      for(var i=0;i<10;i++)
      {
         result[i]=function(){
            return i;
         };
      }
    return result; }

    执行result中的函数的结果都是10.
    如果需要避免这个问题,可以修改下:

    function create(){
      var result = [];
      for(var i=0;i<10;i++)
      {
         result[i]=function(num){
            return function(){
                return num;
            };
         }(i);
      }
      return result;
    }

    另外一个类似的栗子:

    var obj={};
    var events={"m1":"changed","m2":"clicked"};
    for(var attr in events)
    {
       obj[attr]=function(){
             alert(events[attr]);
       };
    }
    
    alert(obj["m1"]==obj["m2"];);//false
    obj["m1"]();//"clicked"
    obj["m2"]();//"clicked"

    闭包与this:

     在闭包中使用this也会导致问题。this对象是在运行时基于函数的执行环境绑定的。

    var name="The Window";
    var myObject={
      name:"My Object",
      sayNameFunction:function(){
        return function(){
          return this.name;
        };
      }
    };
    
    alert(myObject.sayNameFunction()());//The Window

    解决方法是保存一下this对象:

    var name="The Window";
    var myObject={
      name:"My Object",
      sayNameFunction:function(){
        var that = this;
        return function(){
          return that.name;
        };
      }
    };
    
    alert(myObject.sayNameFunction()());//My Object

     静态私有变量

    (function(){
      var name;
      Person=function(value){
        name=value;
      };
      Person.prototype.getName=function(){
        return name;
      };
      Person.prototype.setName=function(value){
        name=value;
      };
    })();
    
    var person1=new Person("Rose");
    person1.setName("Mike");
    alert(person1.getName());//Mike
    
    var person2=new Person("Van");
    alert(person1.getName());//Van
    alert(person2.getName());//Van

    name 相当于静态私有变量,被各实例共享。

  • 相关阅读:
    css text-transform 属性
    CSS3 @media编写响应式页面
    css :first child与:first-of-type的区别
    前端外语网站合集
    webpack配置自动添加CSS3前缀
    vue中extend/component/mixins/extends的区别
    js缓动函数
    [LeetCode] 78. 子集
    [LeetCode] 76. 最小覆盖子串
    [LeetCode] 75. 颜色分类
  • 原文地址:https://www.cnblogs.com/linda586586/p/2648059.html
Copyright © 2011-2022 走看看