箭頭函式

Node.js 箭頭函式
Categories:
Tags:

原始函式與箭頭函式比較

原始函式

function greeting() {
  console.log('Hello, JavaScript!!');
}

greeting();

箭頭函式

const greeting = () => {
  console.log('Hello, JavaScript!!');
};

greeting();

函式僅回傳指定資料

函式本身只是要回傳某個值的話，可以把 return 這個字省略掉，要回傳的資料直接放在箭頭後方

const greeting = () => console.log('Hello, JavaScript!!');
greeting();

const greeting = () => 'Hello, JavaScript!!';
console.log(greeting()); // 'Hello, JavaScript!!'

// 等同於這樣寫
const greeting = function () {
  return 'Hello, JavaScript!!';
};

箭頭函式帶入參數值

const add = (a, b) => a + b;
console.log(add(3, 5));

// 等同於這樣寫
const add = function (a, b) {
  return a + b;
};

箭頭函式對 this 的影響

箭頭函式當中的 this 綁定的是是定義時的物件，而不是使用時的物件，所以定義當下 this 指的是哪個物件就會是那個物件，不會隨著時間改變

let id = 21;
let data = {
    id: 21,
};

fn.call(data);
arrowFn.call(data);

// 原本的 function
function fn() {
    // [fn] Object
    console.log(`[fn] ${this.constructor.name}`);

    setTimeout(function () {
        // [fn.setTimeout] Timeout
        console.log(`[fn.setTimeout] ${this.constructor.name}`);
    }, 100);
}

// 箭頭函式 Arrow function
function arrowFn() {
    // [arrowFn] Object
    console.log(`[arrowFn] ${this.constructor.name}`);

    setTimeout(() => {
        // [arrowFn.setTimeout] Object
        console.log(`[arrowFn.setTimeout] ${this.constructor.name}`);
    }, 100);
}
  • this.constructor.name：這樣子的寫法只是避免在回傳出物件的時候，把整個物件內容給傳出來，而是僅傳出該物件的名稱。

使用 .call(data) 指定在函式都是使用 data 這個物件當作是 this 物件

fn.call(data) 傳統函式

裡面的 setTimeout 執行的時間點是在 Stack 沒有任務時，才從 task queue 拿出來執行，當時的執行環境是 global environment，所以 this 的綁定會依據當時執行的環境換掉

arrowFn.call(data) 箭頭函式

裡面的 setTimeout 是在 data 物件當成是 this 時候定義的，所以箭頭函式內的 this 會一直綁定為原呼叫的物件

參考資料