闭包

什么是闭包？使用常见场景，优缺点

1. 什么是闭包？

官方概念：闭包是指有权访问另一个函数作用域中的变量的函数

代码块：

function fn1() {
    var name = 'Fuleny'
    return function() {
        console.log(name)
    }
}

var fn2 = fn1()
fn2() 

// Fuleny

在上述代码中，闭包指的就是return function() { console.log(name) }这个函数。

这个函数在fn1函数作用域内部，所以能访问到函数内部的变量name，fn1函数内部的返回值由全局作用域下的变量fn2接收，调用fn2就可以实现在全局变量下访问局部变量中的变量的值。

一个经典的循环点击的例子：

<ul>
    <li>li_1</li>
    <li>li_2</li>
    <li>li_3</li>
    <li>li_4</li>
</ul>

var elements = document.getElementsByTagName('li'),
    length = elements.length

for (var i = 0; i < length; i++) {
    elements[i].onclick = function() {
        console.log(i);
    }
}

// 4 4 4 4

解答：

给每一个li标签绑定了click事件，但绑定的函数的作用域中没有变量i，此时i为undefined，则解析引擎就会寻找父级的作用域，父级作用域中有i，但此时的i已经循环完i已经赋值为4，所以每个li标签被点击时，控制台都会打印出4。这是作用域的问题。

闭包只能取得包含函数中任何变量的最后一个值。因为别忘了闭包所保存的是整个变量对象，而不是某个特殊的变量。

接下来使用闭包解决这个问题：

var elements = document.getElementsByTagName('li'),
    length = elements.length

for (var i = 0; i < length; i++) {
    elements[i].onclick = logLiIndex(i)
}

function logLiIndex(num) {
    return function() {
        console.log(num)
    }
}
// 0 1 2 3

// 也可以直接使用匿名闭包函数
for (var i = 0; i < length; i++) {
    elements[i].onclick = function(num){
        return function() {
            console.log(num)
        }
    }(i)
}

for (var i = 0; i < length; i++) {
    (function() {
       element(i).onclick = function() {
           console.log(i)
       } 
    })()
}

如果不想使用过多的闭包，当然使用块级作用域也可解决：

for (let i = 0; i < length; i++) {
    elements[i].onclick = function() {
        console.log(i)
    }
}

// 0 1 2 3
// 块级作用域的到来，也让令人诟病的JS有了一丝生机，补上了JS的短板

2. 闭包可被利用的常见场景

2.1 采用函数引用方式的setTimeout调用

原生的setTimeout传递的第一个函数不能带参数

setTimeout(function(params) {
	console.log(params)
}, 1000)

// undefined

如果一段代码想要通过setTimeout来调用，那么它的第一个参数需要传递一个函数对象的引用，第二个参数是需要延迟的毫秒数，但这个函数对象的引用无法为将要被执行的对象提供参数。

但是可以调用一个函数来返回一个内部函数的调用，将那个内部函数对象的引用传递给setTimeout函数。内部函数需要的参数，外部函数为传递给它。

function log(num) {
    return function() {
        console.log(`第${num}秒后打印`)
    }
}
setTimeout(log(2), 2000)

// 第2秒后打印

2.2 回调

大部分我们所写的JS代码中都是基于事件的——定义某种行为，然后添加到用户触发的事件之上(比如点击或者按键)，我们的代码通常作为回调：为响应事件而执行的函数。

例如在页面上添加一种可以调整字号的按钮：

body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
}

h1 {
    font-size: 1.5em;
}

h2 {
    font-size: 1.2em;
}

由于使用的是相对单位，只需修改body中的font-size属性，其他元素也会相对调整。

function makeSizer(size) {
    return function() {
        document.body.style.fontSize = size + 'px'
    }
}

var size12 = makeSizer(12)
var size14 = makeSizer(14)
var size16 = makeSizer(16)
// 分别将他们添加到按钮的点击事件上

document.getElementById('size_12').onclick = size12
document.getElementById('size_14').onclick = size14
document.getElementById('size_16').onclick = size16

<a href="#" id="size_12"></a>
<a href="#" id="size_14"></a>
<a href="#" id="size_16"></a>

2.3 用闭包模拟私有方法

编程语言中JAVA是支持将方法声明为私有的，而JavaScript没有这种原生支持，但可以使用闭包来模拟私有方法。私有方法不仅仅有利于限制对代码的访问：还提供了管理全局命名空间的强大能力，避免了非核心的代码弄乱了代码的公共接口。

var Counter = (function() {
    var privateCounter = 0   // 私有变量
    function changBy(val) {
        privateCounter += val
    }
    return {
        intcrement: function() {  // 三个闭包共用一个词法语境
            changBy(1)
        },
        delcrement: function() {
            changBy(-1)
        },
        value: function() {
            return privateCounter
        }
    }
})()

console.log(Counter.value()) // 0
Counter.intcrement()
Counter.intcrement()
console.log(Counter.value()) // 2
Counter.delcrement()
console.log(Counter.value()) // 1

可以把这个函数储存在另一个变量makeCounter中并用它来创建多个计数器。

var makeCounter = (function() {
    var privateCounter = 0
    function changBy(val) {
        privateCounter += val
    }
    return {
        intcrement: function() {
            changBy(1)
        },
        delcrement: function() {
            changBy(-1)
        },
        value: function() {
            return privateCounter
        }
    }
})()

var Counter1 = makeCounter()
var Counter2 = makeCounter()  // 每个闭包都是引用自己词法作用域内的变量privateCounter

console.log(Counter1.value(), Counter2.value()) // 0 0
Counter1.intcrement()
console.log(Counter1.value(), Counter2.value()) // 1 0

一个闭包内对变量的修改，不会影响另一个闭包的变量

以这种方式使用闭包，提供了许多面向对象编程的相关好处——特别是数据隐藏和封装

3. 闭包的优缺点

优点：

• 变量长期驻扎在内存中
• 避免全局变量的污染
• 可以定义私有属性和私有方法

闭包的典型框架应该就是jQuery，闭包是JavaScript的一大特点，主要应用闭包场合是为了：设计私有的方法和变量。

这在做框架的时候体现更明显，有些方法和属性只是运算逻辑过程中的使用的，不想让外部修改这些属性，因此就可以设计一个闭包来只提供方法获取。

缺点：

• 常驻内存 会增大内存的使用量 使用不当会造成内存泄露
• 可以改变父函数内部变量的值

闭包有一个非常严重的问题，那就是内存浪费问题，这个内存浪费不仅仅因为它常驻内存，更重要的是，对闭包的使用不当会造成无效内存的产生