一、概述
在此前的内容中，我们已经学习了函数的基本用法，例如如何定义函数，如何调用函数，以及函数的形参、实参、返回值等内容。本节内容会继续讲解ES2015为函数赋予的新特性。
立即执行函数
闭包
函数默认值
箭头函数
async函数
二、立即执行函数
立即执行函数顾名思义，就是声明之后立刻执行的函数，实例代码如下所示：
1(function(){2console.log("hello world");3})()
函数体被一个小括号包裹起来，然后后面紧跟着一个小括号，这样当函数被声明之后，就立刻被调用。
立即执行函数通常用来封装代码，例如下面的例子：
1(function(){2let a = 10;3let b = 20;4console.log(a + b)5})()
这段代码可以输出a + b的结果，但是立即执行函数外部是不能访问a和b的，因此成功达到了封装的目的。
在比较古老的js代码中，大家都是这种方法来封装代码的，但是ES2015自带模块化语法，因此这种封装的写法就不太常见了，大家只做了解即可。
三、闭包
闭包是定义在函数内部的函数，我们用立即执行函数编写一个闭包的例子
1(function(){2function add(a, b){3returna + b4 }5let result = add(10, 20)6 console.log(result)7})()
立即函数内部的add函数就是闭包，闭包的特点是具有全局性，闭包内部的this关键字会指向全局对象window。
我们来看一个示例来演示这个特性
四、函数默认值
在ES2015版本之前，我们可以通过下面的方法设置函数参数的默认值
代码如下所示:
1function fun1(x,y){2x = x || 100;3y = y || 200;4returnx + y;5}
上面的实例代码，利用逻辑或运算符的能力重新给参数赋值，也就是说如果有参数传入，则赋值为传入的参数，如果没有，则为或运算的第二个值。
这种设置默认值的方式看起来很不友好，ES2015中新增了更直观的设置函数默认值的方法，实例代码如下所示：
1//es2015+设置默认值2functionfun2(x=100,y=200){3returnx + y;4}
五、箭头函数
在此前的课程中，我们学习了两种方法定义函数，
函数声明
函数表达式
在ES2015中增加了箭头函数的语法，可以使用=>来定义函数，我们来对比一下三种写法，实例代码如下所示：
1function add(a, b){ 2returna + b 3} 4//函数表达式 5const add =function(a, b) { 6returna + b 7} 8//箭头函数 9const add = (a, b) => {10returna + b;11}
=>左侧的括号存放参数
=>右侧的花括号存放函数体。
箭头函数简写
以上展示了一个完整的箭头函数的语法，这其实还不能体现箭头函数的优势。
箭头函数第一个优势是，简写的箭头函数可以让代码更简洁
如果函数只有一个形参，那么可以省略参数外面的括号。
如果函数体只有一个表达式作为返回值，可以省略花括号和return关键字
实例代码如下所示
1const fun = x=>x*x;2let result = fun(6);3console.log(result)//36;
箭头函数中的this
箭头函数不仅简化了函数的写法，而且让函数中的this指针变得更人性化。
此前我们学习过的，函数中的this指向谁，取决于是哪个对象调用了这个函数。
例如下面中的示例代码
1const person = { 2sayMe:function () { 3console.log(this) 4 }, 5sayMeDelay:function () { 6(function(){ 7console.log(this); 8 })() 9 }10}1112person.sayMe();13person.sayMeDelay();
在实例代码中
sayMe方法输出的this是person这个对象，因为是person直接调用的sayMe。
sayMeDelay方法因为加入了一个延迟函数，导致setTimeout中的函数由windows对象调用，因此this指向windows对象。
但是在开发的过程中，我们通常希望sayMedelay内部
1const person = { 2sayMe:function () { 3console.log(this) 4 }, 5sayMeDelay:function () { 6(() => { 7console.log(this); 8 })() 9 }10}1112person.sayMe();13person.sayMeDelay();
在上面的代码中，我们定义了一个变量self用来存储指向person的this，这样我们就可以正确地输出lee。但是这样的写法看起来有给我们增加了一些复杂度，我们可以用箭头函数来解决这个问题，
1const person = { 2firstName: "lee", 3sing:function () { 4console.log(this.firstName) 5 }, 6singDelay:function () { 7setTimeout(() => { 8console.log(this.firstName); 9}, 2000)10 }11}1213person.sing();14person.singDelay();
在上面的代码中，成功地输出了两个lee，这是因为箭头函数中的this，不是调用函数时的this指向的对象，而是定义函数时this指向的对象，定义函数的时候，this指向的是person而不是window，所以这里可以正确地输出结果。
六、课后练习
说出箭头函数与普通函数的区别。
使用箭头函数延迟调用cat.sayName,输出cat对象的name属性。
网友评论