Js 箭头函数 详细介绍（多种使用场景差异，你学会了吗？）

简要认识

箭头函数是在ES6中添加的一种规范，简化了匿名函数定义的写法。

基本格式

完整写法

let fn = (x,y) => {
  return x + y;
}

//function()写法
let fn = function(x,y) {
  return x + y;
}

只有1个参数时，可以省略 ()

//只有1个参数时，可以省略 ()
let fn = x => {
  return x + x;
}

//function()写法
let fn = function(x) {
  return x + x;
}

没有参数或有两个以上参数时不能省略 () 

let fn1 = () => {
  console.log("没有参数，()不能省略");
}

let fn2 = (x,y) => {
  console.log("两个或以上参数，()不能省略");
  return x + y;
}

//function()写法
let fn1 = function() {
  console.log("你瞧");
}

let fn2 = function(x,y) {
  return x + y;
}

只含一条语句，{ } 和 return 可以省略

//只含一条语句，{} 与 return 可以省略
let fn1 = x => x * x;
let fn2 = (x,y) => x * y;

//完整写法
let fn1 = x => { return x * x; }
let fn2 = (x,y) => { return x * y; }

//function()写法
let fn1 = function(x){
  return x * x; 
}
let fn2 = function(x,y){
  return x * y; 
}

包含多条语句，{ } 和 return 不能省略

//包含多条语句，{} 与 return 不能省略
let fn = x => {
  console.log("x=",x);
  let y = x + x * x;
  return y;
}

//function()写法
let fn = function(x){
  console.log("x=",x);
  let y = x + x * x;
  return y;
}

返回对象字面量

省略写法返回对象时注意需要使用 () 将对象包裹，否则浏览器会把对象的 {} 解析为箭头函数的函数体开始和结束标记。

//需要使用()包裹对象
let obj = name => ({"name": name});

//完整写法
let obj = name => { return {"name": name}; }

//function写法
let obj = function(name) { 
  return {"name": name};
}

this指向（重点！！！）

箭头函数没有自己的this，在箭头函数的函数体中使用this时，会取得其上下文中的this。箭头函数调用时并不会生成自身作用域下的this，它只会从自己的作用域链的上一层继承this。由于箭头函数没有自己的this指针，使用apply、call、bind仅能传递参数而不能动态改变箭头函数的this指向。

（以下例子均在vue组件中的mounted()钩子执行）

不能作为构造器

let fn = () => {};
new fn()    // Uncaught TypeError: fn is not a constructor

不绑定arguments

    let fn1 = (x, y) => {
      console.log(x, y);
      console.log("箭头函数中的arguments：",arguments);
    };

    let fn2 = function (x, y) {
      console.log(x, y);
      console.log("匿名函数function()中的arguments：",arguments);
    };

    fn1(1, 2);
    fn2(1, 2);

如下所示，箭头函数中的arguments长度为0，即未绑定arguments对象

对象的方法使用箭头函数

    //对象方法中使用箭头函数
    let obj1 = {
      name: "leo",
      showName: () => {
        console.log("this：", this);
        console.log("this.name：", this.name);
      },
    };
    
    //对象方法中使用匿名函数function()
    let obj2 = {
      name: "leo",
      showName: function () {
        console.log("this：", this);
        console.log("this.name：", this.name);
      },
    };

    obj1.showName();
    obj2.showName();

箭头函数中的this是当前组件实例（当前上下文对象），不是obj1，由于组件实例name未定义，因此为undefined；而匿名函数function()中的this指向调用该方法的对象，即obj2，因此name为leo。

数组方法中使用箭头函数

    let arr = ["leo"]
    arr.forEach(()=>{
      console.log(this)    //在vue中，则this表示当前组件实例
    })

定时器中使用箭头函数

    setTimeout(()=>{
      console.log(this)    //在vue中，则this为当前组件实例
    },100)

    setTimeout(function(){
      console.log(this)      //this为Window
    },100)

addEventListener使用箭头函数

    let el = document.getElementById("pId")
    el.addEventListener("click",() => {
      console.log(this)    //在vue中，则this为当前组件实例，而不是el元素
    })

    let el = document.getElementById("pId");
    el.addEventListener("click", function () {
      console.log(this);      //this为当前el元素
    });

apply、call、bind中使用箭头函数 

    let obj1 = {
      name: "leo",
      showName: function () {      //使用匿名函数function()，当前this.name为"leo"
        console.log(this.name);
      },
    };

    let obj2 = {
      name: "lion",
    };

    obj1.showName.apply(obj2);     //可以改变this指向，此时this.name为"lion"，call、bind同理

    let obj1 = {
      name: "leo",
      showName: () => {           //使用箭头函数，当前this.name为"undefined"
        console.log(this.name);
      },
    };

    let obj2 = {
      name: "lion",
    };

    obj1.showName.apply(obj2);   //不能改变this指向，this.name仍为"undefined"，call、bind同理

注意：如果this依赖于当前作用域，使用匿名函数function()形式；如果this取上下文对象（没有自身作用域的this），则使用箭头函数形式。