ES6的箭头函数用法详细介绍

ES6标准新增了一种新的函数：Arrow Function（箭头函数）。
箭头函数一般用于匿名函数的定义，例如一个函数做参数使用。

箭头函数的基本使用

普通函数的定义

 const add = function (num1 ,num2) {
   return num1 + num2
 }

箭头函数的定义

 const add = (num1 ,num2) => {
   return num1 + num2
 }

箭头函数参数和返回值

针对参数的不同情况

1. 没有参数

 const hello = () => {
   console.log("hello Arrow Function!");
 }

2. 一个参数：小括号可以省略

const hello = name => {
  console.log(`hello ${name}!`);
}

3. 两个参数：括号不能省略

 const add = (num1 ,num2) => {
   return num1 + num2
 }

针对代码行数的不同情况

1. 函数体只有多行代码

const log = () => {
  console.log("hello ES6");
  console.log("hello Vue");
}

2. 函数体只有一行代码可以简写
   const add = (num1 ,num2) => num1 + num2
   以上代码等同于下面的代码，它会把这行代码的返回值返回

const add = (num1, num2) => {
  return num1 + num2
 }

• 观察实例：输出了3

  const add = (num1, num2) => {
    return num1 + num2
  }
  console.log(add(1, 2));

箭头函数中的this是如何查找的呢？

箭头函数中this的使用

首先我们看一下代码

  const obj = {
    aaa() {
      setTimeout(function (){
        console.log(this)
      })
      setTimeout(()=>{
        console.log(this)
      })
    }
  }
  obj.aaa();

我们会发现两次输出的this内容并不相同，在function函数中的this代表的是window,箭头函数中的this是obj对象

先来结论

结论：

1. 作参数/变量的一般函数中的this指的都是window对象
2. 作对象属性的一般函数中的this指的都是所在对象
3. 箭头函数中的this指的都是外层作用域的this
   • 箭头函数作参数：this为调用代码所在作用域的this
   • 箭头函数作变量：this为该变量所在作用域的this
   • 箭头函数作属性：this为定义对象所在作用域的this
4. 箭头函数中this：需要向外层作用域中一层层查找this，直到有this的定义

例子

例一

<script>
  const obj = {
    test() {
      setTimeout(function () {
        setTimeout(function (){
          console.log(this) //window
        })
        setTimeout(()=>{
          console.log(this) //window
        })
      })
      setTimeout(() => {
        setTimeout(function (){
          console.log(this) //window
        })
        setTimeout(()=>{
          console.log(this) //obj
        })
      })
    }
  }
  obj.test();
</script>

第一个输出：普通函数做方法参数，输出window
第二个输出：箭头函数寻找上层作用域，上层作用域是普通函数做方法参数，this为window，因此输出window对象
第三个输出：普通函数做方法参数，输出window
第四个输出：箭头函数寻找上层作用域，上层作用域是箭头函数做方法参数继续寻找上的作用域，它的上层为普通方法做对象属性，this为所在对象，因此输出为obj对象

例二

<script>
  const obj = {
    test: function() {
      const func = () => {
        console.log(this) //obj
      }
      const func2 = function() {
        console.log(this) //window
      }
      func();
      func2();
      setTimeout(function (){
        console.log(this) //window
      })
      setTimeout(() => {
        console.log(this) //obj
      })
    }
  }
  obj.test();
</script>

第一个输出：箭头函数做变量，寻找该变量所在作用域(this的上层作用域)，该变量所在作用域为普通函数做属性，this为该对象，因此输出为obj
第二个输出：普通函数作变量，this为window，输出位window
第三个输出：普通函数做方法参数，输出window
第四个输出：箭头函数寻找上层作用域，上层作用域是普通方法做对象属性，this为所在对象，因此输出为obj对象

例三

<script>
  const obj = {
    test: () => {
      setTimeout(function (){
        console.log(this)// window
      })
      console.log(this) //window
      setTimeout(() => {
        console.log(this) //window
      })
    }
  }
  obj.test();
</script>

第一个输出：普通函数做方法参数，输出window
第二个输出：箭头函数作对象属性，该作用域的this就是定义对象所在作用域的this，即为window
第三个输出：箭头函数寻找上层作用域，上层作用域是箭头函数做方法参数继续寻找上的作用域，它的上层为箭头函数做对象属性，this为对象所在作用域，因此输出为window