最近正在整理一些JS的基础知识,看见闭包这个词,突然觉得有必要记录一下:
在ES6的块级作用域出现之前,是没有块级作用域的概念的,这就导致当想访问一个函数内部变量的时候,会出现一定的困难,这个时候闭包就出现了。
我们最初接触闭包的时候,很大概率是通过以下情况:
function fn(){
var li = document.getElementsByTagName("li");
for(var i = 0; i < li.length; i++){
li[i].onclick = function(){
console.log(i);
}
}
}
fn();
运行的结果是这样的:每点击一个li,打印出来的都是 li的长度;为什么会出现这么个结果呢?这就从JS中的作用域链讲起。
什么是JS的作用域链?
简单来说就是在函数中所能访问的变量按照层级关系所组成的一条有着先后顺序的链子。所以每个函数最先能访问的变量(也就是在这条链子上最先能接触到的)是当前函数的活动对象(就是在函数当中定义或重新赋值的变量),其次下一个能访问的变量就是当前的函数所在的包含环境。然后是下下个包含环境。这样一层层的找下去,直到找到全局执行环境为止。
所以,以上题目的结果,可以解释:每个li标签的onclick事件执行时,本身onclick绑定的function的作用域中没有变量i,i为undefined,则解析引擎会寻找父级作用域,发现父级作用域中有i,且for循环绑定事件结束后,i已经赋值为4,所以每个li标签的onclick事件执行时,打印的都是父作用域中的i,也就是4。这是作用域的问题。
所以根据以上解释,我们只能把i存放在一个变量之中,这时候闭包就出现了:
function fn(){
var li = document.getElementsByTagName("li");
for(var i = 0; i < li.length; i++){
li[i].onclick = function(n){
return function(){
console.log(n);
}
}(i)
}
}
fn();
所以闭包的含义就很明显了:闭包是指有权访问另一个函数作用域中的变量的函数。
那么闭包的作用:
1、可以在函数的外部访问到函数内部的局部变量。
2、让这些变量始终保存在内存中,不会随着函数的结束而自动销毁。