JavaScript深入浅出————函数和作用域（闭包，作用域）（七）

一、理解闭包

 1.闭包的例子
 function outer(){
  var localVal=30;
  return localVal;
 }
 outer();//30,函数调用完，localVal被释放
 
 闭包
 function outer(){
  var localVal=30;
  return function(){
   return localVal;
  }
 }
 var func=outer();
 func();//30，localVal不能被释放
 
 2.闭包-无处不在
 !function(){
  val localData="localData here";
  document.addEventListener("click",function(){
   console.log(localData);
  });
 }();
 
 !function(){
  var localData="localDate here";
  var url="http://...";
  $.ajax({
   url:url,
   success:function(){
    //do sth...
    console.log(localData);
   }
  });
 }();
 
 3.闭包-常见错误之循环闭包
 document.body.innerHTML="<div id=div1>aaa</div><div id=div2>bbb</div><div id=div3>ccc</div>"
 for(var i=0;i<4;i++){
  document.getElementById("div"+i).addEventListener("click",function(){
   alert(i);//all are 4,点击时动态拿到i的值，此时i变成4
  });
 }
 
 document.body.innerHTML="<div id=div1>aaa</div><div id=div2>bbb</div><div id=div3>ccc</div>"
   for(var i=0;i<4;i++){
    !function(i){
     document.getElementById("div"+i).addEventListener("click",function(){
      alert(i);//all are 4,因为在点击之前4次循环以完成
     });
    }(i);
   }
 
 4.闭包-封装
 闭包可以封装一些变量
 (function(){
  var _userId=23492;
  var _typeId="item";
  var export={};
  
  function converter(userId){
   return +userId;
  }
  
  export.getUserId=function(){
   return converter(_userId);
  }
  
  export.getTypeId=function(){
   return _typeId;
  }
  
  window.export=export;
 }());
 
 export.getUserId();//23492
 export.getTypeId();//item
 
 export._userId;//undefined
 export._typeId;//undefined
 export.converter;//undefined
 
 5.闭包的概念
 维基百科的解释
 -在计算机科学中,闭包(也称词法闭包或函数闭包)是指一个函数或函数的引用,与一个引用环境绑定在一起.这个引用环境是一个存储该函数每个非局部变量(也叫自由变量)的表.
 -闭包,不同于一般的函数,它允许一个函数在立即词法作用域外调用时,仍可访问非本地变量
 
 6.闭包-小结
 优点:灵活和方法,封装
 缺点:空间浪费,内存泄漏,性能消耗
 

二、作用域

1.全局、函数、eval

var a=10;
(function(){
 var b=20;
})();// 函数有自己独立的作用域
console.log(a);//20
console.log(b);//error,b in not defined

for(var item in {a:1,b:2}){
 console.log(item);//注意：for循环中的变量相当于全局变量，在外面也可以访问到
}
console.log(item);//item still in scope

eval("var a=1;");

2.作用域链

function outer2(){
 var local2=1;
 function outer1(){
  var local1=1;
  //visit local1,local2 or global3
 }
 outer1();
}
var global3=1;
outer2();

function outer(){
 var i=1;
 var func=new Function("console.log(typeof i);");
 func();//undefined
}
outer();

3.利用函数作用域封装

(function(){
 //do sth here
 var a,b;
})();
!function(){
 //do sth here
 var a,b;
}();

三、ES3执行上下文（可选）

抽象概念：执行上下文、变量对象...

在ECMA-262第三版标准规范中定义

1、执行上下文（Execution Context ，缩写EC）

 console.log("ECO");
 
 function funcEC1(){
  console.log("EC1");
  var funcEC2=function(){
   console.log("EC2");
   var funcEC3=function(){
    console.log("EC3");
   };
   funcEC3();
  };
  funcEC2();
 }
 funcEC1();
 //EC0 EC1 EC2 EC3
 
 2.概念-变量对象
 JS解释器如何找到我们定义的函数和变量?
 变量对象(Variable Object,缩写为VO)是一个抽象概念中的"对象",它用于存储执行上下文中的:变量,函数声明,函数参数

执行上下文与变量对象