闭包理解
- 首先谈谈变量作用域
我们都知道JavaScript是以函数来创建作用域的，说白了，一个函数内部就是一个小的作用域，外部是不能访问内部的变量的。但是函数内部却可以访问函数外边定义的变量。 - 变量的生命周期
如果是在函数外边定义的变量，我们可以在全局任何地方使用，所以这个变量是不会被销毁的，除非我们自己主动去销毁他。但是函数内部的变量就不一样了，如果这个函数不调用那么这个变量就没有存在的意义，同理，函数调用完成，这个变量也就没用了，所以当函数调用完成，这个变量就会自己销毁。 - 闭包解决什么问题
我们如果就是需要在外部访问函数内部的变量，怎么办？
这个时候JavaScript给我们提供了闭包，通过闭包我们外部访问内部的变量，也由于我们在外部访问它，所以这个函数内部的变量不会随着函数调用结束而销毁。作用域和周期都变了。
下面举一个例子：
经典面试题：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 30px;
height: 30px;
display: inline-block;
border: 1px solid black;
margin: 15px;
text-align: center;
cursor: pointer;
}
</style>
</head>
<body>
<div id="1">1</div>
<div id="2">2</div>
<div id="3">3</div>
<div id="4">4</div>
<div id="5">5</div>
</body>
<script>
var nodes = document.getElementsByTagName('div')
for(var i = 0, len = nodes.length; i < len; i++) {
nodes[i].onclick = function() {
console.log(i);
}
}
</script>
</html>
执行之后效果：
运行结果.jpg
我们点击按钮
点击结果.jpg
发现每个值都是5，但是我们需要的是显示0-4。
很明显点击函数是一个异步操作，我们内部访问函数外部的变量i，但是当我们点击的时候其实外部的i早就变成了5，所以我们访问外部i时候输出结果是5。
for(var i = 0, len = nodes.length; i < len; i++) {
(function(i) {
nodes[i].onclick = function() {
console.log(i)
}
})(i)
}
如果我们改成这样，我们把i作为参数传到内部，此刻内部形成一个闭合区域。而且我们之前传过0-4，就会在内部创建0-4，这5个值是不会受到外界影响的。这个时候当我们点击i的时候对应的就是当前的index。
同理我们使用闭包来封装一些函数
经典面试题：
var Type = {};
for(var i = 0; type = ['String', 'Array', 'Number'][i++];) {
(function(type){
Type['is'+type] = function(obj) {
return Object.prototype.toString.call(obj) === '[object '+type+']'; // 这块注意空格
}
})(type)
}
console.log( Type.isArray([]) );
console.log( Type.isString("str") );
我们同时封装了三个函数,isString、isArray、isNumber。
是不是感觉很好用，除此之外还有好多地方用到了闭包，在之后我会细细说明。
