什么是箭头函数 ? (函数相关总结) javascript

箭头函数 箭头函数能让代码更简洁；箭头函数能让函数的功能更加纯粹；

let fn3 = x => x * 2;

什么是箭头函数
ES6 中允许使用箭头函数的方式来定义一个函数。前面学习的定义一个函数有两种方式:
1.函数声明式
2.函数表达式
现在有了一个新的方式：
? 3. 箭头函数
格式

let 函数名 = （形参1，...形参n）=>{ // 函数体 }

定义一个箭头函数

// 1. 函数声明式 function fu1(x) { return x * 2; } // 2. 函数表达式 let fn2 = function (x) { return x * 2; } // 3. 箭头函数 let fn3 = (x) => { return x * 2; }

第一眼看到这个箭头函数时，会觉得很奇怪。如果从函数表达式的格式出发，经过如下2步演化步骤就可以得到。
把function 关键字后移动到（）和 {} 中间
把function 改写成 =>
注意：

- `=>`是一个整体，不要加空格 - 箭头函数只在定义上有些区别，但在函数调用格式上，是没有区别的。

简化写法
当形参有且只有一个，可以省略小括号

let f = (x) => {console.log(x)} // 可以简化成： let f = x => {console.log(x)}

当函数体只有一条语句，可以省略大括号;

let f = x => {console.log(x)} // 可以简化成： let f = x => console.log(x)

当函数体只有一条语句，并且就是return语句，则可以省略return和大括号。

let f = x => {return x*2 } // 可以简化成： let f = x => x*2

注意如果返回值是一个对象，要加()

let f = x => {return {a:1}} // 可以简化成： let f = x => {a:1} // 报错 let f = x =>({a:1})

箭头函数与普通函数的区别
1.内部没有arguments
2.不能作为构造器
3.内部没有this
没有 arguments

let fn = (a,b) => { console.log(arguments); // 报错，arguments is not defined }; fn(1, 2);

内部的this对象，指向定义时所在的对象，而不是使用时所在的对象。
1.箭头函数可以访问this对象，但这个this对象指向在定义箭头函数时它时所处的对象(宿主对象),而不是运行时的对象。

var name = 'lisi'; // 测试时，这里必须用var，因为用let声明的变量不能使用window调用 let obj = { name: 'zhangsan', f1 : () => { console.log(this); // window对象 console.log(this.name); // lisi }, f2 : function(){ console.log(this); // obj console.log(this.name); // zhangsan }, f2 : function(){ console.log(this); // obj console.log(this.name); // zhangsan } }; obj.f1();

箭头函数中的this指向是固定化的，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。

var obj = {}; var f1 = functoin(){console.log(this)} var f2 = ()=>{console.log(this)}f1(); f1.call(obj)// call可以修改普通函数内部的this的值 f2(); f2.call(obj); // call并不能修改箭头函数内部的this的值

箭头函数不能作为构造函数

let Person = () => {}; let obj = new Person(); // 报错，Person is not a constructor // 换个角度理解，箭头函数中都没有自己的this，怎么处理成员，所以不能当构造函数

在javascript中，函数是一等公民 ,它除了起到最基本的提炼代码之外，还可以当做构造器来使用，它能做的事件太多了。在ES6提出的箭头函数给函数减负了。
最佳实践
（1）优先级：
箭头函数> 表达式 > 声明式
（2）如果在函数的内部涉及this的使用，则要特别小心this，实在不放心就打印出来看看。（如果函数的内部没有this，则可以放心使用箭头函数）
【什么是箭头函数 ? (函数相关总结)】（3）注意改造函数声明式成箭头函数时，不会再有函数提升。