闭包（closure）
1.有权利访问另外一个函数作用域中的变量的函数
2.函数内部变量的作用域延伸了，是一种机制。
3.明确全局变量和局部变量, 注意：局部变量一定只在函数内部使用吗？ No!
4.下面的代码，都不用es6的let。
5.闭包要用到匿名自执行函数。
理解一：
var a = "123"; //全局变量
//一
function fn1() {
let a = "321"; //局部变量
function fn2() {
console.log(a + "--" + this.a);
}
return fn2();
}
fn1();
//二
function fn3() {
let a = "321";
function fn2() {
console.log(a + "--" + this.a);
}
return fn2;
}
fn3()();
//一和二的结果都是321--123
理解二：
let data = [];
for (var i = 0; i < 3; i++) {
data[i] = function () {
console.log(i);
};
}
data[0](); //3
data[1](); //3
data[2](); //3
for (var i = 0; i < 3; i++) {
data[i] = (function (i) {
return function () {
console.log(i);
}
})(i);
}
data[0](); //0
data[1](); //1
data[2](); //2
案例一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>123</title>
</head>
<body>
<ul class="nav">
<li>北京</li>
<li>上海</li>
<li>深圳</li>
</ul>
<script>
var lis = document.querySelector('ul.nav').querySelectorAll('li');
//思路1，动态添加属性
for (var i = 0; i < lis.length; i++) {
lis[i].index = i;
lis[i].onclick = function() {
console.log(this.index);
}
}
//思路2，闭包
for (var i = 0; i < lis.length; i++) {
(function(i){
lis[i].onclick = function() {
console.log(i);
}
})(i);
}
//思路3, es6,let
</script>
</body>
</html>
案例二：
//滴滴打车，3公里以内 14元，每增加1公里收5元。
//堵车，在原来的基础上多收5元。
//输入公里数，返回钱数
//写法1
function didi(n) {
var base = 14;
if (n > 3) {
n = n - 3;
base = base + n * 5;
}
return base;
}
console.log(didi(4)); //19
//写法2
var c = (function () {
var base = 14;
var sum = 0;
return {
normal: function (n) {
if(n<=3){
sum = base;
}else{
sum = base + (n-3)*5;
}
return sum;
},
yj: function (flag) {
return flag ? sum + 5 : sum
}
}
})();
c.normal(5);
console.log(c.yj(true)); //29
