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，所以这里可以正确地输出结果。
六、课后练习- 说出箭头函数与普通函数的区别。
- 使用箭头函数延迟调用cat.sayName,输出cat对象的name属性。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。