【融职培训】Web前端学习第3章 JavaScript基础教程12 函数进阶

最新推荐文章于 2024-06-04 10:29:08 发布

lmonkey_01

最新推荐文章于 2024-06-04 10:29:08 发布

阅读量169

点赞数

本文链接：https://blog.csdn.net/ITXDL123/article/details/106807000

版权

一、概述

在此前的内容中，我们已经学习了函数的基本用法，例如如何定义函数，如何调用函数，以及函数的形参、实参、返回值等内容。本节内容会继续讲解ES2015为函数赋予的新特性。

立即执行函数
闭包
函数默认值
箭头函数
async函数

二、立即执行函数

立即执行函数顾名思义，就是声明之后立刻执行的函数，实例代码如下所示：

1 (function(){
2     console.log("hello world");
3 })()

函数体被一个小括号包裹起来，然后后面紧跟着一个小括号，这样当函数被声明之后，就立刻被调用。

立即执行函数通常用来封装代码，例如下面的例子：

1 (function(){
2     let a = 10;
3     let b = 20;
4     console.log(a + b)
5 })()

这段代码可以输出a + b的结果，但是立即执行函数外部是不能访问a和b的，因此成功达到了封装的目的。

在比较古老的js代码中，大家都是这种方法来封装代码的，但是ES2015自带模块化语法，因此这种封装的写法就不太常见了，大家只做了解即可。

三、闭包

闭包是定义在函数内部的函数，我们用立即执行函数编写一个闭包的例子

1 (function(){
2     function add(a, b){
3         return a + b
4     }
5     let result = add(10, 20)
6     console.log(result)
7 })()

立即函数内部的add函数就是闭包，闭包的特点是具有全局性，闭包内部的this关键字会指向全局对象window。

我们来看一个示例来演示这个特性

四、函数默认值

在ES2015版本之前，我们可以通过下面的方法设置函数参数的默认值
代码如下所示:

1 function fun1(x,y){
2     x = x || 100;
3     y = y || 200;
4     return x + y;
5 }

上面的实例代码，利用逻辑或运算符的能力重新给参数赋值，也就是说如果有参数传入，则赋值为传入的参数，如果没有，则为或运算的第二个值。

这种设置默认值的方式看起来很不友好，ES2015中新增了更直观的设置函数默认值的方法，实例代码如下所示：

1 //es2015+设置默认值
2 function fun2(x=100,y=200){
3     return x + y;
4 }

五、箭头函数

在此前的课程中，我们学习了两种方法定义函数，

函数声明
函数表达式

在ES2015中增加了箭头函数的语法，可以使用=>来定义函数，我们来对比一下三种写法，实例代码如下所示：

 1 function add(a, b){
 2     return a + b
 3 }
 4 //函数表达式
 5 const add = function(a, b) {
 6     return a + b
 7 }
 8 //箭头函数
 9 const add = (a, b) => {
10     return a + b;
11 }

=>左侧的括号存放参数
=>右侧的花括号存放函数体。

箭头函数简写

以上展示了一个完整的箭头函数的语法，这其实还不能体现箭头函数的优势。

箭头函数第一个优势是，简写的箭头函数可以让代码更简洁

如果函数只有一个形参，那么可以省略参数外面的括号。
如果函数体只有一个表达式作为返回值，可以省略花括号和return关键字

实例代码如下所示

1 const fun = x=>x*x;
2 let result = fun(6);
3 console.log(result) //36;

箭头函数中的this

箭头函数不仅简化了函数的写法，而且让函数中的this指针变得更人性化。

此前我们学习过的，函数中的this指向谁，取决于是哪个对象调用了这个函数。

例如下面中的示例代码

 1 const person = {
 2     sayMe: function () {
 3         console.log(this)
 4     },
 5     sayMeDelay: function () {
 6         (function(){
 7             console.log(this);
 8         })()
 9     }
10 }
11 
12 person.sayMe();
13 person.sayMeDelay();

在实例代码中

sayMe方法输出的this是person这个对象，因为是person直接调用的sayMe。
sayMeDelay方法因为加入了一个延迟函数，导致setTimeout中的函数由windows对象调用，因此this指向windows对象。

但是在开发的过程中，我们通常希望sayMedelay内部

 1 const person = {
 2     sayMe: function () {
 3         console.log(this)
 4     },
 5     sayMeDelay: function () {
 6         (() => {
 7             console.log(this);
 8         })()
 9     }
10 }
11 
12 person.sayMe();
13 person.sayMeDelay();

在上面的代码中，我们定义了一个变量self用来存储指向person的this，这样我们就可以正确地输出lee。但是这样的写法看起来有给我们增加了一些复杂度，我们可以用箭头函数来解决这个问题，

 1 const person = {
 2     firstName: "lee",
 3     sing: function () {
 4         console.log(this.firstName)
 5     },
 6     singDelay: function () {
 7         setTimeout(() => {
 8             console.log(this.firstName);
 9         }, 2000)
10     }
11 }
12 
13 person.sing();
14 person.singDelay();

在上面的代码中，成功地输出了两个lee，这是因为箭头函数中的this，不是调用函数时的this指向的对象，而是定义函数时this指向的对象，定义函数的时候，this指向的是person而不是window，所以这里可以正确地输出结果。