1. This trong JavaScript là gì?
Chắc hẳn nếu đã làm quen với những ngôn ngữ lập trình khác như PHP, C++,… thì ta không còn xa lạ với this nữa. Với Js thì this là từ khóa dễ nắm bắt nhưng lại dễ gây nhầm lẫn với những người mới làm quen đến nó.
Trong lập trình hướng đối tượng thì this là một từ khóa để trỏ đến đối tượng hiện tại. Qua đó ta truy cập đến những phương thức và thuộc tính của đối tượng đó. Với các ngôn ngữ khác thì this phải đặt trong phạm vi chương trình của đối tượng. Còn trong Js thì this chỉ phụ thuộc vào lúc run-time (chạy chương trình) chứ không phải lúc khởi tạo. Bạn có thể đặt this ngay cấp ngoài cùng của chương trình.
Ví dụ: một ví dụ đơn giản về this trước nhé
<script> // Tạo một đối tượng: const person = { firstName: "Lâp Trình", lastName: "Từ Đầu", id: 5566, fullName : function() { return this.firstName + " " + this.lastName; } }; // Hiển thị dữ liệu từ đối tượng: document.write(person.fullName()); </script>
2. Sử dụng this trong JavaScript
Trước hết, các bạn cần hiểu rằng tất các các Function đều có Property, giống như mọi Object khác. Khi thực thi Function đó, nó sẽ có Property this chứa item của 1 Object đang gọi tới function này.
Hiểu đơn giản, mình có 1 function tạm gọi là functionA , thì con trỏ this chứa item của Object gọi tới functionA, và ta cũng có thể thông qua this này để lấy các item khác nằm trong Object gọi tới functionA.
Lưu ý
Nếu chúng ta sử dụng strict mode, this sẽ là undefined trong các function Global.
Ví dụ:
"use strict" const person = { id: 1, name: "Thành Nguyễn", gender: "Nam", age: 19 }; function actionObj(){ console.log(this.person); }; actionObj();
Một vài lưu ý khác:
- this chính là context ( ngữ cảnh ) của nơi mà function có chứa từ khóa this gọi.
- Có 2 loại context đối với từ khóa this : Object chứa method được gọi hoặc Global, không còn gì nữa cả.
- Vậy nên khi gặp this bạn đừng quan tâm đến nó là cái gì ? mà chỉ quan tâm đến cái nơi gọi function chứa nó.
This sẽ có những giá trị khác nhau tùy vào nơi mà nó được sử dụng:
- Trong một phương thức, this tham chiếu đến đối tượng chủ sở hữu .
- Một mình, this đề cập đến đối tượng toàn cục .
- Trong một hàm, this tham chiếu đến đối tượng toàn cục .
- Các phương thức như call() , và apply() có thể tham chiếu this đến bất kỳ đối tượng nào .
2. Từ khóa this trong JavaScript function
Theo quy tắc thì từ khóa this khi đặt trong một function thì nó phải trỏ đến function đó. Tuy nhiên, thực tế thì lại có hai trường hợp khác nhau xảy ra.
Nếu như không bật chế độ strict mode thì this là một biến toàn cục, và cấp cao nhất chính là đối tượng window. Chính vì vậy bạn dễ dàng bổ sung các thuộc tính cho đối tượng window.
<script> document.write(myFunction()); function myFunction() { return this; } </script>
Nhưng nếu đã bật strict mode thì từ khóa this trong hàm là một biến chưa được định nghĩa, nên giá trị của nó là undefined.
<script> "use strict"; document.write(myFunction()); function myFunction() { return this; } </script>
3. Từ khóa this với event trong JavaScript
Khi gán hành động cho các sự kiện Js thì this chính là đối tượng html đang được gán sự kiện đó.
<h2>JavaScript với từ khóa <i>this</i></h2> <button onclick="this.style.display='none'">Nhấp để Xóa!</button>
4. Từ khóa this với JavaScript đối tượng
Từ khóa this sẽ đại diện cho một đối tượng (Object). Đối tượng đó là chủ thế của ngữ cảnh, hoặc là chủ thế của code đang được chạy.
Ví dụ:
Sủ dụng this
<script> // Tạo đối tượng const person = { firstName: "Lập trình", lastName: "Từ đầu", id: 5566, fullName : function() { return this.firstName + " " + this.lastName; } }; // Hiển thị dữ liệu từ đối tượng: document.write(person.fullName()); </script>
Không sử dụng this
<script> // tạo đối tượng: const person = { firstName : "John", lastName : "Doe", id : 5566, myFunction : function() { return this; } }; // Hiển thị dữ liệu từ đối tượng: document.write(person.myFunction()); </script>
Nói cách khác: this.firstName có nghĩa là thuộc tính firstName của đối tượng này (person).