一、变量作用域
变量根据作用域的不同分为两种：全局变量和局部变量。
- 函数内部可以使用全局变量。
- 函数外部不可以使用局部变量。
- 当函数执行完毕，本作用域内的局部变量会销毁。
二、什么是闭包？
- 闭包（closure）指有权访问另一个函数作用域中变量的函数。简单理解：一个作用域可以访问另外一个函数内部的局部变量。
// fun 这个函数作用域 访问了另外一个函数 fn 里面的局部变量 num
function fn(){
let num = 10
function fun(){
console.log(num)
}
fun()
}
fn() //10
- 闭包的主要作用：延伸了变量的作用范围。
// fn 外面的作用域可以访问fn 内部的局部变量
function fn(){
let num = 10
// 方法一: 先定义再返回函数
function fun(){
console.log(num)
}
return fun //返回 fun函数
}
let f = fn()
f() //10
// fn 外面的作用域可以访问fn 内部的局部变量
function fn(){
let num = 10
// 方法二: 直接返回函数
return function(){
console.log(num)
}
}
let f = fn()
f() //10
三、闭包的应用
- 点击
li输出li的索引号。
不使用闭包的方法：因为 for 循环是同步任务，下面的点击函数是个异步任务。所以点击时，for 已经执行完毕，输出的都是 4（不可以正常执行）。但我们可以使用 let 声明，因为 let 是块级作用域（可以正常执行）。
<ul class="nav">
<li>苹果</li>
<li>香蕉</li>
<li>西瓜</li>
<li>火龙果</li>
</ul>
let lis = document.querySelector('.nav').querySelectorAll('li')
for(var i=0;i<lis.length;i++){
lis[i].onclick = function(){
console.log(i)
}
}
不使用闭包，也不使用 let 声明的话，我们可以先给每个 li 赋值，再添加点击事件。（可以正常执行）
<ul class="nav">
<li>苹果</li>
<li>香蕉</li>
<li>西瓜</li>
<li>火龙果</li>
</ul>
let 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)
}
}
使用闭包：把 for 循环放在立即执行函数里面执行（可以正常执行）。
<ul class="nav">
<li>苹果</li>
<li>香蕉</li>
<li>西瓜</li>
<li>火龙果</li>
</ul>
let 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)
}
- 三秒后打印所有
li元素。
for(var i=0;i<lis.length;i++){
(function(i){
setTimeout(function(){
console.log(lis[i].innerHTML)
}, 3000)
})(i)
}
- 打车价格计算
- 起步价 13（3公里内），之后每多一公里增加 5 块钱，用户输入公里数就可以计算打车价格。
- 如果拥堵，多收十元
let car = (function(){
let start = 13 //起步价
let total = 0 //总价
return {
//正常价格
price(n){
if(n <= 3){
total = start
}else{
total = start + (n - 3) * 5
}
return total
},
// 拥堵后的价格
jam(flag){
return flag ? total + 10 : total
}
}
})()
console.log(car.price(3)) //13
console.log(car.jam(true)) //23
console.log(car.jam(false)) //13
四、闭包总结
- 闭包是什么：闭包是一个函数（一个作用域可以访问另外一个函数的局部变量）。
- 闭包的作用是什么：延伸变量的作用范围。
没有产生闭包，因为并没有局部变量，所以访问到的是全局变量
The Window
let name = 'The Window'
let object = {
name: 'My Object',
getNameFunc(){
return function(){
return this.name
}
}
}
let f = object.getNameFunc()
console.log(f()) //The Window
产生了闭包：因为 this 在函数内部被赋值给了 that，指向的是 object 这个对象。
let name = 'The Window'
let object = {
name: 'My Object',
getNameFunc(){
let that = this
return function(){
return that.name
}
}
}
let f = object.getNameFunc()
console.log(f()) //My Object