Từ khóa this trong JavaScript: quy tắc binding và cái bẫy

this được quyết định lúc gọi hàm

Phần lớn nhầm lẫn về this đến từ một giả định sai: rằng this phụ thuộc vào nơi hàm được định nghĩa. Không phải vậy. this phụ thuộc vào cách hàm được gọi.

Hãy xem cùng một hàm được gọi theo hai cách:

function whoAmI() {
    return this;
}

const user = { name: "Ada", whoAmI };

console.log(user.whoAmI() === user);   // true
console.log(whoAmI());                  // undefined (in strict mode)

Cùng một hàm, nhưng this khác nhau. Lời gọi đầu tiên có user ở bên trái dấu chấm, nên this là user. Lời gọi thứ hai không có gì bên trái, nên this là undefined. Bản thân hàm không đổi: chỗ gọi mới là thứ thay đổi.

Hãy ghi nhớ ý này: muốn biết this là gì, hãy nhìn vào lời gọi, không phải phần định nghĩa.

Bốn quy tắc binding

Có bốn cách để this được gán giá trị. Gần như mọi thắc mắc liên quan đến this đều được giải đáp khi bạn xác định được quy tắc nào đang áp dụng.

1. Gọi phương thức: obj.fn()

Khi một hàm được gọi như một thuộc tính của đối tượng, this chính là đối tượng đó:

const counter = {
    count: 0,
    increment() {
        this.count += 1;
        return this.count;
    },
};

console.log(counter.increment());   // 1
console.log(counter.increment());   // 2

Thứ nằm bên trái dấu chấm trở thành this. Đơn giản vậy thôi.

2. Gọi thông thường: fn()

Khi được gọi mà không có đối tượng phía trước, this là undefined ở strict mode (module và lớp tự động bật chế độ này) hoặc là đối tượng toàn cục ở sloppy mode:

"use strict";

function show() {
    console.log(this);
}

show();   // undefined

Đây chính là nguồn gốc của các lỗi "this is undefined". Tách một phương thức khỏi đối tượng của nó sẽ biến lời gọi phương thức thành lời gọi thông thường:

"use strict";

const counter = {
    count: 0,
    increment() { this.count += 1; },
};

const fn = counter.increment;
// fn();   // TypeError: Cannot read properties of undefined

Không có counter. trước lời gọi thì không có binding. Hàm không nhớ đối tượng mà nó được lấy ra.

3. Binding tường minh: .call(), .apply(), .bind()

Bạn có thể ép this thành bất cứ thứ gì bạn muốn:

function greet(greeting) {
    return `${greeting}, ${this.name}`;
}

const ada = { name: "Ada" };

console.log(greet.call(ada, "Hello"));       // Hello, Ada
console.log(greet.apply(ada, ["Hi"]));       // Hi, Ada

const greetAda = greet.bind(ada);
console.log(greetAda("Hey"));                // Hey, Ada

.call và .apply gọi hàm ngay lập tức; chúng chỉ khác nhau ở cách truyền đối số. .bind trả về một hàm mới với this được khóa cố định, rất hữu ích cho callback.

4. Gọi bằng new: new Fn()

Gọi một hàm bằng new sẽ tạo một đối tượng mới và gán nó cho this:

function User(name) {
    this.name = name;
}

const ada = new User("Ada");
console.log(ada.name);   // Ada

Lớp (class) dùng chính cơ chế này ở bên dưới. Chúng ta sẽ gặp lớp ở một chương sau.

Arrow function không có this riêng

Arrow function cố ý phá vỡ các quy tắc trên. Nó hoàn toàn không gán this: nó kế thừa this từ phạm vi bao quanh, cố định tại thời điểm arrow function được định nghĩa:

const user = {
    name: "Ada",
    regular: function () { return this; },
    arrow: () => this,
};

console.log(user.regular() === user);   // true
console.log(user.arrow());              // undefined (or window/globalThis)

Arrow function ở cấp cao nhất của một module giữ lấy this của module, tức là undefined. Dù được gọi dưới dạng user.arrow(), arrow function vẫn không chịu gán lại.

