闭包指有权访问另一个函数作用域中的变量的函数。 —Javascript高级程序设计
在这句话中,要抓住重点:闭包就是函数
简单理解就是:一个作用域可以访问另一个函数内部的局部变量
被访问的这个局部变量所在的函数,就是闭包函数
function fn() {
var num = 10;
function fun() {
console.log(num);
}
fun();
}
fn();
num属于fn()函数里面的局部变量,但是fun()可以访问到num这个局部变量,所以这段代码存在闭包现象,并且fn()为闭包函数
闭包的主要作用:延伸了变量的作用范围
局部变量只有在局部作用域中才可以使用,当这个代码块运行结束后,就会被销毁。闭包的作用就是让局部变量在局部作用域外也可以使用
代码讲解:
//我们fn 外面的作用域可以访问fn内部的局部变量
function fn() {
var num = 10;
function fun() {
console.log(num);
}
return fun;//返回一个函数
}
var f = fn(); //用f来接收这个函数 里面存的是fun函数
f(); //调用fun函数
//类似于
/* var f = function fun() {
console.log(num);
} */
这段代码实现了在fn外面的作用域,函数f访问了num变量
案例一:点击li输出索引号
方法一:利用动态添加属性的方式
<ul class="nav">
<li>苹果</li>
<li>火龙果</li>
<li>葡萄</li>
<li>樱桃</li>
</ul>
<script>
var lis = document.querySelector('.nav').querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
lis[i].index = i;
lis[i].onclick = function () {
// console.log(i); 错误写法 同步异步问题 不管点那个li输出的一直都是4
console.log(this.index);
}
}
</script>
方法二:利用闭包的方式得到当前小li的索引号(面试问题)
<ul class="nav">
<li>苹果</li>
<li>火龙果</li>
<li>葡萄</li>
<li>樱桃</li>
</ul>
<script>
var lis = document.querySelector('.nav').querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
//利用for循环创建了4个立即执行函数
//立即执行函数也称为小闭包 因为立即执行函数里面的任何一个函数都可以使用它的i这个变量
(function (i) {
lis[i].onclick = function () {
console.log(i);
}
})(i);
}
</script>
案例二:3秒钟之后,打印所有li元素的内容
<ul class="nav">
<li>苹果</li>
<li>火龙果</li>
<li>葡萄</li>
<li>樱桃</li>
</ul>
<script>
//闭包应用-3秒钟之后,打印所有li元素的内容
var lis= document.querySelector('.nav').querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
(function (i) {
setTimeout(function () {
console.log(lis[i].innerHTML);
}, 3000)
})(i);
}
</script>
案例三:计算打车价格
<script>
// 闭包应用-计算打车价格
// 打车起步价13(3公里内), 之后每多一公里增加 5块钱. 用户输入公里数就可以计算打车价格
// 如果有拥堵情况,总价格多收取10块钱拥堵费
var car = (function () {
var start = 13; //起步价 局部变量
var total = 0; //总价 局部变量
return {
//正常的总价
price: function (n) {
if (n <= 3) {
total = start;
} else {
total = start + (n - 3) * 5;
}
return total;
},
//拥堵之后的费用
jam: function (flag) {
return flag ? total + 10 : total;
}
}
})();
console.log(car.price(5));//23
console.log(car.jam(true)); //33
console.log(car.price(1));//13
console.log(car.jam(false)); //13
</script>
思考题一:是否用到了闭包,输出结果是?
var name = "The Window";
var object = {
name: "My Object",
getNameFunc: function() {
return function() {
return this.name;
};
}
};
console.log(object.getNameFunc()())
这个代码可以这样理解:
var f = object.getNameFunc();
var f = function() {
return this.name;
}
f();
这个就像 function({this})() 一个立即执行函数,里面的this指向的是window
相当于:window.name
所以输出结果是The Window
没有涉及到布局变量的使用 所以也就不存在闭包
思考题二:是否用到了闭包,输出结果是?
var name = "The Window";
var object = {
name: "My Object",
getNameFunc: function() {
var that = this;
return function() {
return that.name;
};
}
};
console.log(object.getNameFunc()())
这个类似于上一个思考题,但是这里有that变量
var f = object.getNameFunc();
var f = function() {
return that.name;
}
f();
在getNameFunc里面this指向的是函数的调用者 object
所以that指向的也是object
所以输出结果为 object.name -->My Object
这个里面return后面的函数访问了getNameFunc中的that变量,所以存在闭包