JavaScript - từ khóa this

Xin chào các bạn lập trình viên JavaScript! Hôm nay, chúng ta sẽ bắt đầu một hành trình đầy thú vị vào thế giới của từ khóa this. Là người thầy thân thiện trong lĩnh vực khoa học máy tính, tôi sẽ hướng dẫn các bạn qua khái niệm này, đôi khi phức tạp nhưng luôn luôn hấp dẫn. Hãy lấy饮料 yêu thích của bạn, ngồi thoải mái, và cùng nhau khám phá!

Từ khóa this là gì?

Hãy tưởng tượng bạn đang tham gia một buổi tiệc, và ai đó就叫, "Hey, bạn!" Ai sẽ quay lại? Mọi người, phải không? Nhưng nếu họ nói, "Hey, Sarah!" chỉ Sarah mới phản hồi. Trong JavaScript, từ khóa this giống như nói "Hey, bạn!" với một đối tượng. Nó là cách để tham chiếu đến đối tượng hiện tại trong ngữ cảnh.

Từ khóa this là một标识符 đặc biệt được tự động xác định trong phạm vi của mỗi hàm. Nhưng đây là catches - giá trị của nó được xác định bởi cách hàm được gọi. Tính chất động của this là điều làm cho nó mạnh mẽ và đôi khi gây rối.

this tham chiếu đến đối tượng nào?

Bây giờ, chúng ta sẽ vào phần thú vị. Đối tượng mà this tham chiếu đến có thể thay đổi tùy thuộc vào cách và nơi nó được sử dụng. Nó giống như một con kỳ nhông, thay đổi màu sắc dựa trên môi trường xung quanh. Hãy nhìn vào một số kịch bản:

Cú pháp

Trước khi chúng ta đi sâu hơn, hãy nhanh chóng nhìn qua cách chúng ta sử dụng this:

console.log(this);

Đơn giản, phải không? Nhưng đừng để sự đơn giản của nó đánh lừa bạn. Phép màu (hoặc rắc rối) xảy ra khi chúng ta sử dụng nó trong các ngữ cảnh khác nhau.

JavaScript this trong phạm vi toàn cục

Khi sử dụng 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 một trình duyệt, điều này thường là đối tượng window.

console.log(this === window); // true

this.myGlobalVar = "Tôi là toàn cục!";
console.log(window.myGlobalVar); // "Tôi là toàn cục!"

Ở đây, this giống như thẻ VIP giúp bạn có quyền truy cập vào toàn bộ buổi tiệc (phạm vi toàn cục).

JavaScript this trong một hàm

Khi this được sử dụng bên trong một hàm thông thường, giá trị của nó tùy thuộc vào cách hàm được gọi.

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

showThis(); // window (trong chế độ không khắt khe)

Trong trường hợp này, this giống như một chú chó lạc, dính vào bất cứ thứ gì xung quanh - và trong chế độ không khắt khe là đối tượng toàn cục.

this trong một hàm trong chế độ khắt khe

Chế độ khắt khe giống như một người giáo viên khắt khe không để bạn trốn tránh bất kỳ điều gì. Trong chế độ khắt khe, this bên trong một hàm là undefined除非明确设置。

"use strict";
function strictThis() {
console.log(this);
}

strictThis(); // undefined

this trong một hàm tạo

Khi một hàm được sử dụng như một hàm tạo (với từ khóa new), this tham chiếu đến đối tượng mới được tạo ra.

function Person(name) {
this.name = name;
this.greet = function() {
console.log("Xin chào, tôi là " + this.name);
};
}

const john = new Person("John");
john.greet(); // "Xin chào, tôi là John"

Ở đây, this giống như một giấy khai sinh, xác lập danh tính của đối tượng mới sinh ra.

this trong một hàm mũi tên

Hàm mũi tên là những kẻ nổi loạn trong thế giới JavaScript. Chúng không liên kết this của riêng mình nhưng kế thừa nó từ phạm vi bao quanh.

const obj = {
name: "Alice",
sayHello: () => {
console.log("Xin chào, " + this.name);
}
};

obj.sayHello(); // "Xin chào, undefined"

Trong trường hợp này, this trong hàm mũi tên không tham chiếu đến obj, mà đến phạm vi xung quanh (nhiều khả năng là phạm vi toàn cục).

this trong phương thức của một đối tượng

Khi this được sử dụng trong một phương thức (một hàm là thuộc tính của một đối tượng), nó tham chiếu đến đối tượng mà phương thức được gọi trên.

const car = {
brand: "Toyota",
getBrand: function() {
return this.brand;
}
};

console.log(car.getBrand()); // "Toyota"

Ở đây, this giống như một người hầu trung thành, luôn tham chiếu đến chủ nhân của mình (đối tượng).

this trong một hàm con của phương thức đối tượng

Đây là nơi mọi thứ có thể trở nên phức tạp. Trong một hàm bên trong phương thức, this không còn tham chiếu đến đối tượng nữa.

const restaurant = {
name: "Thực phẩm ngon",
getMenu: function() {
function displayName() {
console.log(this.name);
}
displayName();
}
};

restaurant.getMenu(); // undefined

Trong trường hợp này, this trong displayName() tham chiếu đến đối tượng toàn cục, không phải restaurant.

JavaScript this trong bộ xử lý sự kiện

Trong bộ xử lý sự kiện, this thường tham chiếu đến phần tử nhận sự kiện.

<button id="myButton">Nhấn tôi!</button>

<script>
document.getElementById("myButton").addEventListener("click", function() {
console.log(this); // <button id="myButton">Nhấn tôi!</button>
});
</script>

Ở đây, this giống như một ánh đèn sân khấu, tập trung vào ngôi sao của buổi biểu diễn - phần tử bị nhấp.

Ràng buộc hàm tường minh trong JavaScript

Đôi khi, chúng ta muốn làm chủ và nói cho this biết chính xác nó nên là gì. Chúng ta có thể làm điều này bằng cách sử dụng call(), apply() hoặc bind().

const person1 = { name: "Alice" };
const person2 = { name: "Bob" };

function sayHello() {
console.log("Xin chào, " + this.name);
}

sayHello.call(person1); // "Xin chào, Alice"
sayHello.apply(person2); // "Xin chào, Bob"

const boundHello = sayHello.bind(person1);
boundHello(); // "Xin chào, Alice"

Những phương thức này giống như một đạo diễn, nói this chính xác vai trò nào nó nên đóng.

JavaScript thisprecedence

Bây giờ, hãy tóm tắt precedences của việc liên kết this:

Quy tắc	Độ ưu tiên
Từ khóa new	1 (Cao nhất)
Liên kết tường minh (call, apply, bind)	2
Gọi phương thức	3
Gọi hàm	4 (Thấp nhất)

Nhớ rằng, hàm mũi tên đặc biệt và luôn kế thừa this từ phạm vi bao quanh.

Và đó là tất cả, các bạn! Chúng ta đã cùng nhau hành trình qua thế giới của this, khám phá nhiều khía cạnh và đặc điểm của nó. Nhớ rằng, việc hiểu this giống như học骑自行车 - ban đầu có thể lung lay, nhưng với sự luyện tập, bạn sẽ nhanh chóng chạy nhanh. Tiếp tục lập trình, tiếp tục khám phá, và quan trọng nhất, đừng bao giờ ngừng vui vẻ với JavaScript!

Credits: Image by storyset