ES6 Lesson 5 – 箭头函数

本节主要学习了箭头函数(arrow funcion),它有三个特点:

  • 看起来非常简明
  • 可以隐式返回(return)
  • 不绑定this

1. 简明语法

首先来看简明语法与普通写法的对比,例如我们需要一个简单的sum函数:

// es5写法
function sum (a, b) {
  return a + b
}
sum(1, 2) // =>3

// es6写法
let sum = (a, b) => {
  return a + b
}
sum(1, 2) // =>3

从上面的例子可以看出:es6比es5代码减少了function关键字,使用箭头来代替,不过这样看你可能觉得也没什么差别嘛,那么请继续往下看,我们换一个函数,例如是让某个值变成2倍的匿名函数,可以直接这样写:

// es6写法
num => {
  return num * 2
}

如果你的参数只有一个,那么可以直接不写括号。(如果没有参数,需要保留括号)

2. 直接返回

用上的例子来改造一下:

// es6写法
num => num * 2

这个比较简单,需要记得两去一移动规则即可:

  1. 移到同一行
  2. 去掉大括号
  3. 去掉return这种方法在我们只需要一些简单的返回函数时,可以让我们的函数变得非常简洁

3. this函数的指向区别

感觉虽然理解了,但是自己描述不好这个this,不如先看这个(变年轻)例子:

const user = {
  name: 'Fea',
  age: 25,
  getAge: function () {
    setInterval(function () {
      console.log(this.age - 1)
    }, 1000)
  }
}
user.getAge()
// NaN

为什么是NaN的呢?这个es5比较厉害的同学应该知道,首先是因为this.age是获取不到的,其次是因为在一个对象内的独立函数,而不是对象直接属性函数的话,这个时候this指向的是window对象。


我们使用es6的箭头函数来改造一下:

const user = {
  name: 'Fea',
  age: 25,
  getAge: function () {
    setTimeout(() => {
      console.log(this.age - 1)
    }, 1000)
  }
}
user.getAge()
// 24

这次可以正确执行这个函数,我们只是将延迟执行函数改造为es6形式,这个原因是es6的箭头函数中,this是继承父极的this,所以它可以正确的知道我们要的this.age是user对象的age。

这个在我们进行需要调用父极this值的时候,会非常方便

那么这节课就是这么多啦,bye!~

本文系作者 @ 原创发布在 徐小鹏的个人分享博客。未经许可,禁止转载。

喜欢()
评论 (0)
14 文章
7 评论
0 喜欢
Top