闭包这个概念作为前端来说算是耳熟能详了,基本是面试的时候必问的问题,基本上随便找个前端都能说出点什么。 闭包指的是:能够访问另一个函数作用域的变量的函数。清晰的讲:闭包就是一个函数,这个函数能够访问其他函数的作用域中的变量 例如下面这个例子eg1:
function A() {
var b = 1
function C() {
console.log(b) // 函数C就是一个闭包
return b++
}
return C
}
复制代码
通常我们面试的时候都会给这么一个例子。 之前面试的人还给我们写出了这么一个例子eg2:
var b = 1
function A() {
console.log(b)
return b++
}
复制代码
我当时直接就否定了他,说这不是。直到今晚我又一次读高程的时候,里面也写到了这么一个例子,我顿时感到一阵后怕,马上又看了一下闭包的概念。书中说到:该函数能使用函数外定义的变量,那么我们来看上面的那个例子不正是这样子的吗?顿时一顿汗颜。那么我们来说说闭包的使用场景和优缺点吧。
1.优点
1.从外部访问函数的变量
通过上eg1可以看出我们执行A()的时候会给我们返回函数C并且携带了变量b,这能为我们做什么事情呢?看下面一个例子eg3:
复制代码
function create_counter(initial) {
var x = initial || 0
return {
function inc() {
x += 1
return x
}
}
}
var c1 = create_counter()
c1.inc() // 1
c1.inc() // 2
c1.inc() // 3
var c2 = create_counter(10)
c2.inc() // 11
复制代码
2.模拟块级作用域 eg4:
function count() {
var arr = []
for (var i=1; i<=3; i++) {
arr.push(function () {
return i * i
});
}
return arr
}
var c1 = count()
var f1 = c1[0]
var f2 = c1[1]
var f3 = c1[2]
复制代码
看上面的代码我们也许会想到返回的arr是三个函数分别是
c1 = [function() {return 11}, function() {return 22}, function() {return 3*3}] 依次调用f1,f2,f3会得到1,4,9,但是结果都是16 原因就在于返回的函数引用了变量i,但它并非立刻执行。等到3个函数都返回时,它们所引用的变量i已经变成了4,因此最终结果为16。 那么按照闭包的定义我们对以上代码做修改 eg5:
function count() {
var arr = []
for (var i=1; i<=3; i++) {
arr.push((function (n) {
return n * n
})(i));
}
return arr
}
var c1 = count()
var f1 = c1[0]
var f2 = c1[1]
var f3 = c1[2]
复制代码
这里使用了匿名函数的自调用,在函数内部使用就是一个闭包,因为它能反问外部函数的任何变量。现在再执行就会得到1,4,9 当然有了es6的let后已经不需要这么麻烦了。
缺点
1.this的指向问题
eg6:
var INFO = {
name: '哈哈哈',
sayName: function () {
return function () {
console.log(this.name)
}
}
}
复制代码
因为这里的执行环境是window了所以这里的this指向不是INFO了。
2.内存泄露问题 eg7:
function test() {
var a = 1
function innerFunc () {
console.log(a)
}
return innerFunc
}
var f1 = test()
f1() // 1
复制代码
按照js的回收机制是执行完就回收,那么执行完test 变量就应该被回收了,但是没有,因为返回的innerFunc中使用了变量a,所以test不能被回收,如何避免呢,那就是执行完以后手动清除。
菜鸡一个,有错误请指出。