【融职培训】Web前端学习 第3章 JavaScript基础教程

一、概述

在此前的内容中，我们已经学习了函数的基本用法，例如如何定义函数，如何调用函数，以及函数的形参、实参、返回值等内容。本节内容会继续讲解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属性。

【融职教育】在工作中学习，在学习中工作