JavaScript学习之旅-10（原创）

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

闭包：

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

举个例子：

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

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

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

没有使用var变量

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

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

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

闭包 - 1

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

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

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

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

闭包 - 1

当然，还可以这样写：

闭包 - 2

另外，关于闭包有一个需要注意的是：

闭包需要注意的事项

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

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

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

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

那么，这种问题该如何解决？

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

代码如下：

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

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

箭头函数：

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

普通函数

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

箭头函数

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

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

没有参数的写法对比

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

有一个参数的写法对比

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

有两个参数的写法对比

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

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

5：对象的写法对比

对象的原始写法

箭头函数下对象的写法

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

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

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

this指向问题

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

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

总结：

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

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

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

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

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

未完待续。。。

如果这篇文章对您有开发or学习上的些许帮助，希望各位看官留下宝贵的star，谢谢。

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