JavaScript ES6 箭頭函式 Arrow function

箭頭函式是 ES6 的新語法。

// 原本的寫法
function double(x) {
  return x * 2;
}
// 或是
var double = function(x) {
  return x * 2;
};

// ES6 語法
const double = x => {
  return x * 2;
};

箭頭函式的簡寫規則

1.如果參數只有一個，可省略參數的括號(x)=> x，0 或多個都不可省略。

const double = x => {
  return x * 2;
};

2.函式本體如果只有一行，且只有 return 一個值，可省略大花括號和 return，直接把本體接在=>後面

const double = x => x * 2;

This 是什麼？和箭頭函式的關係

this 指的是函式的情境(context)，某人去 101 大樓往下跳，但跳下去沒事，因為在爬樓梯，他只有跳一格的樓梯，當然沒事，但是跳這個動作很明確，就像是函式的定義一樣。
但是你在什麼樣的情境下跳，會影響他的結果，這個情境就是 Context 。
例如：一個跳的函式，裡面內容是固定的，但裡面的 this 就要看他執行時的情境而定。

function jump() {
  console.log(this);
}

javascript 裡函式的執行基本上可分為三種： 1.直接執行： 函式裡的 this 是 window (global)

jump();
// window 物件

2.作為一個物件的方法來執行:裡面的 this 就是物件。

const a = {};
a.jump = jump;
a.jump();
// 執行結果是物件 {jump:f..}

3.假設頁面上有一個 button，點它就會執行 jump()，
如果一個函式以 Dom 監聽函式來執行，函式裡面的 this 就會指向所監聽的元素 Dom。

<button id="btn">
btn
</button>

function jump() {
  console.log(this);
}
btn.sddEventListener('click', jump);
// button DOM

用箭頭 This 會改變

如果以箭頭函式攥寫 Dom 的監聽函式，This 就會改變成指向 window。

const jump = () => {
  console.log(this);
};
btn.sddEventListener('click', jump);
// window
const a = {};
a.jump = jump; // window
a.jump(); // window

只要是箭頭函式，無論如何執行它，裡面的 this 都會指向 window，這就是箭頭函式的特性，它沒有自己的情境(Context)，它的內部 context 就等於它宣告的時候，它外面的 this。

React 會大量的用到 This 所以一定要弄懂。