Nghe như một bug, nhưng đó chính là mục đích. Arrow function phát huy tác dụng bên trong phương thức, khi bạn muốn giữ this của bên ngoài:

const timer = {
    seconds: 0,
    start() {
        setInterval(() => {
            this.seconds += 1;
            console.log(this.seconds);
        }, 1000);
    },
};

// timer.start();   // logs 1, 2, 3, ...

Arrow function bên trong setInterval kế thừa this từ start, vốn được gọi dưới dạng timer.start(). Vì thế this.seconds hoạt động. Nếu dùng một function thông thường ở đó, nó sẽ có this riêng (bất cứ thứ gì setInterval truyền vào) và code sẽ hỏng.

Quy tắc chung: dùng arrow function cho callback bên trong phương thức. Dùng hàm thông thường cho chính các phương thức.

Cái bẫy callback kinh điển

Đây là cách phổ biến nhất khiến this đi chệch hướng. Bạn truyền một phương thức làm callback và nó mất binding:

class Counter {
    count = 0;
    increment() {
        this.count += 1;
        console.log(this.count);
    }
}

const c = new Counter();
c.increment();   // 1

// setTimeout(c.increment, 100);   // TypeError: this is undefined

setTimeout gọi hàm như một lời gọi thông thường, không phải c.increment(). Có ba cách sửa:

class Counter {
    count = 0;
    increment() {
        this.count += 1;
        console.log(this.count);
    }
}

const c = new Counter();

// 1. Arrow wrapper - call it as a method inside the arrow
setTimeout(() => c.increment(), 0);

// 2. .bind - lock this to c
setTimeout(c.increment.bind(c), 0);

// 3. Class field with arrow - auto-bound per instance
class Counter2 {
    count = 0;
    increment = () => {
        this.count += 1;
        console.log(this.count);
    };
}
setTimeout(new Counter2().increment, 0);

Cả ba đều hoạt động. Bọc trong arrow function thường là cách rõ ràng nhất.

this ở cấp cao nhất

Giá trị this ở cấp cao nhất phụ thuộc vào nơi code của bạn chạy:

• Script trên trình duyệt (không phải module): this là window.
• ES module (gồm hầu hết code hiện đại đã qua bundler): this là undefined.
• Module CommonJS của Node.js: this là module.exports.

Để tham chiếu đáng tin cậy tới đối tượng toàn cục ở mọi môi trường, hãy dùng globalThis:

console.log(typeof globalThis);   // object
globalThis.appVersion = "1.0.0";
console.log(globalThis.appVersion);

Trên thực tế, bạn không nên dựa vào this ở cấp cao nhất. Hãy dùng globalThis khi thật sự cần đối tượng toàn cục, còn lại thì truyền giá trị một cách tường minh.

Cây quyết định nhanh

Khi gặp this mà không chắc nó sẽ là gì, hãy lần lượt đi qua danh sách sau:

1. Hàm có phải là arrow function không? Nếu có, this là giá trị của nó trong phạm vi bao quanh. Bỏ qua hoàn toàn chỗ gọi.
2. Hàm có được gọi bằng new không? Nếu có, this là đối tượng mới.
3. Hàm có được gọi bằng .call, .apply hoặc là một hàm đã bind không? Nếu có, this là thứ được truyền vào.
4. Hàm có được gọi dưới dạng obj.method() không? Nếu có, this là obj.
5. Hàm có được gọi dưới dạng fn() thông thường không? Nếu có, this là undefined ở strict mode.

Chiếc thang đó, theo đúng thứ tự đó, quyết định mọi trường hợp.

Tiếp theo: hàm bậc cao

Giờ this không còn là bí ẩn, bạn đã sẵn sàng cho mẫu hình khiến JavaScript giàu sức biểu đạt đến vậy: truyền hàm đi như những giá trị. Tiếp theo, chúng ta sẽ tìm hiểu hàm bậc cao (higher-order function), tức là những hàm nhận vào hoặc trả về hàm khác, và cách chúng làm nên các phương thức mảng, trình xử lý sự kiện và phần lớn code JavaScript trong thực tế.