在上一篇文章中,主要学习了JavaScript了map、reduce、filter、Sort等关键字的使用。这一篇文章我们主要学习JavaScript中的闭包,箭头函数
闭包:
在说到闭包以前,我们先复习下JavaScript中的变量作用域。JavaScript中变量的作用域无非就是两种:全局变量和局部变量。需要注意的是,函数内部可以直接读取全局变量;但是在函数外部无法直接读取函数内的局部变量。
举个例子:
![img_651b645a81316fb6c5edf9629a9a41f4.png](https://yqfile.alicdn.com/img_651b645a81316fb6c5edf9629a9a41f4.png?x-oss-process=image/resize,w_1400/format,webp)
其中:data是我们定义的全局变量,在test函数中,我们可以直接使用。所以弹窗也弹出了数据
但是,如果我们在函数里面定义变量,然后直接通过外部引用,就会报错,如下图,异常信息显示第六行错误,那么实际上是data 没有定义,导致的错误。因为data定义是在test函数里面局部变量,外部直接使用局部变量就会报错
![img_4fbfea7854b0e9e689d861ee87b8e624.png](https://yqfile.alicdn.com/img_4fbfea7854b0e9e689d861ee87b8e624.png?x-oss-process=image/resize,w_1400/format,webp)
需要注意!!!函数内部声明变量的时候,一定要使用var。如果不用的话,你实际上声明了一个全局变量!如下图:
![img_3ec63345f1bdad6a7d96d16efb6261f9.png](https://yqfile.alicdn.com/img_3ec63345f1bdad6a7d96d16efb6261f9.png?x-oss-process=image/resize,w_1400/format,webp)
那么,正常情况下,如何从外部去获取函数内部定义的变量?
闭包 可以帮助我们有效解决这个问题:
有权访问另一个函数作用域内变量的函数都是闭包。简单点理解就是,我们在定义function的时候,希望从外部访问函数内部的变量,但是一般情况下是访问不了,这时候我们就会在这个函数内部继续定义一个子函数,因为子函数可以访问外部函数的变量。所以我们就可以将子函数作为结果返回,达到外部访问函数内部变量的效果。
![img_dd10eeb7fb91d9040630f147e68f2f4e.png](https://yqfile.alicdn.com/img_dd10eeb7fb91d9040630f147e68f2f4e.png?x-oss-process=image/resize,w_1400/format,webp)
在上面的代码中,函数 useClosePackage() 就被包括在函数 test()内部,这时 test()内部的所有局部变量,对 useClosePackage()都是可见的。
但是反过来就不行,内部的局部变量,对 test()就是不可见的。这就是Javascript语言特有的"链式作用域"结构,子对象会一级一级地向上寻找所有父对象的变量。所以,父对象的所有变量,对子对象都是可见的,反之则不成立。
既然 useClosePackage()可以读取 test() 中的局部变量,那么只要把 useClosePackage()作为返回值,我们不就可以在 test() 外部读取它的内部变量了吗!
下面就是一个简单闭包的例子:
![img_43f63a8dc2f544fb43ca8f459b8774f9.png](https://yqfile.alicdn.com/img_43f63a8dc2f544fb43ca8f459b8774f9.png?x-oss-process=image/resize,w_1400/format,webp)
当然,还可以这样写:
![img_c850a23721b334a44e8f6fb6d0df28dd.png](https://yqfile.alicdn.com/img_c850a23721b334a44e8f6fb6d0df28dd.png?x-oss-process=image/resize,w_1400/format,webp)
另外,关于闭包有一个需要注意的是:
![img_210b84e16ac0015a8796fb3cbab7c7a4.png](https://yqfile.alicdn.com/img_210b84e16ac0015a8796fb3cbab7c7a4.png?x-oss-process=image/resize,w_1400/format,webp)
这段代码的大概意思是:每次循环,都创建了一个新的函数,然后,把创建的3个函数都添加到一个Array中返回了。(push() 方法就是向数组的末尾添加一个或多个元素,并返回新的长度。)
你可能认为调用f1(),f2()和f3()结果应该是1,4,9,但实际结果是:却是3个16,那么这种原因是什么导致的?
原因就在于返回的函数引用了变量 i,但它并非立刻执行。等到3个函数都返回时,它们所引用的变量 i 已经变成了4,因此最终结果为(4 * 4 = 16)。
返回闭包时牢记的一点就是:返回函数不要引用任何循环变量,或者后续会发生变化的变量。
那么,这种问题该如何解决?
解决办法就是再创建一个函数,用该函数的参数绑定循环变量当前的值,无论该循环变量后续如何更改,已绑定到函数参数的值不变,这样就可以有效解决上面的问题
代码如下:
![img_cd721a141656e70d58643497d4eab053.png](https://yqfile.alicdn.com/img_cd721a141656e70d58643497d4eab053.png?x-oss-process=image/resize,w_1400/format,webp)
也就是继续套一层,就可以解决上述问题
还有一点需要注意的是,由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。这种问题的解决方法是,在退出函数之前,将不使用的局部变量全部删除。
箭头函数:
在说箭头函数之前,我们先写一个简单的函数,这个函数主要是用来做加法算术的
![img_5693518c77ac78af3fd03b01d1bce8cb.png](https://yqfile.alicdn.com/img_5693518c77ac78af3fd03b01d1bce8cb.png?x-oss-process=image/resize,w_1400/format,webp)
但是在ES6标准之后,引入了箭头函数这一个新概念,这个箭头函数是帮助我们语法简洁的一种形式,上面这个加法函数如果使用了箭头函数的话,就可以写成这样:
![img_3906581b67d2da1b7658db9a65fea444.png](https://yqfile.alicdn.com/img_3906581b67d2da1b7658db9a65fea444.png?x-oss-process=image/resize,w_1400/format,webp)
那么,我们首先理清箭头函数的基本写法格式以及原来写法格式的对比:
1:没有参数的两种写法对比
![img_6b597a1c64a693d01ffaff9f52cca2e0.png](https://yqfile.alicdn.com/img_6b597a1c64a693d01ffaff9f52cca2e0.png?x-oss-process=image/resize,w_1400/format,webp)
2:有一个参数的两种写法对比
![img_f2f8f1a28b4a564b7b7977a127c2b06b.png](https://yqfile.alicdn.com/img_f2f8f1a28b4a564b7b7977a127c2b06b.png?x-oss-process=image/resize,w_1400/format,webp)
3:有两个参数的两种写法对比
![img_ddc830ea619f68f7d6a80a7f4359f07c.png](https://yqfile.alicdn.com/img_ddc830ea619f68f7d6a80a7f4359f07c.png?x-oss-process=image/resize,w_1400/format,webp)
4:函数体多条语句判断的两种写法对比(注意:箭头函数在这里需要用到大括号)
![img_cd4b5cb55aee6006e272a8f484a68410.png](https://yqfile.alicdn.com/img_cd4b5cb55aee6006e272a8f484a68410.png?x-oss-process=image/resize,w_1400/format,webp)
5:对象的写法对比
![img_c664719a817c5a7c9c241f20b5f130b1.png](https://yqfile.alicdn.com/img_c664719a817c5a7c9c241f20b5f130b1.png?x-oss-process=image/resize,w_1400/format,webp)
![img_05f30c86b4bffead08851b1f91056b8d.png](https://yqfile.alicdn.com/img_05f30c86b4bffead08851b1f91056b8d.png?x-oss-process=image/resize,w_1400/format,webp)
需要注意的是:因为对象是用花括号括起来的,所以在箭头函数里面,我们用小括号先在外面套一层,这样才可以使用。
在JavaScript学习之旅-8这篇文章中,我们学习了this关键字,我们知道JavaScript中this关键字如果使用不当,会有指针指向问题,然后关于这个问题,我们可以额外使用一个变量去记录this或者使用apply关键字去解决,那么,现在由于箭头函数的出现,又出现了一种新的解决办法。
先回顾下this关键字的问题代码
![img_0d4d882c6b29a310a7076ab58bd4ea23.png](https://yqfile.alicdn.com/img_0d4d882c6b29a310a7076ab58bd4ea23.png?x-oss-process=image/resize,w_1400/format,webp)
这个问题在上面的链接有具体说明,那么现在通过箭头函数就可以有效规避上述问题:
如图,只是将获取年龄的函数使用了箭头函数去操作,即可获取到我想要的结果:
![img_7f28412c544ecaa49be6799379e71a01.png](https://yqfile.alicdn.com/img_7f28412c544ecaa49be6799379e71a01.png?x-oss-process=image/resize,w_1400/format,webp)
总结:
1、箭头函数没有自己的this。箭头函数会捕获其所在上下文的 this 值,作为自己的 this 值。
2、箭头函数 this 不可变。call()、apply()、bind()、这些方法也 无法改变 箭头函数 this 的指向。
3、箭头函数 不能用 new 关键字来实例化对象,不然会报错。
4、箭头函数没有arguments对象。
本篇文章主要学习的是关于闭包、箭头函数的使用。本章的基本内容就结束了。
未完待续。。。
如果这篇文章对你有帮助,希望各位看官留下宝贵的star,谢谢。
Ps:著作权归作者所有,转载请注明作者, 商业转载请联系作者获得授权,非商业转载请注明出处(开头或结尾请添加转载出处,添加原文url地址),文章请勿滥用,也希望大家尊重笔者的劳动成果。