浅谈JS闭包

闭包一直是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)的运行机制

posted @ 2019-03-05 00:52  进击的白菜  阅读(132)  评论(0编辑  收藏  举报