箭头函数，匿名函数，为什么用？怎么用？有什么不一样？使用场景是什么？

箭头函数的使用和一些特性

JS中的箭头函数用=>来标识。箭头函数有两个主要的优点:

• 更简短的函数；
• 更直观的作用域和this的绑定(不绑定this)

因为这些优点，箭头函数比起其他形式的函数声明更受欢迎。比如，受欢迎的airbnb eslint configuration库会强制使用JavaScript箭头函数创建匿名函数。

1.　即它允许使用箭头（=>）来定义函数。 如

　　var f = v =>v;

这个箭头函数就等同于:

　　var f = function (v) {
　　　	return v;
　　};

2. 如果不需要给这个函数传递参数，就使用圆括号来代表参数部分，如下所示：

　　var f = () =>8;

这个箭头函数就等同于：

　　var f = function () {
　　　　return 8;
　　};

3.如果传入的参数多于一个，同样也需要使用圆括号，如下：

　　var f = (num1,num2) => num1+num2;

等同于：

　　var f = function (num1,num2){
　　　　return num1+num2;
　　};

4.我们可以看到，如果只有一条语句，就会自动添加return。但是如果有两条及以上的语句，就需要使用{}，并在需要返回值的地方添加return。如：

　　var f = (num1,num2) => {num1++; return num1+num2;}　　

等同于：

　　var f = function(num1,num2){
　　　　num1++;
　　　　return num1+num2;
　　}

5.如果我们希望返回一个对象，则必须使用()将对象括起来，因为箭头函数认为{}是代码块，从而产生错误，如下：

　　var f = () => ({name:"zzw",age:21});

6.箭头函数可以简化回调函数。如：

　　[1,2,3].map(x => x*x);

这个函数在用普通函数写是：

　　[1,2,3].map(function(x){
　　　　return x*x;　
　　});　　

显然箭头函数做了很多简化工作。

7、 es6的箭头函数表达式是最适合用于非方法函数的，并且他们不能用作构造函数

这个需要注意，我们一般使用es6箭头函数的场景都是一般的函数定义，回调函数等等。而一般对于类中的某个方法，我们是不适用箭头函数的，并且更不会将构造函数写成箭头函数。

8、 箭头函数不是绑定this

在箭头函数出现之前，每个新定义的函数都有其自己的this值（例如，构造函数的this会指向一个新的对象；严格模式下的this为undefined； 一般的指向window； 如果函数作为对象的方法被调用，则this指向了那个调用它的对象）。这些在面向对象风格的编程中，带来了很大的困扰。

所以，箭头函数中的this会自动捕获其所在上下文中的this值，作为自己的this值，因为下面的代码将会如期运行：

function Person() {  
    this.age = 0;  
    setInterval(() => {
        // 回调里面的 `this` 变量就指向了期望的那个对象了
        this.age++;
    }, 3000);
}

var p = new Person();

9、箭头函数表达式对非方法函数是最合适的，让我们看看当我们试着把他们当做方法时发生了什么？

'use strict';
var obj = {
  i: 10,
  b: () => console.log(this.i, this),
  c: function() {
    console.log( this.i, this)
  }
}
obj.b(); 
// undefined
obj.c(); 
// 10, Object {...}

可以看到： 这里属性b的值就是使用箭头函数的一个方法，这里的this，并没有指向这个对象，而是 undefined，以为this不会自动绑定。

10. 构造函数不能使用函数，否则就会报错，如下：

可以看到，如果我们使用箭头函数作为构造函数，就会导致报错 ---- Bar is not a constructor。

11、 箭头函数没有原形属性

对于一般函数，都是由原型对象的，但是对于箭头函数，可以发现，是找不到原型对象（prototype）的，即undefined。

12、 使用yield关键字

yield关键字是不能在箭头函数中使用的，因此箭头函数不能用作生成器。

13、深层调用

如果你将函数定义为箭头函数，并且在他们之间来回调用，当你调试bug的时候你将被代码困惑，甚至得到如下的错误信息：

