Giải Thích Từ Khóa ‘this’ Trong JavaScript Với Ví Dụ Cụ Thể

Mục Lục

1. Giới thiệu
2. Từ Khóa this Là Gì?
3. Cách Hoạt Động Của this Trong Các Ngữ Cảnh
   • Ngữ Cảnh Toàn Cục
   • Bên Trong Hàm
   • Bên Trong Phương Thức Của Đối Tượng
   • Trong Hàm Mũi Tên
   • Trong Lớp
4. Những Sai Lầm Thường Gặp Với this
5. Thực Hành Tốt Nhất
6. Mẹo Tối Ưu Hiệu Suất
7. Giải Quyết Vấn Đề
8. Kết Luận
9. Câu Hỏi Thường Gặp

Giới Thiệu

Nếu bạn mới bắt đầu học JavaScript, có lẽ bạn đã gặp từ khóa this. Đối với nhiều người mới bắt đầu, đây là một trong những phần khó hiểu nhất của ngôn ngữ. Nguyên nhân là vì giá trị của this thay đổi tùy thuộc vào cách và nơi nó được sử dụng.

Nhưng đừng lo, một khi bạn hiểu các quy tắc, this sẽ trở nên dễ dàng hơn rất nhiều.

Những Gì Bạn Sẽ Học Được

Cuối cùng của hướng dẫn này, bạn sẽ:

• Hiểu được ý nghĩa của từ khóa this trong JavaScript.
• Học cách this hoạt động trong các tình huống khác nhau.
• Thấy cách this hoạt động trong hàm, đối tượng và lớp.
• Khám phá những sai lầm phổ biến mà người mới thường gặp khi sử dụng this.
• Tự tin hơn khi sử dụng this với các ví dụ thực tế.

Từ Khóa this Là Gì?

Trong JavaScript, this đại diện cho đối tượng đang gọi hoặc thực thi hàm.

Hãy nghĩ về nó như một tham chiếu mà chỉ đến một thứ khác nhau tùy thuộc vào ngữ cảnh mà nó xuất hiện.

Cách Hoạt Động Của this Trong Các Ngữ Cảnh

Ngữ Cảnh Toàn Cục

Trong phạm vi toàn cục (ngoài bất kỳ hàm nào), this tham chiếu đến đối tượng toàn cục.

• Trong trình duyệt, đối tượng toàn cục là window.

console.log(this); // window (trong trình duyệt)

Bên Trong Hàm

Trong một hàm thông thường, this phụ thuộc vào cách hàm được gọi.

function showThis() {
    console.log(this);
}
showThis(); // window (trong chế độ không nghiêm ngặt)

Trong chế độ nghiêm ngặt, this bên trong hàm trở thành undefined.

Bên Trong Phương Thức Của Đối Tượng

Khi một hàm là phương thức của một đối tượng, this tham chiếu đến đối tượng đó.

const user = {
    name: "Wisdom",
    greet: function() {
        console.log(this.name);
    }
};
user.greet(); // Wisdom

Trong Hàm Mũi Tên

Hàm mũi tên không có this riêng. Thay vào đó, chúng sử dụng giá trị this từ ngữ cảnh xung quanh.

const user = {
    name: "Udo",
    greet: () => {
        console.log(this.name);
    }
};
user.greet(); // undefined, vì hàm mũi tên không gán `this` riêng

Trong Lớp

Bên trong một lớp, this thường tham chiếu đến thể hiện của lớp đó.

class Person {
    constructor(name) {
        this.name = name;
    }
    sayName() {
        console.log(this.name);
    }
}
const person1 = new Person("Wisdom");
person1.sayName(); // Wisdom

Những Sai Lầm Thường Gặp Với this

• Quên ngữ cảnh: Người mới thường mong đợi this luôn tham chiếu đến cùng một thứ, nhưng nó thay đổi tùy thuộc vào nơi nó được sử dụng.
• Hàm mũi tên trong đối tượng: Sử dụng hàm mũi tên cho các phương thức của đối tượng có thể dẫn đến kết quả không mong muốn, vì chúng không gán ngữ cảnh riêng cho this.
• Sự khác biệt trong chế độ nghiêm ngặt: Trong chế độ nghiêm ngặt, this bên trong hàm là undefined thay vì đối tượng toàn cục.

Thực Hành Tốt Nhất

• Sử dụng hàm thông thường khi cần this riêng: Nếu bạn cần this tham chiếu đến đối tượng mà hàm đang được gọi, hãy sử dụng hàm thông thường thay vì hàm mũi tên.
• Kiểm tra ngữ cảnh: Luôn kiểm tra ngữ cảnh mà hàm được gọi để dự đoán giá trị của this.
• Sử dụng bind() nếu cần: Nếu bạn cần gán this cho một hàm, hãy sử dụng phương thức bind().

Mẹo Tối Ưu Hiệu Suất

• Tránh lạm dụng hàm mũi tên: Mặc dù hàm mũi tên dễ sử dụng nhưng chúng có thể gây nhầm lẫn về ngữ cảnh this.
• Profiling mã: Sử dụng công cụ profiling để theo dõi hiệu suất của mã, đặc biệt khi sử dụng nhiều đối tượng và lớp.

Giải Quyết Vấn Đề

• this là undefined: Nếu bạn thấy this là undefined, hãy kiểm tra xem bạn có đang ở trong chế độ nghiêm ngặt hay không, hoặc cách bạn gọi hàm.
• Giá trị không như mong đợi: Nếu bạn không nhận được giá trị như mong đợi từ this, hãy xem lại cách bạn gọi phương thức.

Kết Luận

Từ khóa this trong JavaScript có thể có vẻ khó hiểu lúc đầu, nhưng nó luôn tuân theo các quy tắc rõ ràng. Trong phạm vi toàn cục, nó thường chỉ đến đối tượng toàn cục, trong khi bên trong các hàm, giá trị của nó phụ thuộc vào cách các hàm đó được gọi. Trong các phương thức của đối tượng, this tham chiếu đến chính đối tượng đó, và trong các lớp, nó chỉ đến thể hiện cụ thể đã được tạo. Hàm mũi tên hoạt động khác, mượn this từ ngữ cảnh xung quanh.

Bằng cách thực hành các tình huống này, bạn sẽ dần nhận ra rằng this không bí ẩn như bạn tưởng. Hiểu cách this hoạt động sẽ làm cho mã JavaScript của bạn trở nên dễ đoán, đáng tin cậy và dễ dàng gỡ lỗi, là một bước quan trọng để trở thành một nhà phát triển tự tin.

Bạn có thể liên hệ với tôi qua LinkedIn để thảo luận thêm về JavaScript.