【笔记】ES6 箭头函数

在ES6中允许使用=>来定义函数。

这篇文章主要介绍以下箭头函数的写法和一些需要注意的问题。

// 普通写法
const normal = (a, b) => {
return a + b
}
normal(1, 2) // 3
// 上述写法等同于
function normal2(a, b) {
return a + b
}
normal2(1, 2) // 3

箭头函数还有简写的方式，但是要满足一定的条件。

• 只有一个参数，可以去掉小括号
• 函数体中只有一句表达式，可以省略大括号，并以表达式的值作为返回值

// 只有一个参数
const org = (n) => {
const sq = n * n
return sq
}
// 上面的函数可以简写为
const simple = n => {
const sq = n * n
return sq
}
// 函数体中只有一句表达式
const org2 = (a, b) => {
return a * b
}
// 上面的函数可以简写为
const simple2 = (a, b) => a * b
// 但是，当函数体中只有一句表达式，并且该表达式要返回一个对象时，要用()来包裹
const org3 = (name, age) => {
return { name, age }
}
// 上面的函数可以简写为
const simple3 = (name, age) => ({ name, age })

使用箭头函数时，有几点注意事项：

• 箭头函数没有自己的this对象，箭头函数中的this是静态的，指向的是函数声明时所在作用域下的this的值
• 不可以当作构造函数，不可以对箭头函数使用new命令
• 不可以使用arguments对象
• 不可以使用yield命令，因此箭头函数不能用作Generator函数（之后的文章会讲解这个概念）

// 箭头函数中的this
// 准备数据
window.name = '波风水门'
const son = {
name: '漩涡鸣人'
}
// 函数准备
const getName = () => {
console.log(this.name)
}
function getName2() {
console.log(this.name)
}
// 普通调用
getName() // 波风水门
getName2() // 波风水门
// call调用
getName.call(son) // 波风水门
getName2.call(son) // 漩涡鸣人

从上面的例子可以看出，箭头函数中的this指的是函数声明时所在作用域的this的值（即window），而且箭头函数中的this是静态，使用call调用时，并不能改变this的指向。

// 箭头函数不可以当作构造函数
const Person = (name, age) => {
this.name = name
this.age = age
}
const gdg = new Person('郭德纲', 18) // 这里会报错，Person不是构造器

从上面的例子可以看出，箭头函数是不可以当作构造函数的。

// 箭头函数不可以使用arguments对象
const fn = () => {
console.log(arguments) // 报错，arguments没有被定义
}
fn(1, 2, 3)

• 不适用箭头函数的场景
  – 定义对象的方法，且该方法内部包括this
  – 需要动态绑定this的时候

// 定义对象方法，且该方法内有this，不能用箭头函数
// 以下示例摘自《ECMAScript 6 入门》
const cat = {
lives: 9,
jumps: () => {
this.lives--;
}
}

// 需要动态绑定`this`的时候，不能用箭头函数
const btn = document.getElementById('btn')
btn.addEventListener('click', () => {
console.log(this) // window
})

上面给btn添加监听事件的例子中，回调函数中的this是需要动态绑定给btn的，如果使用箭头函数的话，this会指向window，所以这种情况是不适合使用箭头函数的。

最后

以上就是开朗身影为你收集整理的【笔记】ES6 箭头函数的全部内容，希望文章能够帮你解决【笔记】ES6 箭头函数所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。