关于箭头函数和普通函数关于箭头函数和普通函数

前言箭头函数是ES6中新增的特性，因其在语言上的简洁性，相信很多人都非常喜欢使用它。对于初学者来说，对于箭头函数的熟练使用与深刻理解需要一个过程。本文总结一下普通函数与箭头函数的区别，希望能够使这一过程加速。
基本语法 ES6允许使用“箭头”（=>）定义函数。具体的定义，可以看下面的例子。

var f = v => v// 等同于 var f = function (v) { return v }

可以看出，定义箭头函在数语法上要比普通函数简洁得多。箭头函数省去了function关键字，采用箭头=>来定义函数。函数的参数放在=>前面的括号中，函数体跟在=>后的花括号中。
箭头函数的参数 1、如果箭头函数没有参数，直接写一个空括号即可。

var f = () => 5 // 等同于 var f = function () { return 5 }

2、如果箭头函数的参数只有一个，也可以省去包裹参数的括号。

var f = v => v// 等同于 var f = function (v) { return v }

3、如果箭头函数有多个参数，将参数依次用逗号(,)分隔，包裹在括号中即可。

var sum = (num1, num2) => num1 + num2 // 等同于 var sum = function(num1, num2) { return num1 + num2 }

箭头函数的函数体 1、如果箭头函数的函数体只有一句代码，就是简单返回某个变量或者返回一个简单的JS表达式，可以省去函数体的大括号{ }。

var f = v => v

2、如果箭头函数的函数体只有一句代码，就是返回一个对象，要使用（）

// 用小括号包裹要返回的对象，不报错 let getTempItem = id => ({ id: id, name: "Temp" }); // 但绝不能这样写，会报错。 // 因为对象的大括号会被解释为函数体的大括号 let getTempItem = id => { id: id, name: "Temp" };

3、如果箭头函数的函数体只有一条语句并且不需要返回值（最常见是调用一个函数），可以给这条语句前面加一个void关键字

let fn = () => void doesNotReturn()

箭头函数实际使用场景 1、箭头函数可以与变量解构结合使用。可以用在请求接口时，只接受的返回数据中需要的字段。

const full = ({ first, last }) => first + ' ' + last; // 等同于 function full(person) { return person.first + ' ' + person.last; }

【关于箭头函数和普通函数】2、箭头函数可以简化回调函数。

// 正常函数写法 [1,2,3].map(function (x) { return x * x; }); // 箭头函数写法 [1,2,3].map(x => x * x);

3、rest参数与箭头函数结合简化开发。

const numbers = (...nums) => nums; numbers(1, 2, 3, 4, 5) // [1,2,3,4,5]const headAndTail = (head, ...tail) => [head, tail]; headAndTail(1, 2, 3, 4, 5) // [1,[2,3,4,5]]

箭头函数与普通函数的区别箭头函数中的this指向
1、箭头函数没有原型prototype

let a = () =>{}; console.log(a.prototype); // undefined

2、箭头函数不会创建自己的this

箭头函数不会创建自己的this，所以它没有自己的this，它只会从自己的作用域链的上一层继承this。

箭头函数没有自己的this，它会捕获自己在定义时（注意，是定义时，不是调用时）所处的外层执行环境的this，并继承这个this值。所以，箭头函数中this的指向在它被定义的时候就已经确定了，之后永远不会改变。

var id = 'Global'; function fun1() { // setTimeout中使用普通函数 setTimeout(function(){ console.log(this.id); }, 2000); }function fun2() { // setTimeout中使用箭头函数 setTimeout(() => { console.log(this.id); }, 2000) }fun1.call({id: 'Obj'}); // 'Global'fun2.call({id: 'Obj'}); // 'Obj'

3、不能修改箭头函数的this指向
由于箭头函数的this定义时就已经确定且永远不会改变。所以使用这些方法永远也改变不了箭头函数this的指向，虽然这么做代码不会报错。

var id = 'Global'; // 箭头函数定义在全局作用域 let fun1 = () => { console.log(this.id) }; fun1(); // 'Global' // this的指向不会改变，永远指向Window对象 fun1.call({id: 'Obj'}); // 'Global' fun1.apply({id: 'Obj'}); // 'Global' fun1.bind({id: 'Obj'})(); // 'Global'

4、箭头函数不能作为构造函数使用
我们先了解普通函数new构造函数的步骤：

``JS```内部首先会先生成一个对象。
再把函数中的this指向该对象。
然后执行构造函数中的语句。
最后隐式的返回this。

但是箭头函数没有自己的this，它的this其实是继承了外层执行环境中的this，且this指向永远不会随在哪里调用、被谁调用而改变，所以箭头函数不能作为构造函数使用，或者说构造函数不能定义成箭头函数，否则用new调用时会报错！

let Fun = (name, age) => { this.name = name; this.age = age; }; // 报错 let p = new Fun('cao', 24)

5、箭头函数没有自己的arguments
箭头函数没有自己的arguments对象。在箭头函数中访问arguments实际上获得的是外层局部（函数）执行环境中的值。

除了arguments、this以下两个变量在箭头函数之中也是不存在的，指向外层函数的对应变量：super、new.target。

(1) 箭头函数的this指向全局对象，会报arguments未声明的错误。

let b = () => { console.log(arguments); }; b(1, 2, 3, 4); // Uncaught ReferenceError: arguments is not defined

(2) 箭头函数的this如果指向普通函数,它的argumens继承于该普通函数。

function bar() { console.log(arguments); // ['bar'] bb('bb'); function bb() { console.log(arguments); // ["bb"] let a = () => { console.log(arguments); // ["bb"] }; a('箭头函数的参数'); // this指向bb } } bar('bar');

可以在箭头函数中使用rest参数代替arguments对象，来访问箭头函数的参数列表！！
rest参数获取参数列表
ES6 引入 rest参数（形式为...变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

let a = (a, ...bcd) => { console.log(a, bcd); // 1 [2, 3, 4] }; a(1, 2, 3, 4);

上面的例子除了第一个参数确定外，用一个变量接收其他的变量。当然你也可以使用一个变量接收所有的参数。
rest参数需要注意的点
1、rest 参数必须是最后一个参数，否则会报错。

// 报错 function f(a, ...b, c) { // ... }

2、rest 参数没有函数的length属性。

(function(a) {}).length// 1 (function(...a) {}).length// 0 (function(a, ...b) {}).length// 1

6、箭头函数不支持重命名函数参数,普通函数的函数参数支持重命名

function func1(a, a) { console.log(a, arguments); // 2 [1,2] }var func2 = (a,a) => { console.log(a); // 报错：在此上下文中不允许重复参数名称 }; func1(1, 2); func2(1, 2);

7、语法更加简洁、清晰
从上面的基本语法示例中可以看出，箭头函数的定义要比普通函数定义简洁、清晰得多，很快捷。
箭头函数的不适用场景

本段摘自阮一峰ES6入门了解详情可点击参考。

1、定义对象的方法，且该方法内部包括this。

const cat = { lives: 9, jumps: () => { this.lives--; } }

上面代码中，cat.jumps()方法是一个箭头函数，这是错误的。调用cat.jumps()时，如果是普通函数，该方法内部的this指向cat；如果写成上面那样的箭头函数，使得this指向全局对象，因此不会得到预期结果。这是因为对象不构成单独的作用域，导致jumps箭头函数定义时的作用域就是全局作用域。
2、需要动态this的时候，不应使用箭头函数。