在看书遇到了讲解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