Kịch bản thuyết trình: Slide 82

Mình tiếp tục với slide 82 về JavaScript this in Functions.

Ví dụ cơ bản

Xem code ví dụ của hình bên:

Ví dụ 1: Global scope

console.log(this);
// -> Window (browser), undefined (strict mode)

Trong global scope, this trỏ đến đối tượng Window (trong browser), hoặc undefined (trong strict mode).

Ví dụ 2: Normal function

function testFunc() {
    console.log(this);
}
testFunc();
// -> Window (non-strict), undefined (strict)

Trong function thông thường, this cũng trỏ đến Window (non-strict mode) hoặc undefined (strict mode).

Ví dụ 3: Object method

const person = {
    name: "Alice",
    showName() { console.log(this.name); }
};
person.showName();
// -> "Alice"

Trong object method, this trỏ đến object chứa method đó. Ở đây this.name sẽ trỏ đến person.name, tức là "Alice".

Ví dụ 4: Event handler (browser only)

document.getElementById("btn").onclick = function() {
    console.log(this); // -> <button>
};

Trong event handler, this trỏ đến phần tử DOM đã kích hoạt sự kiện. Ở đây là thẻ <button>.

Ví dụ 5: call / bind

function greet() { console.log("Hi " + this.name); }
greet.call({ name: "Bob" }); // -> "Hi Bob"

Dùng call() hoặc bind() để gán this thủ công. Ở đây mình gán this cho object { name: "Bob" }, nên this.name sẽ là "Bob".

Như vậy là mình đã trình bày xong về this trong Functions. Giá trị của this phụ thuộc vào cách hàm được gọi và ngữ cảnh sử dụng.