JS核心-(65)-ES6 章節：箭頭函式-常見問題

前言

探討關於箭頭函式的常見問題

回傳的問題

先前有說過，當我們想要箭頭函式直接回傳一個值的時候，可以省略大括號 { } ，直接指向該值：

const arrFn = () => 1;

console.log(arrFn());

但如果我們今天要回傳一個物件的時候

const arrFn = () => { data: 1 };

console.log(arrFn());

顯示是 undefined ，原因在於這個物件的 { } 被當作是箭頭函式的 Block ，而非物件實字的外層，

要解決這樣的問題，只要在物件外層包上 ( ) 就可以了！

const arrFn = () => ({ data: 1 });

console.log(arrFn());

---

邏輯運算子的連用

let num = 0;

const numFn = num || function () { return 1; }

console.log(numFn());

以上的狀況我們知道 num 是 Falsy (假值)，所以一定會回傳後面的函式，之後執行回傳的結果是 1

但如果改成箭頭函式的話呢？

let num = 0;

const numFn = num || () => 1;

console.log(numFn());

就會報錯！原因就在箭頭函式在接邏輯運算子的時候，一樣需要用 ( ) 隔開。

let num = 0;

const numFn = num || (() => 1);

console.log(numFn());

---

This 的指向

const person = {
    myName: '小明',
    callName: () => {
        console.log(this.myName);
    }
};

person.callName();

以這樣的狀況進行箭頭函式的調用，這個時候的 this 就會指向全域的物件 window

所以要改善這樣的情況，只要把箭頭函式改成傳統函式就可以了

const person = {
    myName: '小明',
    callName: function () {
        console.log(this.myName);
    }
};

person.callName();

而這樣的錯誤最常發生在跟框架一起使用的時候 (以 Vue 為例) ：

const app = new Vue({
    data: {
        num: 1
    },
    created: function () {
        // Vue 的元件生命週期一開始會執行的階段
        console.log(this.num);
    }
});

這邊 created 如果是使用傳統函式的話，就可以正確的取到值，但是如果是使用箭頭函式的話則會取到 undefined

---

利用箭頭函式來做為原型鏈上的方法

const Fn2 = function (a) {
    this.name = a;
}

Fn2.prototype.protoFn = () => {
    return this.name;
}

const newObj = new Fn2('函式');
console.log(newObj.protoFn());  //空值

雖然我們可以找到這個用箭頭函式新增的方法，執行起來也沒問題，但因為是箭頭函式，裡面 this 的指向還是指向到全域的

物件 window 上，所以無法達到預期的效果。最快的修正方法還是建議使用傳統函式替代。