{anonymous}(){anonymous}(){anonymous}(){anonymous}(){anonymous}() //anonymous

箭头函数与普通函数的区别

箭头函数是匿名函数，ES5匿名函数的语法糖；但又增加了ES5所没有的一些优点，接下来我们一起来看一看箭头函数，最下面是匿名函数的详解

• 普通函数： function add(a,b){return a+b};
• 箭头函数：（a,b）=>a+b;

两者的区别主要分为以下几个方面：

1.this方面：

• 普通函数内部的this，默认指向window，严格模式下指向undefined；
• 箭头函数内部的this，与上一级作用域中的this指向同一个地方。

2.arguments方面：

• 普通函数，可以通过arguments来实现重载；
• 箭头函数中，没有arguments，代替它功能是剩余参数rest（…）。

3.原型对象方面：

• 普通函数，是有自己的原型对象的；
• 箭头函数，没有原型对象。

4.new方面：

• 普通函数，可以作为构造函数，通过new实例化出子函数；
• 箭头函数，不能作为构造函数，使用new会报错。

5.简易程度：

• 箭头函数比普通函数的使用简短更多；同时箭头函数通常是匿名函数。

为什么使用箭头函数

引入箭头函数有两个方面的作用：

• 更简短的函数
• 不绑定this

更简短的函数

var elements = ['h1', 'div', 'span', 'section'];

elements.map(function(el) {
  return el.length; // 返回数组: [2, 3, 4, 7]
});

// 从上面的普通函数可以改写为如下的箭头函数
elements.map((el) => {
  return el.length; // [2, 3, 4, 7]
});

// 当箭头函数只有一个参数时，可以省略参数的圆括号
elements.map(el => {
  return el.length; // [2, 3, 4, 7]
});

// 当箭头函数体只有一个`return`语句时，可以省略`return`关键字和方法体的花括号
elements.map(el => el.length); // [2, 3, 4, 7]

// 在这个例子中，因为我们只需要`length`属性，所以可以使用参数结构
// 需要注意的是字符串`"length"`是我们想要获得的属性名称，而`elLength`则只是个变量名，可以替换成任意合法的变量名
elements.map(({ "length": elLength }) => elLength); // [2, 3, 4, 7]

不绑定this

在箭头函数出现之前，每个新定义的函数都有它自己的this值(在构造函数的情况下是一个新对象，在严格模式的函数调用中则为undefined，如果该函数被作为"对象方法"调用则为基础对象等)。

而箭头函数并没有它自己的执行上下，实际上，这就意味着代码中的this和arguments都是继承它的父函数。

const obj = {
  name: 'test object',
  createAnonFunction: function() {
    return function() { 
      console.log(this.name);
      return this;
    }
  },
  createArrowFunction: function() {
    return () => {
      console.log(this.name);
      return this;
    }
  }
}

const anon = obj.createAnonFunction();
anon(); // undefined
anon() === window // true
  
const arrow = obj.createArrowFunction();
arrow(); // 'test object'
arrow() === obj // true

第一个匿名参数有自己的上下文(指向的并非obj对象)，当被赋值给anon变量且调用时，this发生了改变，指向了window。另一个，箭头函数与创建它的函数有相同的上下文，故指向obj对象。

通过call或者apply调用

由于箭头函数没有自己的this指针，通过call()或者apply()方法调用一个函数时，只能传递参数(不能绑定this)，它们的第一个参数会被忽略。

var adder = {
  base: 1,
  add: function(a) {
    var f = v => v + this.base;
    return f(a);
  },
  addByCall: function(a) {
    var f = v => v + this.base;
    var b = {
      base: 2
    };
    return f.call(b, a)
  }
}

adder.add(1); // 2
adder.addByCall(1); // 2

不绑定arguments

箭头函数不绑定Arguments对象。因此，在本示例中，arguments只是引用了封闭作用域内的arguments:

function foo(n) {
  var f = () => arguments[0] + n; // 隐式绑定 foo 函数的arguments对象，arguments[0]是 n
  return f(); 
}

foo(1); // 2

