专栏首页学习猿地Web前端学习 第3章 JavaScript基础教程12 函数进阶
原创

Web前端学习 第3章 JavaScript基础教程12 函数进阶

一、概述

在此前的内容中,我们已经学习了函数的基本用法,例如如何定义函数,如何调用函数,以及函数的形参、实参、返回值等内容。本节内容会继续讲解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,所以这里可以正确地输出结果。

六、课后练习
  1. 说出箭头函数与普通函数的区别。
  2. 使用箭头函数延迟调用cat.sayName,输出cat对象的name属性。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Web前端学习 第3章 JavaScript基础教程6 函数基础

    函数是一个可执行的语句块,定义的时候不执行,调用的时候执行,使用"函数名()"的形式可以调用函数, 语法如下所示:

    学习猿地
  • 【融职培训】Web前端学习 第3章 JavaScript基础教程6 函数基础

    函数是一个可执行的语句块,定义的时候不执行,调用的时候执行,使用"函数名()"的形式可以调用函数, 语法如下所示:

    学习猿地
  • Python模块化编程-高阶函数#学习猿地

    > 如果在一个函数中要求传递的参数是一个函数作为参数,并且在函数中使用了传递进来的函数,那么这个函数我们就可以称为是一个回调函数

    学习猿地
  • 偏函数

    偏函数的目的就是通过为函数指定参数的设定值,从而降低函数调用的难度 当函数的参数个数太多,每次调用都要显式的传入很多参数值,这样就太麻烦了 这时可使用偏函数创建...

    py3study
  • Windows客户端C/C++编程规范“建议”——函数

    等级:【要求】 说明:每个函数的代码行数控制应该控制在80行以内。如果超过这个限制函数内部逻辑一般可以拆分。如果试图超过这个标准,请列出理由。但理由不包含如下...

    方亮
  • 一文读懂支持向量积核函数(附公式)

    来源:jerrylead 本文通过多个例子为你介绍支持向量积核函数,助你更好地理解。 核函数(Kernels) 考虑我们最初在“线性回归”中提出的问题,特征是房...

    数据派THU
  • Matlab 自定义函数初讲

    在Matalb中使用函数可以把一个较大的任务分解为多个较小的任务,我这个Big project就是由个数多到我都不愿意看的一个个子函数构成的。每个子函数完成特定...

    matlab爱好者
  • 函数

    1、函数的定义 C源程序是由函数组成的。最简单的程序有一个主函数 main(),但实用程序往往由多个函数组成,由 主函数调用其他函数,其他函数也可以互相调用。函...

    编程范 源代码公司
  • 深入理解 JavaScript 回调函数 [每日前端夜话0xDF]

    JavaScript 回调函数是成为一名成功的 JavaScript 开发人员必须要了解的一个重要概念。但是我相信,在阅读本文之后,你将能够克服以前使用回调方法...

    疯狂的技术宅
  • 7.6 C语言内部函数和外部函数

    2、对变量而言,声明与定义的关系稍微复杂一些。在声明部分出现的变量有两种情况:一种是需要建立存储空间的,另一种是不需要建立存储空间的。前者称为定义性声明,简称定...

    C语言入门到精通

扫码关注云+社区

领取腾讯云代金券