前端培训 | 经典面试:你了解箭头函数的特性吗?

箭头函数作为ES6中新增的语法之一，在面试考核中的出场率一直居高不下。

本期文章，让我们花费 一些碎片化的时间，高效率地了解和巩固箭头函数的特性。

一、基本用法

我们可以分别对普通函数和箭头函数的等价写法：

// 定义普通函数

let test = function (res) {

return res

}

// 定义箭头函数

let test = (res) => { return res }

//若只有一个参数，可以省略圆括号；代码块只有一条语句时可以省略大括号及return关键字

let test = res => res

二、静态的this指向

普通函数的this指向是动态的：

function test(){

console.log(test)

}

const obj = {

test1 : test

}

// 默认调用时，指向window

test() // Window

// 作为对象的属性被调用时，指向对象

obj.test1() // obj

// 可以通过call、apply、bind等方法改变this的指向

test.call(obj) // obj

箭头函数的this指向是静态的：

箭头函数没有自己的this属性，内部的this就是定义时上层作用域中的this，也就是在定义箭头函数时，this指向就已经确定了。

// 箭头函数的this指向自己所在的执行上下文

let obj = {

fn: function (){

let test = () => {

console.log(this)

}

test()

}

}

obj.fn() // obj

fn函数作为obj的属性被调用，它的this指向obj对象，test在fn中被定义，此时它的this也指向obj。

让我们来看一个更明显的例子：

let obj = {

fn: function () {

function fn1(){

let test = () => {

console.log(this);

}

test()

}

fn1()

}

}

obj.fn() // Window

fn函数中又定义了一个普通函数fn1，fn1不作为obj的属性被调用，它的执行是在全局环境中进行，this也指向window。而test是在fn1中定义，那它的this也指向fn1中的this—— window。

同时由于箭头函数没有自身的this，所以也无法用call、apply、bind等方法改变箭头函数的this指向：

const test = ()

=> {

console.log(this);

}

const obj = {

a : 1

}

test.call(obj) // Window

三、无法作为构造函数

无法通过new进行实例化调用（没有prototype属性）。

const test = () => {

this.name = 1

}

let obj = new test() // test is not a constructor

四、不能使用arguments属性

箭头函数内不存在arguments属性。

const test = () => {

console.log(arguments)

}

test(1,2) // arguments is not defined

我们可以rest来代替arguments的作用。

//直接形成数组，可以省略伪数组转数组的操作

const test = (...rest) => {

console.log(rest)

}

test(1,2) // [1,2](Array)

五、其他

无法作为Generator函数被使用，Generator函数只有以普通函数的声明形式被创建：

ECMA规范中，箭头函数中并未出现类似用法介绍。

function* gen(x) {

var y = yield x + 2;

return y;

}

总结

了解箭头函数的特性，可以将它同普通函数进行区分。

分别从用法，this指向（this的静态性质、无法new调用），arguments等方面进行比较，能更好地了解箭头函数。