1、什么是闭包?
如图所示,**闭包就是一个定义在函数内部的函数,其作用是将函数内部和函数外部连接起来。**大家知道,作用域的问题,就是在函数内部定义的变量称为局部变量,外部取不到值。下面我们通过代码来更加详细地看一下:
1 function A() { 2 let x = 1; 3 return function B() { 4 console.log(x); 5 x++; 6 } 7 } 8 console.log(A()); //直接打印返回的B 9 let b = A(); 10 b(); //1 11 b(); //2 12 b(); //3
上述代码我们可以看到的是再次执行A函数的时候(其实这时候执行的是B),会打印出1,再次执行,会打印出2,再执行会打印出3。我们知道了闭包不仅可以拿到函数内部的变量,还可以保存内部的变量。
接下来,我们来看下闭包的使用场景,
1for (var index = 0; index < 5; index++) { 2 setTimeout(function () { 3 console.log(index) 4 }); 5} 6
上面的代码段,我们会打印5个5,为啥呢?因为当我们执行for循环时,setTimeout是异步的,所以每次等for循环加完,再执行setTimeout函数,一共执行5次。另一个原因因为使用了var声明的。循环体里的index跟外部的index是存在于同一个作用域,相当于在全局定义了一次。
下面我们来使用let来声明一下。结果就不一样。分别打印0、1、2、3、4,
1 for (let index = 0; index < 5; index++) { 2 setTimeout(function () { 3 console.log(index) 4 }); 5 }
最后,我们使用闭包也来实现一下,同样分别打印0、1、2、3、4,在外部函数每次传入实参时,也就是每次循环的值index,作用到形参i,因为setTimeout为内部函数,每次都会记录值,然后打印出来。
1 for (var index = 0; index < 5; index++) { 2 (function (i) { 3 setTimeout(function () { 4 console.log(i) 5 }); 6 })(index); 7 }
另一个使用场景是柯里化。下面一个问题我们将详解。
2、什么是柯里化?
是把接受多个参数的函数变换成接受一个单一参数(最初的第一个参数)的函数,并且返回接受余下的参数而且返回结果的新函数的技术。
3、柯里化的好处?
-
提高适用性
-
延迟执行
-
提前确认
(1)、提高适用性
我们之前使用函数都是这样写,很冗余。
1function check(reg,text) { 2 return reg.test(text); 3 } 4 console.log(check(/\d+/g,'123456')) //true 5 console.log(check(/\d+/g,'abcd')) // false 6 console.log(check(/\d+/g,'r8r8r7')) // true 7
那么我们通过柯里化的形式简化一下。
1function check(reg) { 2 return function (text) { 3 return reg.test(text); 4 } 5 } 6 const checkNum=check(/\d+/g); 7 8 console.log(checkNum('123456')) //true 9 console.log(checkNum('abcd')) // false 10 console.log(checkNum('r8r8r7')) // true 11
(2)、延迟执行在需要的时候再执行。
1const getResult = add(1)(2)(3); 2// TODO 3getResult(); 4
或者
1const getResult =add.bind(null,1).bind(null,2).bind(null,3); 2// TODO 3getResult(); 4
(3)、提前确认
之前执行一次,就不会每次都去判断了,下面举例:
1 function getBindEvent(isIE) { 2 if(isIE){ 3 return function () { 4 // TODO 5 console.log(1) 6 } 7 } 8 return function () { 9 // TODO 10 console.log(0) 11 } 12 } 13 const isIE = !!window.ActiveXObject||"ActiveXObject" in window; 14 const bindEvent = getBindEvent(isIE); 15 bindEvent();
最后这里来实现下图所示:
1function add() { 2 // arguments是一个类数组 3 const args = Array.prototype.slice.call(arguments); // 将参数都放在一个数组里 4 return function () { 5 // 下面的arguments与上面的不一样,下面的arguments为当前函数环境下的参数 6 if(arguments.length){ // 如果有传进来的参数 7 args.push(...arguments); // 添加到数组里 8 return arguments.callee; // 返回闭包函数自身 9 } 10 return args.reduce((n,m)=>{return n+m}); // 否则参数没传进来,就直接执行他 11 } 12} 13console.log(add(1)(2)()); // 3 14console.log(add(1,2)(3)(4)()); // 10 15
本期结束,谢谢
欢迎加我微信,拉你进大佬学习群哦~
作者:Vam的金豆之路
主要领域:前端开发
我的微信:maomin9761
微信公众号:前端历劫之路
本文转转自微信公众号前端历劫之路原创https://mp.weixin.qq.com/s/zcr3NRlrxc4JCZCq7CL2tA,如有侵权,请联系删除。

