在此前的内容中,我们已经学习了函数的基本用法,例如如何定义函数,如何调用函数,以及函数的形参、实参、返回值等内容。本节内容会继续讲解ES2015为函数赋予的新特性。
立即执行函数顾名思义,就是声明之后立刻执行的函数,实例代码如下所示:
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指向谁,取决于是哪个对象调用了这个函数。
例如下面中的示例代码
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();
在实例代码中
但是在开发的过程中,我们通常希望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,所以这里可以正确地输出结果。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。