箭頭函式就是把：
1. 在函式如果是函式表達式的情況
把function、大括號、return拿掉，在參數後面加入箭頭
1. 函式表達式
const callName = function(name, age){
return '我是' + name + '，我' + age + '歲。';
}
console.log(callName('泥泥', '5'));///////////////////箭頭函式
const callName = (name, age) => '我是' + name + '，我' + age + '歲。';
console.log(callName('泥泥', '5'));
2. 在函式如果只有一個參數的情況
把function、大括號、return、唯一個參數的括號拿掉，在參數後面加入箭頭
2. 函式只有一個參數
const callName = function(name){
return '我是' + name;
}
console.log(callName('泥泥'));///////////////////箭頭函式
const callName = name => '我是' + name;
console.log(callName('泥泥'));
但是如果函是沒有參數，括號是不能省略的。
但是如果函是沒有參數，括號是不能省略的。
const callName = () => '我是';
console.log(callName());箭頭函式與傳統函式不同之處
- 箭頭函式沒有 arguments 這個參數。
(什麼是arguments？) - 箭頭函式沒有自己的 this。
※ 傳統function函式的this，是取person
var name = '全域的泥泥';
var person = {
name: '裡面的泥泥',
callName: function () {
console.log(this.name);
}
}
person.callName(); // 得到'裡面的泥泥'///////////////※ 改成箭頭函式的話，this就只會抓上一層的
var name = '全域的泥泥';
var person = {
name: '裡面的泥泥',
callName: () => {
console.log(this.name);
}
}
person.callName(); // 得到'全域的泥泥'
3. 箭頭函式無法透過 call、apply、bind 重新給予 this。
4. 箭頭函式無法作為一個建構函式使用(無法使用new)。
常見問題
- 箭頭函式不能直接回傳 '物件'，要在物件外面 + 小括號。
錯誤寫法
const obj = () => {data: 1};
console.log(obj()); // 這樣會跳錯誤，因為物件的大括號會被視為函式的一部分。正確寫法
const obj = () => ({data: 1});
console.log(obj()); // 得到{data: 1}
2. 判斷式後面不能直接寫箭頭函式，要把箭頭函式外面 + 小括號。
錯誤寫法
let num = 0;
const numFn = num || => 1
console.log(numFn()); // 這樣會跳錯誤。正確寫法
let num = 0;
const numFn = num || (=> 1)
console.log(numFn()); // 得到 1
3. 一定要注意，箭頭函式沒有自己的 this，如果一定要用this，就改回function寫法。
※※ 也就是說，如果要用到 this，就盡量用傳統function寫，一定要用箭頭函式就必須小心使用！
