Cách truy cập từ khóa 'this' bên trong arrow function trong JavaScript

Từ khóa 'this' trong JavaScript tham chiếu đến đối tượng mà nó thuộc về. Trong arrow function, 'this' thuộc về đối tượng toàn cục. Bên trong một function thông thường, có thể xảy ra trường hợp từ khóa 'this' trả về undefined, nhưng trong arrow function nó luôn trả về một giá trị xác định.

Ví dụ

<html> <body> <script>    function Student(fname, grade) {       this.fname = fname;       this.grade = grade;       this.details = function() {          return () => {             document.write(`Hi, I'm ${this.fname} from ${this.grade} grade`);          };       }    } let info = new Student('picaso', 'seventh'); let printInfo = info.details(); printInfo(); </script> </body> </html>

Kết quả

Hi, I'm picaso from seventh grade

Giải thích: Arrow function không có 'this' riêng, nó kế thừa 'this' từ phạm vi bao quanh (lexical scoping). Trong ví dụ này, arrow function bên trong method details() kế thừa 'this' từ instance Student, nên có thể truy cập this.fname và this.grade bình thường.