js中的闭包

我们先来了解几个概念:
变量作用域
变量作用域两种:全局变量、局部变量。js中函数内部可以读取全局变量,函数外部不能读取函数内部的局部变量。
作用域链:
当代码在一个环境中执行,会创建变量对象的一个作用域链。子对象会一级一级向上寻找所有父对象的变量,反之不行。
立即执行函数:
( function(){…} )()和( function (){…} () )是两种javascript立即执行函数的常见写法;

闭包概念
闭包就是能够读取其他函数内部变量的函数,或者子函数在外调用,子函数所在的父函数的作用域不会被释放。

看一个例子:

html部分:
  • click me1
  • click me2
  • click me3
  • click me4
js部分: var elements = document.getElementsByTagName('li'); var length = elements.length; for (var i = 0; i < length; i++) { elements[i].onclick = function() { console.log(i) } }

js代码中的匿名函数没有变量 i,所以它必须向上查找,在全局环境中找到了 i。
当for循环运行后,全局变量中的 i 变成了4。此时当你点击li的时候,会调用其绑定的函数,而该函数运行的时候,发现自己没有 i,就会取得全局环境中的 i。
所以,最后的结果是不管你点击哪一个li,打印的结果都是4。

不是我想要的效果,尝试使用立即执行函数,代码如下:

for (var i = 0; i < length; i++) {
    elements[i].onclick = function(num) {
      return function(){
        console.log(num)
      }
    }(i)
  }

将 i 作为参数传给立即执行函数,这样 i 的值就传给了立即执行函数的局部变量 num ;return的匿名函数就能找到需要的正确变量值了。
这种方法就能实现了我们想要的结果,点击每个li 都能弹出对应的index

对于闭包这部分本人理解的不是特别好,大家可以去看看:学习js闭包

你可能感兴趣的:(JavaScript,javascript)