闭包
闭包就是能够将函数内部的变量与外部进行通信的一座桥梁。
function f() {
var n = 100
console.log(n) // 100
}
console.log(n) // ReferenceError: n is not defined
f()
我们定义了一个函数，函数在下面f()被调用，函数就会从上往下执行，执行完之后函数内部的声明的变量都会被清空掉，函数内部的变量是对外界不开放的
- 假如我们想要在另外一个函数里使用这个变量n我们有哪些方法哪？
function f() {
var n = 100
console.log(n) //100
function increment () {
n = n + 1;
console.log(n) //101
}
increment()
}
f()
我们在f()函数里定义了一个increment()函数，里面使用了变量n,这次并没有报错。这就是js里链式作用域，进行冒泡似的查找变量声明。
上面的例子，我们看到了一个函数体内定义了另外一个函数。我们知道js中函数是可以作为变量传递的，那么我们修改一下上面的例子
function f(increment) {
var n = 100
console.log(n) // 100
increment(n) //调用
}
f(function(n) {
console.log(n + 1) // 101
})
发生了什么，我们将increment函数作为变量传给了f函数，大家看完这个例子是不是感觉有点熟悉的感觉。我们加入一些打印看下执行顺序
function f(increment) {
console.log("f函数开始")
var n = 100
console.log(n) // 100
increment(n) //调用
console.log("f函数结束")
}
f(function(n) {
console.log(n + 1) // 101
console.log("increment函数")
})
//打印顺序
// f函数开始
// 100
// 101
// increment函数
// f函数结束
我们看到在f函数里是从上下到下一次执行的，其实上面的例子和下面的事等价的
function f() {
var increment = function(n) {
console.log(n + 1)
}
var n = 100;
console.log(n) // 100
increment(n) // 101
}
f()
好了，说了这么多闭包到底可以干啥类。就如我们上面所说的，可以捕获函数里的变量，比如我们函数体内有一个异步操作，我们想在这个函数执行完这些异步操作之后
就可以把这些数据传出去供别人使用了。
function getData(successCallBack) {
console.log("getData函数开始执行")
setTimeout(function() {
console.log("执行回调")
successCallBack("这些是数据")
}, 3000);
console.log("getData函数体结束")
}
getData((data) => {
console.log(data)
})
//执行结果如下
// getData函数开始执行
// getData函数体结束
// 执行回调
// 这些是数据
闭包会造成内存泄漏，下面我们玩个游戏1,1,2,3,5,8,13,21,34...求第n位是多少！一个经典的算法题
- 使用递归
var count = 0
function fib (num) {
console.log(count ++)
if (num <= 0) {
return 0
}
if (num === 1) {
return 1
}
return fib(num - 2) + fib(num - 1)
}
console.log(fib(7)) //8
fib(6) = fib(5) + fib(4), fib(5) = fib(4) + fib(3) ...... f(2) = f(1) + f(0),一直到最后我们才找到f(0) = 0, f(1) = 1,那么此时函数f(2)才会被释放掉，然后f(3)回后f(3)才会被释放掉。。。,
所以如果num数够大的话那么内存里存储的这些函数也会增多。大家可以测试一下我测的当num = 45时就会执行大概18s,这个数字会根据有所不同，根据电脑性能，反正是很耗时的。
var count = 0
function fib (index , left, right) { //使用right作为变量，存储最后这个值
console.log(count ++)
if (index === 1) {
return right
}
return fib(index - 1, right, left + right)
}
console.log(fib(7,0,1)) // 8
- 如何不在函数里写控制语句，完成一个循环
function circle(index) {
if (index === 0) {
return
}
console.log(index)
return circle(index - 1)
}
circle(5) //5 4 3 2 1
- 闭包是如何保存上下文的
function print() {
console.log("print开始执行")
for (var index = 0; index < 5; index++) {
console.log("for begin")
setTimeout(function() {
console.log("callback begin")
console.log(index) // 5,5,5,5,5
}, 1000);
}
console.log("print执行结束")
}
print()
//执行顺序
// print开始执行
// for begin
// for begin
// for begin
// for begin
// for begin
// print执行结束
// callback begin
// 5
// callback begin
// 5
// callback begin
// 5
// callback begin
// 5
// callback begin
// 5
打印了五个五为什么？在for语句里setTimeout是个异步的函数，在for执行完之后index已经是五了，然后在打印，当然都是5了
- 上面的例子相当于下面的
function print() {
console.log("print开始执行")
for (var index = 0; index < 5; index++) {
console.log("for begin")
var callBack = function() {
console.log("callback begin")
console.log(index) // 5,5,5,5,5
}
setTimeout(callBack, 1000);
}
console.log("print执行结束")
}
print()
- 使用闭包留index的值
function print() {
console.log("print开始执行")
for (var index = 0; index < 5; index++) {
console.log("for begin")
var callBack = function(index) {
console.log("callback begin")
console.log(index) // 5,5,5,5,5
}
setTimeout(callBack(index), 1000); //callBack保留index的值
}
console.log("print执行结束")
}
print()
//打印顺序
// print开始执行
// for begin
// callback begin
// 0
// for begin
// callback begin
// 1
// for begin
// callback begin
// 2
// for begin
// callback begin
// 3
// for begin
// callback begin
// 4
// print执行结束
- 最终就变成了我们经常写的下面这部分
function print(callBack) {
console.log("print开始执行")
for (var index = 0; index < 5; index++) {
console.log("for begin")
setTimeout(callBack(index), 1000);
}
console.log("print执行结束")
}
var callBack = (index) => {
console.log("callback begin")
console.log(index)
}
print(callBack)
//执行顺序
// print开始执行
// for begin
// callback begin
// 0
// for begin
// callback begin
// 1
// for begin
// callback begin
// 2
// for begin
// callback begin
// 3
// for begin
// callback begin
// 4
// print执行结束
- 在一个我们经常见的就是函数作为返回值进行返回
function increment(x) {
return function (y) {
return x + y
}
}
var incre10 = increment(10) //相当于 function(y) {return 10 + y}
console.log(incre10(8)) // 18
//increment相当于一个构造器可以创建函数
- 考虑一下例子
var object = {
name: 'Bill',
getName: function() {
return function() {
return this.name
}
}
}
console.log(object.getName()()) //undefined
我们看到getName的上下文是object 那么getName的中使用this的话应该是指向object
object.getName()()此时的上下文是global的因为我在node环境下执行的如果在网页里应该是window
global.name = 'Jason'
var object = {
name: 'Bill',
getName: function() {
return function() {
return this.name
}
}
}
console.log(object.getName()()) //Jason
- 还有一种方法
var object = {
name: 'Bill',
getName: function() {
var that = this //getName的上下文环境是object
return function() {
return that.name
}
}
}
console.log(object.getName()()) //Jason
所以使用闭包的时候要注意上下文环境问题