关于闭包的理解

Posted 2021-02-12 advancecabbage

闭包一直是JS中比较难于理解的部分，也是面试中经常遇到的问题，下面开始我关于闭包的理解，希望能帮助你理解闭包

1.什么是闭包？

　　我对于闭包的定义：内部函数被外部函数之外的变量引用的时候就形成了闭包。

2.闭包有什么用？

　　1）闭包能允许外部环境引用内部变量，内部变量是私有化变量，在防止全局污染的时候又长久的保留了局部变量（当然闭包不释放就会造成内存的使用，我们可以使用null释放内存）

 1  
 2             function grandF(){
 3                 var name ="son";
 4                 function parent(){
 5                     return name;
 6                 }        
 7                 return parent;
 8             }
 9             var lala =  grandF()();
10             console.log(lala);//son
11             lala = null;
12             console.log(lala);//null 销毁闭包，释放内存

　　 2）闭包实现缓存

　　 3) 封装

 var person = function(){
                   var name ="yang";
                   return {
                        getName:function(){
                       return name;
                   },
                   setName:function(newName){
                        name =newName; 
                   }
                   }
           }();
           console.log(person.name);//undefined
           console.log(person.getName());//yang
           person.setName("hao");
           console.log(person.getName())//hao

　　 4）实现类和继承

function Person(){    
    var name = "default";       
       
    return {    
       getName : function(){    
           return name;    
       },    
       setName : function(newName){    
           name = newName;    
       }    
    }    
    };   

    var p = new Person();
    p.setName("Tom");
    alert(p.getName());

    var Jack = function(){};
    //继承自Person
    Jack.prototype = new Person();
    //添加私有方法
    Jack.prototype.Say = function(){
        alert("Hello,my name is Jack");
    };
    var j = new Jack();
    j.setName("Jack");
    j.Say();
    alert(j.getName());

3.什么时候使用闭包？

　　变量想要重复使用，并且不想污染全局环境的时候

4.闭包的缺点？

　　占用更多内存，不容易被释放。

　　在 Javascript 中，如果一个对象不再被引用，那么这个对象就会被 GC 回收，否则这个对象一直会保存在内存中，在第一个闭包的例子中parent定义在grandF中，parent依赖于grandF，而外部变量lala引用了parent，所以grandF间接被引用，所以不会被自动回收

5.闭包的高级写法

(function (document) {
    var viewport;
    var obj = {
        init: function(id) {
           viewport = document.querySelector(‘#‘ + id);
        },
        addChild: function(child) {
            viewport.appendChild(child);
        },
        removeChild: function(child) {
            viewport.removeChild(child);
        }
    }
    window.jView = obj;
})(document);

6.总结：这是对闭包最简单的理解，当然闭包还有其更深层次的理解，这个就涉及的多了，你需要了解JS的执行环境(execution context)、活动对象(activation object)以及作用域(scope)和作用域链(scope chain)的运行机制