理解js中的闭包

闭包 我的理解是 能够有权访问另一个函数作用域中变量的函数

 

通常我们知道 普通的函数在调用完成之后，活动对象不会从内存中销毁，其执行环境的作用域链会被销毁，造成资源的浪费 而闭包的好处就在于执行完就会被回收 不会造成资源的极大的浪费 性能也会相应的提升~

闭包的几种写法

//当只有一个返回的内部函数时候

//第一种写法
function test1(a,b){

    return function(c){
          console.log(a + b + c);
      }

  }
  var m1 = test1(2,4);
  m1(5);

//输出 11


//第二种写法

function test2(a,b){
        var name = 'xsdsfsfsdxcxcx';

      function xx(c){
            console.log(a + b + c);
        }
      return xx;
    }
    var m2 = test2(2,4);
    m2(5);

//输出 11

若有多个需要返回的内部函数 可使用对象的方法一一列举出来 又称模块模式

// 多个返回的内部函数
  function test2(a,b){
      var name = 'xsdsfsfsdxcxcx';

    function xx(c){
          console.log(a + b + c);
    }
    function ss(){
      // js中replace默认只替换查找到的第一个值 若要替换多个值需要使用正则
      var _replace = name.replace('x','aa');
      console.log(_replace);
    }
    function allReplace(){
      var re = /x/g;
      var _replace = name.replace(re,'X');
      console.log(_replace);
    }
    return {
      xx : xx,
      ss : ss,
      allReplace: allReplace
    }
  }
  var m2 = test2(2,4);
  m2.ss();     //输出  aasdsfsfsdxcxcx
  m2.xx(3);    //输出  9
  m2.allReplace(); //输出 XsdsfsfsdXcXcX

 

简单的案例看下 静态方法和实例方法的区别

 1 var test1 = function(){
 2 
 3 }
 4 test1.Show = function(){
 5     alert('静态方法！');
 6 }
 7 test1.prototype.Display = function(){
 8     alert('实例方法！');
 9 }
10 
11 test1.Show();                       //静态方法   只能直接用类名进行调用 不能使用this
　　　　　　　　　　　　　　　　　　　　　　 //函数才有prototype属性 对象是没有的

12 test1.Display();                    //报错  这是一个是实例方法 必须先实例化后才能进行调用
13 
14 
15 var Demo = new test1();
16 Demo.Display();                    //实例方法

再来看一段代码

var dom = function(){
        var Name = "Default";
        this.Sex = "Boy";
        this.success = function(){
            alert("Success");
        };
};
 
alert(dom.Name);      //undefined         这是因为每个function都会形成一个作用域 而这些变量声明在函数中 所以就处于这个函数的作用域中 外部是无法访问的 必须new一个实例
alert(dom.Sex);       //undefined

再来一段代码

var html = {
        Name:'Object',
        Success:function(){
            this.Say = function(){
                    alert("Hello,world");
            };
            alert("Obj Success");
        }
};
//html是一个对象，不是函数，所以没有Prototype属性，其方法也都是公有方法，html不能被实例化。
//我们可以这样使用它 html.Name 和 html.Success()
//当然我们也可以将这个对象作为一个值赋给其他变量 比如 var a = html

那么问题来了 我们该如何访问Success方法中的Say方法呢 难道是html.Success.Say()吗？ 当然这样式错误的啦  因为在Say方法中又开始了一个新的function形成新的作用域 肯定是访问不到里面的内容啦 

得做点修改 比如

 1 var s = new html.Success(); 
 2 s.Say();        //Hello,world
 3 
 4 
 5 //或者写在外面
 6 html.Success.prototype.Show = function(){
 7     alert("HaHa");
 8 };
 9 var s = new html.Success();
10 s.Show();
 

 

说了这么多 那么闭包的用途到底是什么呢？

事实上通过使用闭包 我们可以做很多事情 比如模拟面向对象的代码风格 更优雅 更简洁的表达出代码 这是一个有点追求美感的程序员应该做的 而且在某些方面可以提升代码的执行效率

 1 匿名自执行函数

var data  = {
       arr : [2,5,2,4,333],
       tree : {}
  }
  (function(x){
    var row,
        new_arr = [];
      for(var i = 0; i < x.arr.length; i ++){
        row = x.arr[i];
        new_arr.push(row);
      }
      return new_arr;
  })(data)   //输出 [2,5,2,4,333]
    

创建了一个匿名函数 并立即执行 由于外部无法直接访问内部的变量 因此在函数执行完成后会立刻释放资源 还不会污染全局变量

 

2 缓存作用

将计算结果缓存在内部 之后再调用的话就可以直接使用

 

3 封装

var package  = function(){
      var name = '张三';

      return {
          getName : function(){
              return name;
          },
          setName : function(names){
              name = names;
              return name;
          }
      }
}();

package.getName();         //张三
package.setName('李四');  // 李四

package.name;                //undefined

 

4 类和继承

 

function Mother(){
  var eye = 'default';

  return {
    getName : function(){
      return eye;
    },
    setName :  function(newName){
      name = newName;
      return name;
    }
  }
}

var M = new Mother();
M.getName();
M.setName('beautiful!');

var Person = function(){

}
//继承
Person.prototype = M;
Person.prototype.Say = function(){
  console.log('这是私有方法！');
}
var p = new Person();
p.getName();    
p.setName('hah');
p.Say();