1.闭包的简单理解

function f1(){
        var i=0;
        
        function f2(){
            alert(i);
        }
        
        return f2;

    }

    

var f3 = f1();

f3();

全局变量f3指定对 函数f1的内部函数f2的引用;内部函数f2的执行需要依赖函数f1的资源;

这里就产生一个闭包,使得f1在执行完毕并返回后,不会被javascript垃圾回收机制GC回收。

因为这里f3还在引用着f2,而f2依赖着f1,故f1在使用后,仍然存在于内存中。

简而言之:当函数f1的内部函数f2被函数f1外的一个变量引用的时候,就创建了一个闭包。

2.闭包的应用

《1》使用闭包可以在JavaScript中模拟块级作用域

function outputNumbers(count){

  (function(){

    for(var i = 0; i < count; i++){

      alert(i);
    }

  })();

  alert(i); //导致一个错误!

}

《2》实现封装

var person = function(){
        //变量作用域为函数内部,外部无法访问    
        var name = "default";
        return {
            getName : function(){
                return name;
            },
            setName : function(newName){
                name = newName;
            }
        }
    }();
    console.log(person.name);//直接访问,结果为undefined    
    console.log(person.getName());  //default
    person.setName("abruzzi");
    console.log(person.getName());  //abruzzi


《3》实现面向对象中的对象

function Animate(){
        var name = "animate";
        return {
            getName : function(){
                return name;
            },
            setName : function(newName){
                name = newName;
            }
        }
    };
    var dog = Animate();
    console.log(dog.getName());  //animate
    dog.setName("setDog");
    console.log(dog.getName());  //setDog


    var pig = Animate();
    console.log(pig.getName());  //animate
    pig.setName("setPig");
    console.log(pig.getName());  //setPig


    //pig dog  两个实例对name这个成员的访问是独立的,互不影响的
    //在vue组件数据data中  https://cn.vuejs.org/v2/guide/components.html
    //同样 通过内部封装闭包 来实现实例对象是独立 互不影响的

js闭包的理解与应用









相关文章:

  • 2022-01-17
  • 2022-02-02
  • 2021-12-28
  • 2021-06-17
  • 2022-12-23
猜你喜欢
  • 2021-11-22
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-12-23
  • 2022-12-23
  • 2021-11-14
相关资源
相似解决方案