ES6 —— 闭包

---

一、变量作用域

变量根据作用域的不同分为两种：全局变量和局部变量。

1. 函数内部可以使用全局变量。
2. 函数外部不可以使用局部变量。
3. 当函数执行完毕，本作用域内的局部变量会销毁。

二、什么是闭包？

1. 闭包（closure）指有权访问另一个函数作用域中变量的函数。简单理解：一个作用域可以访问另外一个函数内部的局部变量。

	// fun 这个函数作用域 访问了另外一个函数 fn 里面的局部变量 num
    function fn(){
        let num = 10
        function fun(){
            console.log(num)
        }
        fun()
    }
    fn() //10

2. 闭包的主要作用：延伸了变量的作用范围。

	// 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

三、闭包的应用

1. 点击 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)
    }

2. 三秒后打印所有 li 元素。

	for(var i=0;i<lis.length;i++){
        (function(i){
            setTimeout(function(){
                console.log(lis[i].innerHTML)
            }, 3000)
        })(i)
    }

3. 打车价格计算

1. 起步价 13（3公里内），之后每多一公里增加 5 块钱，用户输入公里数就可以计算打车价格。
2. 如果拥堵，多收十元

	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

四、闭包总结

1. 闭包是什么：闭包是一个函数（一个作用域可以访问另外一个函数的局部变量）。
2. 闭包的作用是什么：延伸变量的作用范围。

没有产生闭包，因为并没有局部变量，所以访问到的是全局变量 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