React: ES 6 - Day 4.3

Trong JavaScript truyền thống (ES5 và trước đó), khi bạn định nghĩa một hàm thông qua cách sử dụng từ khóa function, cách thức this hoạt động trong hàm đó sẽ gây ra một số khó khăn. Điều này liên quan đến cách ngữ cảnh (context) của this được xác định trong các hàm.

Một trong những tình huống phổ biến là việc sử dụng hàm trong một sự kiện (event handler) hoặc trong một callback. Trong trường hợp này, giá trị của this thường sẽ tham chiếu đến đối tượng mà sự kiện được gọi hoặc đối tượng của ngữ cảnh bên ngoài callback đó.

function printSong() {
    console.log("Oops - The Global Object");
}
const jukebox = {
    songs: [{
            title: "Wanna Be Startin' Somethin'",
            artist: "Michael Jackson",
        },
        {
            title: "Superstar",
            artist: "Madonna",
        },
    ],
    printSong: function(song) {
        console.log(song.title + " - " + song.artist);
    },
    printSongs: function() {
        // `this` bound to the object (OK)
        this.songs.forEach(function(song) {
            // `this` bound to global object (bad)
            this.printSong(song);
        });
    },
}
jukebox.printSongs();
// > "Oops - The Global Object"
// > "Oops - The Global Object"

Nếu đổi lại là arrow function, thì sẽ giải quyết được vấn đề context

function printSong() {
    console.log("Oops - The Global Object");
}
const jukebox = {
    songs: [{
            title: "Wanna Be Startin' Somethin'",
            artist: "Michael Jackson",
        },
        {
            title: "Superstar",
            artist: "Madonna",
        },
    ],
    printSong: function(song) {
        console.log(song.title + " - " + song.artist);
    },
    printSongs: function() {
        // `this` bound to the object (OK)
        this.songs.forEach((song) => {
            // `this` bound to global object (bad)
            this.printSong(song);
        });
    },
}
jukebox.printSongs();
// > "Wanna Be Startin' Somethin' - Michael Jackson"
// > "Superstar - Madonna"

Tham khảo

Fullstack React: The Complete Guide to ReactJS and Friends: Appendix B: ES6 - Arrow functions