ES6学习笔记——箭头函数使用时的注意点

作者在学习 ES6 之后,使用最频繁的一个新特性就是箭头函数,用起来真的超方便,不知不觉中就爱上了这种语法。

但是好用的箭头函数,如果使用的时候不注意,就会带来意想不到的问题。下面就针对一些方面说下需要注意的地方。

箭头函数的基本语法

// 一秒钟定时器的正常写法
setTimeout(function () {
    console.log('timeout start')
}, 1000)

// 一秒钟定时器的箭头函数写法
setTimeout(() => {
    console.log('start'}
}, 1000)

可以看到,在上面的例子中,通过箭头函数 () => {} 代替了原本的匿名函数。在箭头函数中,可以分成三个部分,分别是左边,中间和右边。中间不多说,只说说左边和右边两个部分:

左边

箭头的左边是箭头函数的参数部分,它省略了原本的 function 关键字,如果有多个参数是,可以写作 (arg1, arg2) => {} ,但是当只有一个参数时,就连括号都可以省略 arg => {} ,如果这个箭头函数没有参数的话,括号不可以省略。

右边

箭头的右边是箭头函数的函数体,跟普通函数的写法一样,但是当函数体部分只有一句表达式并且需要返回这个表达式的值时,可以省略大括号:

// 返回 1+2 的值
const arrowFunc1 = () => 1+2
// 执行 1+2 但不返回值
const arrowFunc2 = () => { 1+2 }
// 返回一个对象时,需要添加括号
const arrowFunc3 = () => ({ a: 1, b: 2 })

arrowFunc1() // 3
arrowFunc2() // undefined
arrowFunc3() // { a: 1, b: 2 }

总的来说,箭头函数在大大精简了语法的同时,也保护了我们的手指,让它们能少敲些键盘:)

从上面的两段代码中,小伙伴应该已经看出来了箭头函数的适用场景:用来替代匿名函数或者函数表达式,并且箭头函数不能用来声明一个函数,也不能够通过 new 关键字新建对象实例

箭头函数的两个注意点

this 关键字

对于箭头函数来说,并没有自己的 this ,它的 this 将始终指向让它生效的对象,即它的外部调用者:

const obj1 = {
    arrowFunc: () => { console.log(this) },
    normalFunc: function () { console.log(this) }
}

// obj1.arrowFunc 在全局对象 window 下生效,指向 window
obj1.arrowFunc() // window
// 普通方式声明的函数 this 指向持有这个函数的对象,即 obj1
obj1.normalFunc() // obj1
const obj2 = {
    arrowFunc: function () {
      setTimeout(() => { console.log(this) }, 0)
    },
    normalFunc: function () {
      setTimeout(function () { console.log(this) }, 0)
    }
}

// arrowFunc 中的箭头函数在 obj2 下生效,指向 obj2
obj2.arrowFunc() // obj2
// normalFunc 中的匿名函数的 this 始终指向 window
obj2.normalFunc() // window

这种特性让我们可以省去平时常写的 var that = this var self = this var _this = this 语句

arguments 关键字

我们知道在函数中,可以通过 arguments 关键字来获取到当前函数中传入的参数,但是在箭头函数中是没有这个关键字的

const arrowFunc4 = () => { console.log(arguments) }
arrowFunc4() // ReferenceError: arguments is not defined
扫码关注微信公众号【前端程序员的斜杠青年进化录】
微信扫码,给我赞赏一下~

推荐阅读更多精彩内容