JavaScript 程式札記 : ES6 箭頭函式

什麼是箭頭函式?

在 JavaScript ES6 之前，JavaScript 的函式主要是使用function關鍵字來定義的。而箭頭函式是 JavaScript ES6 中新增的功能，它提供了一種更簡潔的方式來定義函式。

箭頭函式的使用

箭頭函式的語法主要是使用 => 進行定義。例如 :

// 基本寫法
let test1 = (str) => {
  return str+ 'A';
}
console.log(test1 ('目前英文字為:'));

// 單行陳述不需要 {}
let test2 = (str) => str+ 'B';
console.log(test2 ('目前英文字為:'));

// 只有一個參數時，可以省略括號
let test3 = str => str + 'C';
console.log(test3 ('目前英文字為:'));

// 無參數時，必須加括號
let test4 = () => '目前英文字為:' + 'D';
console.log(test4());

箭頭函式與一般函式的差別

1. 沒有arguments物件

箭頭函式不具有 arguments 物件，這意味著不能直接訪問函式的參數列表。但可以使用其餘參數的方式來取得參數。

// 傳統函式
function test1(a, b) {
    console.log(arguments[0], arguments[1]);
}
test1(1, 2);  // 輸出: 1 2

// 箭頭函式
const test2 = (...args) => {
    console.log(args[0], args[1]);
}
test2(1, 2);  // 輸出: 1 2

2. this 的運用

箭頭函式會繼承上一層作用域的 this ，這與傳統函式不同，傳統函式的預設this是指向 window 物件。

// 傳統函式中的 this
function test1() {
    this.value = "ABC!";
    this.click = function() {
        setTimeout(function() {
            console.log(this.value);  // 這裡的 this 指向全域物件，所以會輸出 undefined
        }, 1000);
    }
}
const btn1= new test1();
btn1.click();

// 箭頭函式的 this
function test2() {
    this.value = "DEF!";
    this.click = function() {
        setTimeout(() => {
            console.log(this.value);  // 這裡的 this 指向 test2 的實例，所以輸出 "DEF"
        }, 1000);
    }
}
const btn2= new test2();
btn2.click();

😊 感謝你的耐心閱讀，若是你喜歡這篇內容，可以透過以下方式表達你的喜歡 😊

❤️按個愛心｜💬留言互動｜🔗分享此文｜📌追蹤阿梧｜☕請喝咖啡