在大多数情况下，使用剩余参数是相对使用arguments对象的更好选择。

function foo(arg) {
  var f = (...agrs) => args[0];
  return f(arg);
}
foo(1); // 1

function foo(arg1, arg2) {
  var f = (...args) => args[1];
  return f(arg1, arg2);
}
foo(1, 2); // 2

箭头函数的实用

优化代码

比如你有一个有值的数组，你想去map遍历每一项，这时箭头函数就非常推荐:

const words = ['hello', 'WORLD', 'Whatever'];
const downcasedWords = words.map(word => word.toLowerCase());

一个及其常见的例子就是返回一个对象的某个值:

const names = objects.map(object => object.name);

类似的，当用forEach来替换传统for循环的时候，实际上箭头函数会直观的保持this来自于父一级:

this.examples.forEach(example => {
  this.runExample(example);
});

Promise和Promise链

当在编写异步编程时，箭头函数也会让代码更加直观和简洁。
这是箭头函数的理想位置，特别是如果您生成的函数是有状态的，同时想引用对象中的某些内容。

this.doSomethingAsync().then((result) => {
  this.storeResult(result);
});

对象转换

箭头函数的另一个常见而且十分有用的地方就是用于封装的对象转换。
例如在Vue.js中，有一种通用模式，就是使用mapState将Vuex存储的各个部分，直接包含到Vue组件中。
这涉及到定义一套mappers，用于从原对象到完整的转换输出，这在组件问题中实十分有必要的。这一系列简单的转换,使用箭头函数是最合适不过的。比如：

export default {
  computed: {
    ...mapState([
      'results',
      'users'
    ])
  }
}

使用三元运算符

var foo = a => a > 15 ? 15 : a;

foo(10); // 10
foo(16); // 15

闭包

// 标准的闭包函数
function Add() {
  var i = 0;
  return function() {
    return (++i);
  }
}

var add = Add();
add(); // 1
add(); // 2

// 箭头函数体的闭包(i = 0是默认参数)
var Add = (i = 0) => { return (() => (++i)) };
var add = Add();
add(); // 1
add(); // 2

// 因为仅有一个返回，return及括号也可以省略
var Add = (i = 0) => () => (++i);

箭头函数递归

var fact = (x) => ( x == 0 ?  1 : x*fact(x-1) );
fact(5);       // 120

匿名函数

匿名函数有两种用法：

• 赋值
• 自我执行

1.声明一个匿名函数，直接赋值给某一个事件

windon.onload = function(){
	alert('hello');
};

2.使用匿名函数表达式。将匿名函数，赋值给一个变量。

• 声明：var func=function(){ }
• 调用：func();

var show = function(){
	alert('hello');
};
show();

注意：使用匿名函数表达式时，函数的调用语句，必须放在函数声明语句之后！！！
原因：检查装载时，会先对show变量及这个匿名函数声明，此时，还未将匿名函数赋值给show变量，如果在表达式之前调用，会报错 show is not a function

js代码的执行顺序问题

js代码在运行时，会分为两大部分---- 检查装载 和 执行阶段。

• 检查装载阶段：会先检测代码的语法错误，进行变量、函数的声明
• 执行阶段：变量的赋值、函数的调用等，都属于执行阶段。

3.自执行函数,这里总结了8种常用的匿名函数调用方法：

//1.使用 ！开头，结构清晰，不容易混乱，推荐使用；
!function(){
	document.write('ni hao');
}()
	
//2.无法表明函数与之后的()的整体性，不推荐使用。
(function(){
	document.write('wo hao');
})();

//3.能够将匿名函数与调用的()为一个整体，官方推荐使用；
(function(){
	document.write('hello');
}());

//4.放在中括号内执行
[function(){
	document.write('world');
}()];

//5.使用 + 运算符
+function(){
	document.write('ni hao');
}()

//6.使用 - 运算符
-function(){
	document.write('ni hao');
}()

//7.使用波浪符 ~
~function(){
	document.write('ni hao');
}()

//8.使用 void
void function(){
	document.write('ni hao');
}()