this trong javascript

Chào các bạn

Trong bài viết này mình sẽ nói về this.

Vậy this ở đây là gì? this trong tiếng anh chính là cái này hoặc đây này hoặc ...

Vậy trong javascript thì sao?. Trong javascript this luôn luôn đại diện cho một đối tượng trước dấu chấm .

Ví dụ:

1let user = {
2    name: "Hồ Quang Trí",
3    showName() {
4        console.log(this.name); // this 
5    },
6};

Khi chúng ta gọi user.showName() thì lúc này chức năng showName sẽ chạy và gán this bằng user

1let user = {
2    name: "Hồ Quang Trí",
3    showName() {
4        console.log(this.name);     // Hồ Quang Trí
5        
6        console.log(this === user); // true
7    },
8};
9
10user.showName(); // Gọi phương pháp

Nhưng cũng có nhiều trường hợp this bị thay đổi. Giả sử chúng ta tạo mới thêm một người dùng khác.

1let user = {
2    name: "Hồ Quang Trí",
3    showName() {
4        console.log(this.name);     // User 2
5        
6        console.log(this === user); // false
7    },
8};
9
10let user2 = {
11    name: "User 2"
12}
13
14user.showName.call(user2);

Như các bạn có thể thấy ví dụ ở trên bây giờ this đã thay đổi và đầu ra bây giờ đã khác ví dụ trước.

Lưu ý: trong ví dụ trên mình dùng phương pháp call để thay đổi this. Nếu các bạn chưa hiểu về call như thế nào các bạn có thể xem thêm về nó tại đây call

Tiếp theo mình sẽ thêm một ví dụ dễ hơn, tường minh hơn.

1let user1 = {
2    name: "User 1"
3};
4
5let user2 = {
6    name: "User 2"
7}
8
9function showName () {
10    console.log(this.name);
11}
12
13user1.showName = showName; // Thêm phương pháp showName vào user1
14user2.showName = showName; // Thêm phương pháp showName vào user2
15
16user1.showName(); // this === user1
17user2.showName(); // this === user2

Trong ví dụ trên mình tạo 2 biến user1 và user2 lưu trữ 2 object khác nhau. Sau đó mình tạo một chức năng showName. Tiếp theo mình thêm showName vào 2 đối tượng có tên biến là user1 và user2. Ngay bây giờ user1 và user2 đều chứa showName. Tiếp theo thì mình chỉ việc gọi user1.showName() user2.showName() thì kết quả các bạn đã thấy như ví dụ trên.

Nhược điểm bây giờ là cả 2 đều chứa showName cùng thực hiện tác vụ. Trong các bài viết về sau mình sẽ nói rõ thêm về vay mượn phương pháp như call bind apply

Nếu chúng ta bây giờ gọi chức năng mà không có object nào thì this sẽ là undefined

Dùng use strict chế độ nghiêm ngặt. Nếu bạn chư biết về use strict thì có thể xem nó tại đây use strict

1"use strict" // Dùng chế độ nghiêm ngặt
2function showThis () {
3    console.log(this); // undefined
4}
5
6showThis();

Nếu chúng ta không dùng use strict thì this bây giờ sẽ là window

1function showThis () {
2    console.log(this); // window
3}
4
5showThis();

Lưu Ý: cũng tùy vào môi trường chạy mà this sẽ khác nhau.

Trong ví dụ trên là mình dùng môi trường trình duyệt chứ không phải môi trường bên máy chủ.

this là một cái gì đó rất cao siêu

Nếu các bạn dùng this mà không hiểu về this thì sẽ gây ra những hậu quả khó lường. Vì this rất là tùy biến. Mình qua làm reactjs nên cũng ít động đến this này lắm.

Tổng kết

Trong bài viết này mình đã nói về this. Tuy không hoàn hảo nhưng đủ giúp cho các bạn hiểu rõ thêm tí về this. Các bạn có thể xem thêm về nó tại đây this