深度剖析 JS 的箭头函数 = ＞ 与普通函数 function 的区别

目录

前言

箭头函数的概念

区别一：基本语法

1.普通函数 function

2.箭头函数 =>

区别二：this指向  

1.普通函数 function

2.箭头函数 =>

区别三：箭头函数不能作为构造函数

1.普通函数 function

2.箭头函数 =>

区别四：箭头函数没有 prototype 属性

1.普通函数 function

2.箭头函数 =>

区别五：箭头函数不绑定arguments

1.普通函数 function

2.箭头函数 =>

区别六：在对象方法中使用箭头函数

区别七：apply、call、bind中使用箭头函数，不能改变this指向

总结

前言

ES6 中添加了箭头函数的规范，在常用的前端框架，如 Vue，也会经常使用到箭头函数，今天我们就来深度学习箭头函数(arrow function)。本文主要介绍箭头函数的概念，重点介绍它与普通函数(function)的区别，包括基本语法、this指向、使用场景等。

箭头函数的概念

ES6提供了一种符号 => 来定义函数，看上去像箭头，因此叫做箭头函数(arrow function)。箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。（官方文档的解释）

区别一：基本语法

1.普通函数 function

function fn(param1,param2,...,paramN){
    statements;
}

即格式为：

funtion 函数名（参数列表） {

        语句；

        return 表达式

}

2.箭头函数 =>

// 当只有一个参数时，圆括号是可选的
(singleParam) => { statements }
singleParam => { statements }

// 没有参数的函数应该写成一对圆括号
() => { statements }

(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression
//相当于：(param1, param2, …, paramN) =>{ return expression; }

上述基本语法可以概括为：

1. 如果只有一个形参，则可以省略圆括号()；
2. 如果没有形参，则必须写成一对圆括号()；
3. 如果函数体只有一行，则可以省略花括号{}，且同时，省略return，函数的返回值为该条语句的执行结果；

区别二：this指向  

1.普通函数 function

使用function定义的普通函数，this的指向随着调用环境的变化而变化，即：this指向调用该函数的对象，如果没有直接指定就是window，具体有以下几种情况：

func