javascript闭包和作用域链

时间:2023-09-02 11:52:08

最近在学习前端知识,看到javascript闭包这里总是云里雾里。于是翻阅了好多资料记录下来本人对闭包的理解。

首先,什么是闭包?看了各位大牛的定义和描述各式各样,我个人认为最容易一种说法:

外部函数执行完成之后,内部函数依然可以访问外部函数的成员变量。这种现象叫做闭包

看看下面的代码:

function a () {
  var temp = "hello world";
  function b () {
    alert(temp);
  }
  return b;
 }
var test = a();
test();

这是一个经典闭包例子,b在执行的时候,a已经执行过了,但是b() 依然会返回"hello world",b函数是用了a函数的成员变量这就是闭包。

还有一个典型案例这里需要说明下:

html代码:

<div id="divTest">
  <span>0</span> <span>1</span> <span>2</span> <span>3</span>
</div>

js代码:

var spans = $("#divTest span");
  for (var i = 0; i < spans.length; i++) {
  spans[i].onclick = function () {
    alert(i);
  }
}

结果是每个span点击都弹出4,并不是我们想象的0,1,2,3

这因为在实际点击的时候还是能访问外部函数(外部函数已经执行结束,但是没有被销毁)的成员变量i,

由于每次外部函数在执行的时候都会重建作用域链中的变量,所以会发现循环了4次i之后,每个span的点击都是4。

一般解决这种闭包问题就是把公用的变量变成自己的,所以这样就这么解决。
var spans = $("#divTest span");
for (var i = 0; i < spans.length; i++) {
  spans[i].onclick = function () {
    var x = i;
    alert(x);
  }
}
这样大家都不公用父函数的,而是用自己的就正常了。
关于作用链只要记住以下几点就可以啦:
1.javascript中全局变量不能访问局部的变量,局部变量可以访问全局变量。
2.在局部中使用变量,如果当前函数中没有该变量,解析器会自动去父级作用域中寻找,如果父级没有会继续寻找更上一级的作用域,直到找到全局作用域如果还没有则返回undefined。
3.作用链就是逐级向上找的一个过程。