一、变量作用域
变量根据作用域的不同分为两种：全局变量和局部变量。
- 函数内部可以使用全局变量。
- 函数外部不可以使用局部变量。
- 当函数执行完毕，本作用域内的局部变量会销毁。
二、什么是闭包？
- 闭包（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
