Bàn về this trong JavaScript - Tại sao lại là "this"

Một trong những cơ chế gây nhầm lẫn nhiều nhất trong JS, ngay cả với những developer có kinh nghiệm, đó là từ khóa this. Nó là một định danh rất đặc biệt được mặc định có ở tất cả các scope của function, nếu bạn từng chạy debug JS sẽ thấy Không khó để hiểu this, tuy nhiên khi mà phần lớn chúng ta đều đã từng học các ngôn ngữ hướng đối tượng thuần như Java, C#,... thì khi chuyển sang tìm hiểu JS, this trở thành một vấn nạn bởi chính cái tên của nó.

Tại sao lại là "this"

Nếu this rất dễ gây nhầm lẫn, thậm chí với developer có kinh nghiệm, vậy tại sao this được sử dụng? Có phải rắc rối của nó nhiều hơn là lợi ích mang lại? Trước khi tim hiểu this hoạt động thế nào, chúng ta hãy xem tại sao người ta dùng this. Đoạn code dưới đây minh họa về tiện ích của this.

function identify() {
    return this.name.toUpperCase()
}
function speak() {
    var greeting = "Hello, I'm " + identify.call(this);
    console.log(greeting)
}
var me = {
    name: "Huy"
}
var you = {
    name: "Reader"
}
identify.call(me)   // HUY
identify.call(you)  // READER
speak.call(me)      // Hello, I'm HUY
speak.call(you)     // Hello, I'm READER

Đoạn code trên cho phép các hàm identify() và speak() được sử dụng lại dưới nhiều ngữ cảnh khác nhau (me và you), hơn là việc phải chia tách phiên bản của mỗi hàm cho mỗi ngữ cảnh. Nhiều người cũng thấy ngay rằng thay vì dựa vào this, mình có thể thay bằng như sau:

function identify(context) {
    return context.name.toUpperCase()
}
function speak(context) {
    var greeting = "Hello, I'm " + identify(context);
    console.log(greeting)
}
var me = {
    name: "Huy"
}
var you = {
    name: "Reader"
}
identify(you);  // READER
speak(me);      // Hello, I'm HUY

Hiện tại, mình chỉ có thể nói về mặt lý thuyết, sử dụng this cung cấp một cách truyền object vào function gọn gàng hơn, giúp ta xây dựng một giao diện ứng dụng trông clean hơn và dễ dàng reuse. Khi các mô hình lập trình bạn sử dụng ngày càng phức tạp, thì bạn sẽ thấy rõ ràng hơn rằng việc truyền ngữ cảnh sử dụng explicit parameter thường lộn xộn hơn là sử dụng this. Đến khi tìm hiểu object và prototype, bạn sẽ thấy những lợi ích của việc sử dụng các function có khả năng tự động tham chiếu tới ngữ cảnh thích hợp (chính bởi việc sử dụng this).