js闭包的研究

 

在看书遇到了讲解js闭包的地方，讲的太学术了 根本不明白 最近在网上搜集了些资料 发现了一些通俗易懂的讲解 终于弄明白了

要理解闭包，首先必须理解Javascript特殊的变量做用域。

变量的做用域无非就是两种：全局变量和局部变量。

Javascript语言的特殊之处，就在于函数内部能够直接读取全局变量。

Js代码

　　var n=10;

　　function f1(){
alert(n);
}

　　f1(); //10

另外一方面，在函数外部天然没法读取函数内的局部变量（而经过闭包的形式就能够实现）。

Js代码

　　function f1(){
var n=999;
}

　　alert(n); // error

这里有一个地方须要注意，函数内部声明变量的时候，必定要使用var命令。若是不用的话，其实是声明了一个全局变量！

Js代码

function f1(){
n=10;
}

　　f1();

　　alert(n); // 10

 

 但咱们有时候须要获得函数内的局部变量,咱们怎么得到呢？其实经过闭包的形式就能够实现了。

在Javascript语言中，只有函数内部的子函数才能读取局部变量，所以能够把闭包简单理解成“定义在一个函数内部的函数”。
 因此，在本质上，闭包就是将函数内部和函数外部链接起来的一座桥梁

 闭包能够用在许多地方。它的最大用处有两个，一个是前面提到的能够读取函数内部的变量，另外一个就是让这些变量的值始终保持在内存中
 如下是个js闭包的使用  其中内部函数getNum()就是个闭包函数， nAdd是个全局的匿名闭包函数

function getcounts(){
   var n = 10;
  
   nAdd = function(count){
       n += count;
   }
  
   function getNum(){
       alert(n);
   }

   return getNum;
}

var one = getcounts();

function gotoPage(){
    one();
 nAdd(2);
}

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

问题：有关js做用域链的问题

var name = "The Window";  
var object = {  
name : "My Object",  
getNameFunc : function(){  
return function(){  
return this.name;  
};  
}  
};  
alert(object.getNameFunc()()); //The Window

最近刚刚研究js闭包 小弟不明白为何结果是The Window 而不是My Object
name不是全局变量么？ 外层的name不该该被object中的覆盖么？

答：

当在函数中访问一个变量的时候，搜索顺序是先搜索自身的活动对象（即return的function)，若是存在则返回，若是不存在将继续做用域链 上一个函数(即getNameFunc), 在return 的function做用域中是存在this.name的，即window.name，因此没有必要再向上一个做用域去找。

function才是做用域， object={}不是做用域。第一个做用域this就是有的啊，就是window对象，因此不用在找了。

this去掉以后在return function的做用域和getNameFunc的做用域中都找不到name了，只能到全局做用域中找到name = The Window。

var name = "The Window";
var object = {  
name : "My Object",  
getNameFunc : function(){  
return function(){  
return name;  
};  
}  
};  
alert(object.getNameFunc()()); //The Window

 

当你你试着写成这样时，由于如今return function的做用域，找不到再到和getNameFunc的做用域中找就找到了name=test var name = "The Window";   var object = {   name: "My Object",   getNameFunc: function () {   var name = "test";   return function () {   return name;   };   }   };   alert(object.getNameFunc()()); //test