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

一，箭头函数基本用法：
箭头函数 伪代码 类似 函数表达式， 大多数用于  声明一些回调函数，简单 明了 

 const  fn = (name)=>{
    // do some other things
      return `hello ${name}`
}

伪代码 等同于 
const fn = function(name){
     // do some other things
      return `hello ${name}`
}

 关于箭头函数的参数，

1.  如果没有参数,  可以直接用（）即可；
2. 如果有一个参数，可以省去包裹参数的（）；
3. 如果参数有多个 ，和正常的函数声明传参一致，用，分隔包裹在 （，）中；

关于箭头函数的函数体；
 1. 如果函数体只有一句 代码，就是简单的返回一个变量或者一个js  表达式，可以直接省略  {};
 2.  如果函数体 只有一句代码， 就是返回一个js 对象 ，需要用写形如：（{}）

1.
 const fn =  x=>x*x;
2. const  fn =x =>({a:x});
 //   写成下面这样会报错 ,{} 会被解释为函数体的大括号 ；

 const fn = x =>{a:x}

 二..   箭头函数与普通函数的区别 ;
  1.箭头函数不会创建自己的this（重要！！深入理解！！）
   MDN  上的解释 : 箭头函数不会创建自己的this，所以它没有自己的this，它只会从自己的作用域链的上一层继承this。 
   感觉并没有介绍的很清晰， 实际操作中 ，箭头函数本没有自己的this  , 它会捕获 声明中的this  并继承这个this , 在函数声明过程中就已经确定了这个this ,后续不可改变；

var id = 全局';

function fun1() {
    // setTimeout中使用普通函数
    setTimeout(function(){
        console.log(this.id);
    }, 2000);
}

function fun2() {
    // setTimeout中使用箭头函数
    setTimeout(() => {
        console.log(this.id);
    }, 2000)
}

fun1.call({id: '当前'});     // '全局'

fun2.call({id: '当前'});     // '当前'
 

 fn1 中 settimeout 使用普通函数，  2秒钟 后定时器回调执行，此时回调函数 是在全局中执行的，回调函数this 指向全局window  ， 
  fn2 中，settimeout 使用箭头函数，  fn2   执行时候   内部的this  指向{id:'当前'}，此时内部创建定时器以及回调，回调中的this 指针 指向  fn2 作用域中的this ,即{id:'当前'}；

2. .call()/.apply()/.bind()无法改变箭头函数中this的指向 
     箭头函数中的this  只在定义的时候决定， 一经生成，其他时刻不在改变；（对，就是这么霸道）
 
3. 箭头函数不能作为构造函数使用，
       构造函数的特性： 构造函数在实例化过程中，会改变内部的this 指向，改变实例中的属性。
    因为箭头函数没有自己的this ,  只在定义时继承外部的this ,不会随着在哪里调用，被谁调用而改变，所以箭头函数不能用作构造函数，如用new 实例化 ，会报错
4. 箭头函数内部没有 arguments 对象，  可以在箭头函数中使用rest参数代替arguments对象，来访问箭头函数的参数列表！！

const fn =（...rest）=>{
    //  rest  is array  ,can do somethings 
}

5.、箭头函数没有原型prototype 

6. 箭头函数 不能用作 Generator ,内部不能用yelid 关键字