持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第12天，点击查看活动详情

前言

上一章写到了，普通函数中this的指向问题，这一章来看下箭头函数中this的指向问题

箭头函数

什么是箭头函数

箭头函数是ES6新增的一种编写函数的方法，并且它比函数表达式更加简洁，而且有如下特点

• 箭头不会绑定this，arguments属性
• 箭头函数不能作为构造函数来使用（不能和new关键字一起使用，会抛出错误）

我们来看个简单的例子

// 普通函数式表达的写法
function foo (a,b) {
    console.log(a,b)
}
// ES6箭头函数的写法
const foo = (a,b) => {
    console.log(a,b)
}

上面同样的foo的两种写法

箭头的函数的省略写法

1. 如果参数一个，（）可以省略

arr.filter(item=>{
    console.log(item)
})

2. 如果函数题只有一行代码，那么{}也可以省略，并且它会默认把这行代码的执行结果，作为函数的返回值

var nums = [10,20,30,31,22,17]
// 找偶数
var onums = nums.filter(item => item%2 === 0)

console.log(onums,'onums')

来看下代码运行结果

3. 如果一个箭头函数只有一行代码，并且返回值是一个对象，应该怎样简写

// 错误写法
var foo = () => {name:'kaka'}

// 正确写法,加个小括号，要不js引擎不知道你是对象还是函数的执行体
var foo = ()=>({name: 'kaka'})

箭头函数的this指向问题

先来说个结论，箭头函数中的this永远指向它的父级作用域，它不受this绑定规则的影响，我们来看个例子

var obj = {
    name:'kaka',
    foo:()=>{
        console.log(this)
    },
    bar:function () {
        console.log(this)
    }
}

obj.foo()

obj.bar()

foo的上层作用域是window,所以打印结果就是window，而函数bar是函数式写法，是普通调用，所以它的作用域就是obj对象

使用call，apply，bind改变指向呢？

我们再来试试显示绑定this，看会不会改变它的指向，这里以call举例

var obj = {
    name:'kaka',
    foo:()=>{
        console.log(this)
    }
}
obj.foo.call('777')

如图所示，它还是window对象，call在箭头函数里没有生效