这是我参与「第四届青训营 」笔记创作活动的的第11天
1 什么是闭包
闭包（closure）指有权访问另一个函数作用域中变量的函数。简单理解就是 ，一个作用域可以访问另外一个函数内部的局部变量。
自己的局部变量被另一个函数用的，才是闭包函数
<script>
function fn1(){
// fn1 就是闭包函数
var num = 10;
function fn2（）{
console.log(num)：// 10
}
fn2()
}
fn1()；
</script>
2 闭包的作用
作用：延伸变量的作用范围
function test() {
const a = 1;
return function () {
console.log('a', a);
};
}
const fn = test();
const a = 2;
fn(); // a 1
function test(fn) {
const a = 1;
fn();
}
const a = 2;
function fn() {
console.log('a', a);
}
test(fn); // a 2
function fn() {
var num = 10;
function fun() {
console.log(num);
}
return fun; // 使用return 把局部变量传递出去，使得num局部变量不会立即销毁，它会等全部函数都调用完了才销毁
}
// 使得全局作用域可以调用局部变量num
var f = fn();
f();
3 闭包的案例
3.1 利用闭包的方式得到当前 li 的索引号
重点：利用立即执行函数
// 闭包应用-点击li输出当前li的索引号
// 1. 我们可以利用动态添加属性的方式
var lis = document.querySelector('.nav').querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
lis[i].index = i; // 方法1.的重点在这
lis[i].onclick = function() {
// console.log(i);
console.log(this.index);
}
}
// 2. 利用闭包的方式得到当前小li 的索引号
for (var i = 0; i < lis.length; i++) {
// 利用for循环创建了4个立即执行函数
// 立即执行函数也称为小闭包；因为立即执行函数里面的任何一个函数都可以使用立即执行函数的k变量
(function(k) {
lis[k].onclick = function() {
console.log(k);
}
})(i); // 方法2.的重点在这；立即执行函数()()第二个括号可以传入参数
}
// 3. 使用ES6的let
var lis = document.querySelector('.nav').querySelectorAll('li');
for (let i = 0; i < lis.length; i++) { // 方法3.的重点在于把var i改成let i
lis[i].onclick = function () {
console.log(i);
};
}
3.2 3秒钟之后,打印所有li元素的内容
for (var i = 0; i < lis.length; i++) {
(function(k) {
setTimeout(function() {
console.log(lis[k].innerHTML);
}, 3000)
})(i);
}
3.3 闭包应用-计算打车价格
/*需求分析
打车起步价13(3公里内), 之后每多一公里增加 5块钱. 用户输入公里数就可以计算打车价格
如果有拥堵情况,总价格多收取10块钱拥堵费*/
var car = (function() {
var start = 13; // 起步价 局部变量
var total = 0; // 总价 局部变量
return {
// return的是一个对象，该对象里面含有2种不同的方法
price: function(n) {
if (n <= 3) {
total = start;
} else {
total = start + (n - 3) * 5
}
return total;
},
// 拥堵之后的费用
yd: function(flag) {
return flag ? total + 10 : total;
}
}
})();
console.log(car.price(5)); // 23 像调用对象一样调用return里面2种不同的方法
console.log(car.yd(true)); // 33
4 retun 一个函数，产生闭包
- 一般来说，return 一个函数，才能为执行闭包函数里面的函数创造条件，才会产生闭包（这也是为啥第4章要先提一下高阶函数）
function makeFunc() {
var name = 'Mozilla';
function displayName() {
alert(name);
}
return displayName;
}
makeFunc(); //光是这样，是不能调用displayName()这个内部函数的
makeFunc()(); //通过立即执行函数，就能调用displayName()
var myFunc = makeFunc();
myFunc();
/*
这样也能调用displayName()
以上代码相当于：
1.先执行myFunc()；但是由于myFunc = makeFunc()，所以myFunc需要等makeFunc()返回值返回后再执行
2.然后执行makeFunc()，返回了displayName() 这个函数
3.再回过头来执行myFunc()，也就是执行了displayName()
*/
- 有些操作必须要执行一个函数，比如DOM事件，这时候 return 一个函数 就非常重要了：
<body>
<a href="#" id="size-12">12</a>
<a href="#" id="size-14">14</a>
<a href="#" id="size-16">16</a>
<script type="module">
function makeSizer(size) {
document.body.style.fontSize = size + 'px';
}
document.getElementById('size-12').onclick = makeSizer(12);
document.getElementById('size-14').onclick = makeSizer(14);
document.getElementById('size-16').onclick = makeSizer(16);
// 这样是不能达到点击按钮切换字体大小的效果的
</script>
</body>
---------------------------------------------------------------------------------
<body>
<a href="#" id="size-12">12</a>
<a href="#" id="size-14">14</a>
<a href="#" id="size-16">16</a>
<script type="module">
function makeSizer(size) {
return function () { // return 一个函数 就可以了
document.body.style.fontSize = size + 'px';
};
}
document.getElementById('size-12').onclick = makeSizer(12);
document.getElementById('size-14').onclick = makeSizer(14);
document.getElementById('size-16').onclick = makeSizer(16);
</script>
</body>
案例对比：
var name = "The Window";
var object = {
name: "My Object",
getNameFunc: function() {
return function() {
return this.name;
};
}
};
console.log(object.getNameFunc()())
// 打印出来的是The Window
以上代码相当于：
1.先执行第一个括号，也就是先执行 object.getNameFunc()
2.然后object.getNameFunc()返回了一个 “函数”
3.再执行第二个括号，也就是再执行 “函数”()
----------------------------------------------------------------------------------
var name = 'The Window';
var object = {
name: 'My Object',
getNameFunc: function () {
var that = this;
return function () {
return that.name;
};
},
};
console.log(object.getNameFunc()());
// 打印出来的是My Object
以上代码相当于：
1.先执行第一个括号，也就是先执行 object.getNameFunc()
2.然后var that = this; 之后object.getNameFunc()再返回一个 “函数”，
因为等一下要执行的“函数”里面含有getNameFunc()的局部变量的that，所以它是闭包函数
3.再执行第二个括号，也就是再执行 “函数”()
