iT邦幫忙

3

JavaScript ES6 - 箭頭函式(arrow function)

箭頭函式不同於一般傳統函式,可以帶來更直觀更簡潔的寫法。

箭頭函式結構:

傳統函式如下:

const Fn = function (){
    return `Hi`;
}

而箭頭函式的結構如下:

const arrFn = () => {
    return `Hi`;
}

除了省略了關鍵字 function 之外,還有一個更關鍵的 => 箭頭。

帶有參數時候的差異性:

傳統函式如下:

const Fn = function (name){
    return name;
}

箭頭函式如下:

const arrFn = (name) => {
    return name;
}

可以看的出來箭頭函式的參數是放在 () 內的
而在只有一個參數時,還可以更精簡的縮寫如下:

const arrFn = name => {
    return name;
}

可以直接省略 (),這是在僅有一個參數的情況下才可以省略,兩個以上的參數時,不能省略
這樣就結束了嗎? 當然還沒!
當要直接 return 一個值的時候,還可以更精簡:

const arrFn = name => name;

除了省略了 {} 還直接省略了關鍵字 return

到這裡已經是嘆為觀止了 !!! /images/emoticon/emoticon38.gif

但跟傳統函式還有其他的不同之處 ~~

箭頭函式沒有 arguments 參數

傳統函式如下:

const nums = function (){
    console.log(arguments);
}

nums(10,20,30);

在傳統函式時,我們可以使用 arguments 參數,把帶入的值一一取出來,而 arguments 是一個類陣列。
箭頭函式如果使用 arguments 參數時,會直接跳錯,這個時候想做到一樣的結果,就可以使用其餘參數,而且帶出來的值,不會是類陣列,而是純陣列:

const nums = (...arg) => {
    console.log(arg)
}

nums(10,20,30);

this 的差異性

箭頭函式跟傳統函式,莫過於 this 的指向,看下面的例子:

var myName = '全域';
var person = {
    myName: '小明',
    callName: function(){
        console.log(this.myName);  // 小明
        setTimeout(function(){
            console.log(this.myName); // 全域
        },10);
    }
};

person.callName();

在呼叫 person 物件的 callName function 的時候,this 的指向是物件本身,但在裡面還有一個 setTimeout 的 callBack function 這時候 this 的指向就會是全域環境
如果把 setTimeout 改成箭頭函式:

var person = {
    myName: '小明',
    callName: function(){
        console.log(this.myName);  // 小明
        setTimeout(() => {
            console.log(this.myName); // 小明
        },10);
    }
};

這時候 this 的指向都會是小明,這是因為箭頭函式沒有自己的 this 所以只能向外面一層去尋找
同理可證,如果把 callName 也改成箭頭函式:

var person = {
    myName: '小明',
    callName: () => {
        console.log(this.myName);  // 全域
        setTimeout(() => {
            console.log(this.myName); // 全域
        },10);
    }
};

這時候呼叫 callName functionthis 的指向就會是全域,setTimeout 隨著外層的 this 指向改變,也只能指向全域。

2020/06/25 新增:

箭頭函式回傳物件

傳統函式回傳物件:

const Fn = function (){
    return {
        num: 1
    }
};

此時一樣的模式在箭頭函式:

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

這時候會跳錯,箭頭函式並不能用這樣的方式直接回傳物件,若真的要回傳一個物件格式,務必如下:

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

記得用 () 包起來

箭頭函式搭配判斷式

傳統函式搭配判斷式:

let num = 0;

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

這時候呼叫 numFn 是會回傳 1
如果改成箭頭函式:

const arrFn = num || () => 1

這時候就會跳錯了,但真的也想回傳這個箭頭函式,也請用 () 包起來

const arrFn = num || (() => 1)

尚未有邦友留言

立即登入留言