箭頭函式
Node.js 箭頭函式
Categories:
原始函式與箭頭函式比較
原始函式
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
會一直綁定為原呼叫的物件