JavaScript学习之旅-10(原创)-阿里云开发者社区

开发者社区> 开发与运维> 正文

JavaScript学习之旅-10(原创)

简介: 在上一篇文章中,主要学习了JavaScript了map、reduce、filter、Sort等关键字的使用。这一篇文章我们主要学习JavaScript中的闭包,箭头函数 闭包: 在说到闭包以前,我们先复习下JavaScript中的变量作用域。

上一篇文章中,主要学习了JavaScript了map、reduce、filter、Sort等关键字的使用。这一篇文章我们主要学习JavaScript中的闭包,箭头函数

闭包:

在说到闭包以前,我们先复习下JavaScript中的变量作用域。JavaScript中变量的作用域无非就是两种:全局变量和局部变量。需要注意的是,函数内部可以直接读取全局变量;但是在函数外部无法直接读取函数内的局部变量。

举个例子:


img_651b645a81316fb6c5edf9629a9a41f4.png

其中:data是我们定义的全局变量,在test函数中,我们可以直接使用。所以弹窗也弹出了数据

但是,如果我们在函数里面定义变量,然后直接通过外部引用,就会报错,如下图,异常信息显示第六行错误,那么实际上是data 没有定义,导致的错误。因为data定义是在test函数里面局部变量,外部直接使用局部变量就会报错


img_4fbfea7854b0e9e689d861ee87b8e624.png

需要注意!!!函数内部声明变量的时候,一定要使用var。如果不用的话,你实际上声明了一个全局变量!如下图:


img_3ec63345f1bdad6a7d96d16efb6261f9.png
没有使用var变量

那么,正常情况下,如何从外部去获取函数内部定义的变量?

闭包 可以帮助我们有效解决这个问题:

有权访问另一个函数作用域内变量的函数都是闭包。简单点理解就是,我们在定义function的时候,希望从外部访问函数内部的变量,但是一般情况下是访问不了,这时候我们就会在这个函数内部继续定义一个子函数,因为子函数可以访问外部函数的变量。所以我们就可以将子函数作为结果返回,达到外部访问函数内部变量的效果。


img_dd10eeb7fb91d9040630f147e68f2f4e.png
闭包 - 1

在上面的代码中,函数 useClosePackage() 就被包括在函数 test()内部,这时 test()内部的所有局部变量,对 useClosePackage()都是可见的。

但是反过来就不行,内部的局部变量,对 test()就是不可见的。这就是Javascript语言特有的"链式作用域"结构,子对象会一级一级地向上寻找所有父对象的变量。所以,父对象的所有变量,对子对象都是可见的,反之则不成立。

既然 useClosePackage()可以读取 test() 中的局部变量,那么只要把 useClosePackage()作为返回值,我们不就可以在 test() 外部读取它的内部变量了吗!


下面就是一个简单闭包的例子:

img_43f63a8dc2f544fb43ca8f459b8774f9.png
闭包 - 1

当然,还可以这样写:

img_c850a23721b334a44e8f6fb6d0df28dd.png
闭包 - 2

另外,关于闭包有一个需要注意的是:


img_210b84e16ac0015a8796fb3cbab7c7a4.png
闭包需要注意的事项

这段代码的大概意思是:每次循环,都创建了一个新的函数,然后,把创建的3个函数都添加到一个Array中返回了。(push() 方法就是向数组的末尾添加一个或多个元素,并返回新的长度。)

你可能认为调用f1(),f2()和f3()结果应该是1,4,9,但实际结果是:却是3个16,那么这种原因是什么导致的?

原因就在于返回的函数引用了变量 i,但它并非立刻执行。等到3个函数都返回时,它们所引用的变量 i 已经变成了4,因此最终结果为(4 * 4 = 16)。

返回闭包时牢记的一点就是:返回函数不要引用任何循环变量,或者后续会发生变化的变量。

那么,这种问题该如何解决?

解决办法就是再创建一个函数,用该函数的参数绑定循环变量当前的值,无论该循环变量后续如何更改,已绑定到函数参数的值不变,这样就可以有效解决上面的问题

代码如下:


img_cd721a141656e70d58643497d4eab053.png

也就是继续套一层,就可以解决上述问题

还有一点需要注意的是,由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。这种问题的解决方法是,在退出函数之前,将不使用的局部变量全部删除。

箭头函数:

在说箭头函数之前,我们先写一个简单的函数,这个函数主要是用来做加法算术的


img_5693518c77ac78af3fd03b01d1bce8cb.png
普通函数

但是在ES6标准之后,引入了箭头函数这一个新概念,这个箭头函数是帮助我们语法简洁的一种形式,上面这个加法函数如果使用了箭头函数的话,就可以写成这样:


img_3906581b67d2da1b7658db9a65fea444.png
箭头函数

那么,我们首先理清箭头函数的基本写法格式以及原来写法格式的对比:

1:没有参数的两种写法对比


img_6b597a1c64a693d01ffaff9f52cca2e0.png
没有参数的写法对比

2:有一个参数的两种写法对比

img_f2f8f1a28b4a564b7b7977a127c2b06b.png
有一个参数的写法对比

3:有两个参数的两种写法对比


img_ddc830ea619f68f7d6a80a7f4359f07c.png
有两个参数的写法对比

4:函数体多条语句判断的两种写法对比(注意:箭头函数在这里需要用到大括号)

img_cd4b5cb55aee6006e272a8f484a68410.png
函数体多条语句判断写法对比

5:对象的写法对比


img_c664719a817c5a7c9c241f20b5f130b1.png
对象的原始写法


img_05f30c86b4bffead08851b1f91056b8d.png
箭头函数下对象的写法

需要注意的是:因为对象是用花括号括起来的,所以在箭头函数里面,我们用小括号先在外面套一层,这样才可以使用。

JavaScript学习之旅-8这篇文章中,我们学习了this关键字,我们知道JavaScript中this关键字如果使用不当,会有指针指向问题,然后关于这个问题,我们可以额外使用一个变量去记录this或者使用apply关键字去解决,那么,现在由于箭头函数的出现,又出现了一种新的解决办法。

先回顾下this关键字的问题代码


img_0d4d882c6b29a310a7076ab58bd4ea23.png
this指向问题

这个问题在上面的链接有具体说明,那么现在通过箭头函数就可以有效规避上述问题:

如图,只是将获取年龄的函数使用了箭头函数去操作,即可获取到我想要的结果:

img_7f28412c544ecaa49be6799379e71a01.png

总结:

1、箭头函数没有自己的this。箭头函数会捕获其所在上下文的 this 值,作为自己的 this 值。 

2、箭头函数 this 不可变。call()、apply()、bind()、这些方法也 无法改变 箭头函数 this 的指向。

3、箭头函数 不能用 new 关键字来实例化对象,不然会报错。 

4、箭头函数没有arguments对象。

本篇文章主要学习的是关于闭包、箭头函数的使用。本章的基本内容就结束了。

未完待续。。。

如果这篇文章对你有帮助,希望各位看官留下宝贵的star,谢谢。

Ps:著作权归作者所有,转载请注明作者, 商业转载请联系作者获得授权,非商业转载请注明出处(开头或结尾请添加转载出处,添加原文url地址),文章请勿滥用,也希望大家尊重笔者的劳动成果。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章