不積跬步，無以至千里；不積小流，無以成江海。

Vuejs語言基礎

箭頭函式：

一種定義函式的方式，允許使用“箭頭”（=>）定義函式。

普通用法：

var f = a = > a

//等同於
var f = function(a){
   return a;  
}

如果不需要引數或需要多個引數，就使用一個圓括號代表引數部分：

//無形參
var f = () => 5;
// 等同於
var f = function () { return 5 };

//多個形參
var sum = (num1, num2) => num1 + num2;
// 等同於
var sum = function(num1, num2) {
  return num1 + num2;
};

箭頭函式的 this 與普通函式的區別：

1. 普通函式：呼叫時被決定；誰呼叫我，this就指向誰。

2. 箭頭函式：定義時被決定；在哪個環境中，this就指向誰。

3. 匿名函式：匿名函式的執行環境是全域性性的，因此this指向window。

<script>
// 問題: 箭頭函式中的this是如何查詢的?
// 答案: 向外層作用域中, 一層層查詢this, 直到有this的定義.
// const obj = {
//   aaa() {
//     setTimeout(function () {
//       console.log(this); // window
//     })
//
//     setTimeout(() => {
//       console.log(this); // obj物件
//     })
//   }
// }
//
// obj.aaa()

const obj = {
  aaa() { //-4
    setTimeout(function () { //-2
      setTimeout(function () { // -1 (誰執行這個方法)
        console.log(this); // window-1
      });

      setTimeout(() => {
        console.log(this); // window-2
      });
    });

    setTimeout(() => {
      setTimeout(function () { //-3
        console.log(this); // window-3
      });

      setTimeout(() => {
        console.log(this); // obj-4
      });
    });
  },
};
obj.aaa();
</script>

部落格借鑑：https://blog.csdn.net/qq_36260974/article/details/105643644