js常见面试题之闭包

什么是闭包

《JavaScript高级程序设计》这样描述：

闭包是指有权访问另一个函数作用域中的变量的函数；

最常见的闭包结构如下

function aaa(){
  var name = "xxx"
  return function bbb(){
    alert(name);
  }
}

如上代码，bbb函数内可以访问aaa函数作用域内的变量

闭包的特性

看一下这一段的封装，jQuery也采用了类似的封装方式，外部的方法和变量就不会污染闭包内部的东西，同时，闭包内的变量也会有效的保存下来

function person(name) {
    // 变量作用域为函数内部，外部无法访问，防止了变量名冲突和污染
    var name = '小明';
    return {
        sayName: function() {
            alert(name)
        },
        changeName: function(newName) {
            name = newName
        }
    }
}
// 外部无法访问内部变量
console.log(person.name) // undefiend
console.log(person.changeName('小白'))
// 这里修改的name会保存下来
console.log(person.sayName()) // 小白

常见的定时器问题

for( var i = 0; i < 5; i++ ) {
    setTimeout(() => {
        console.log( i );
    }, 1000)
}

得到结果 5个5
setTimeout函数在当前执行队列的最后执行，获取到的i是最外部作用域的i=5,所以得到5个5

那么如果想1s后得到0-4怎么做？在for循环内创建闭包

for (var i = 0; i < 5; i++) {
    (function(j) {
        setTimeout(function() {
            console.log(j);
        },1000)
    })(i)
}

同样setTimeout在执行队列的最后执行，获取到的j是外部函数的j,由于闭包中的变量会保存下来，每一次获取的j分别是0,1,2,3,4

注意事项

由于闭包会常驻内存，使用不当会导致内存溢出。

测试题

function fun(n, o) {
    console.log(o);
    return {
        fun: function(m) {
            return fun(m, n);
        }
    };
}

var a = fun(0); // ?
a.fun(1); // ?
a.fun(2); // ?
a.fun(3); // ?
var b = fun(0).fun(1).fun(2).fun(3); // ?
var c = fun(0).fun(1); // ?
c.fun(2); // ?
c.fun(3); // ?