一、闭包
1.变量作用域
变量根据作用域的不同分为两种：全局变量和局部变量。
1.函数内部可以使用全局变量。
2.函数外部不可以使用局部变量。
3.当函数执行完毕，本作用域内的局部变量会销毁。
二、什么是闭包
闭包：指有权访问另一个函数作用域中变量的函数。------JavaScript高级程序设计
简单理解就是：一个作用域可以访问另外一个函数内部的局部变量。
闭包的作用：延伸了变量的作用范围
function fn(){
var num=10;
return function fun(){
console.log(num);
}
}
var f=fn();
//类似于var f=function(){
console.log(num);
}
f();
三、闭包的应用
<ul class="nav">
<li>榴莲</li>
<li>臭豆腐</li>
<li>鱼罐头</li>
<li>大猪蹄子</li>
</ul>
<script>
//闭包应用-点击li输出当前li的索引号
//1.我们可以利用动态添加属性的方式
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(this.index);
// // console.log(i);
// }
// }
//2.利用闭包的方式得到当前小li的索引
for(var i=0;i<lis.length;i++){
//立即执行函数也成为小闭包因为立即执行函数里面的每一个函数
//都可以使用他这个变量
//利用for循环创建4个立即执行函数
(function(i){
//console.log(i);
lis[i].onclick=function(){
console.log(i);
}
})(i)
}
</script>
四、闭包定时器的应用
<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++){
// setTimeout(function(){
// console.log(lis[i].innerHTML);
// },3000)
(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;
},
//拥堵之后的费用
yd:function(flag){
return flag?total+10:total;
}
}
})();
console.log(car.price(5)); //23
console.log(car.yd(true));//33
console.log(car.price(1)); //13
console.log(car.yd(false));//13
</script>
六、闭包的思考题
<script>
//没有局部变量就没有闭包的产生
var name="The Window";
var object={
name:"My Object",
getNameFunc:function(){//The Window 匿名函数指向window
return function(){
return this.name;
}
}
};
console.log(object.getNameFunc()());
// var f=object.getNameFunc();
//类似于
// var f= function(){
// return this.name;
// }
// f();
浏览器输出：The Window
//思考题2
var name="The Window";
var object={
name:"My Object",
getNameFunc:function(){
var that=this;
return function(){
return that.name;
};
}
};
console.log(object.getNameFunc()());
//var f=object.getNameFunc();
// var f=function(){
// return that.name;
// };
// f();
浏览器输出 My Object
七、闭包的总结：
1.闭包是一个函数(一个作用域可以访问另外一个函数的局部变量)
这个变量所在的函数就是闭包。
2.延伸变量的作用范围