, October 26, 2021

0 kết quả được tìm thấy

Tìm hiểu về "this" trong JavaScript.


  •   7 min reads
Tìm hiểu về "this" trong JavaScript.

Chắc hẵn bạn đã từng nhìn thấy từ this trong một ngôn ngữ lập trình nào trước đó hoặc là trong một vài đoạn code nào đó của JavaScript. Bạn thắc mắc nó có tác dụng gì hoặc là bạn đang mơ hồ về this trong JavaScript. Yên tâm, trong bài này chúng ta sẽ cùng nhau tìm hiểu this có ý nghĩa gì một cách đơn giản nhất nhé 😉.

I. Khái niệm về "this".

Đối với ngôn ngữ JavaScript, từ khóa this được dùng để đại diện cho một object. Object ở đây là đại diện cho chủ thể của ngữ cảnh và nó phụ thuộc vào lúc run-time chứ không phải lúc khởi tạo.

Nghe có vẻ trừu tượng quá phải không 😅, hiểu đơn giản hơn thì this ở đây đóng vai trò là một con trỏ, trỏ đến chính object gọi hàm đó. Cùng xem ví dụ dưới đây để dễ hình dung hơn nè 😄.

const person = {
    id: 1,
	firstName: "Alice",
    lastName: "Zuberg",
    getFullName: function() {
    	console.log(this.firstName + " " + this.lastName);
    }
};

person.getFullName();
//-->Output: Alice Zuberg

this ở đây trỏ đến object person, bạn đã thấy dễ hiểu hơn chưa 😁.

Ta cùng xem tiếp một ví dụ khác nhé 😉. Trường hợp tiếp theo ta khai báo biến global function global. Vì thế toàn bộ các biến và các function đều được nằm trong một object lớn có tên là window.

let firstName = "Alice", lastName = "Zuberg";
// biến firstName và lastName lúc này thuộc object window nhé
function getFullName() {
	console.log(this.firstName + " " + this.lastName);
}

window.getFullName();
//-->Output: Alice Zuberg
getFullName();
//-->Output: Alice Zuberg
  • window.getFullName() - this ở đây trỏ đến object gọi function getFullName đó là object window
  • getFullName() - Việc gọi function như vầy thì cũng do object window gọi đến function getFullName() mà thôi.

Dễ hiểu hơn chưa nè, bám sát lý thuyết lắm rồi đấy nhé 🤣.

II. Cách sử dụng "this" trong JavaScript.

Vậy sử dụng this sao cho đúng?

Nếu các bạn có theo dõi series JavaScript của mình thì các bạn sẽ biết function cũng là một dạng object, nếu các bạn không biết thì cũng không sao 😁, mình sẵn sàng giải thích luôn.

Về bản chất thì một function bất kỳ đều có property, giống như object vậy. Khi mà thực thi function, sẽ có property this chứa item của object đang gọi đến function đó.

"use strict"

const person = {
	id: 1,
    name: "Yuuki Asuna",
    gender: "female",
    age: 18
};

function actionObj(){
	console.log(this.person);
};

actionObj();

Lưu ý: Khi bạn dùng strict mode, this sẽ cho kết quả là undefined với tất cả các function global.

Cùng giải thích ví dụ trên cho dễ hiểu nè! Ở đây this trong một function (cụ thể là actionObj()) nó sẽ chứa các item của object mà gọi function actionObj(). Và ta cũng cần this để có thể truy cập ngược lại vào các property method của object mà gọi fuction actionObj() trên.

Lưu ý về this mà bạn cần nhớ:

  • Từ khóa this đại diện cho ngữ cảnh hay context của nơi mà function dùng nó để gọi.
  • Từ khóa this có hai loại context như sau: Object chứa các phương thức được gọi hoặc là Global, không còn gì nữa cả.
Tóm lại là khi gặp this bạn đừng quá để ý nó là cái gì? Mà hãy quan tâm đến cái thứ mà gọi function có sử dụng this ấy.

III. Các trường hợp dễ nhầm lẫn với "this".

Mình quên nói với các bạn là this là một khái niệm khá là khó nhằn và dễ nhầm lẫn nhất trong JavaScript 🤣. Chào mừng các bạn đến với sự đáng sợ của this 🤣.

1. Function truyền vào như một callback function.

Trong phần này, chúng ta sẽ sử dụng Jquery để làm ví dụ cho đơn giản hơn nhé 😉. Nếu chưa rõ Jquery thì cứ làm theo mình.

Ví dụ người dùng muốn click vào một button và sẽ lấy được full name của user. Việc này khá đơn giản, chỉ việc truyền function getFullName() vào như một callback cho function onClick() là xong rồi nè, như code bên dưới.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>"this" in JavaScript</title>
</head>

<body>
    <button>show full name</button>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript">
        var person = {
            id: 1,
            firstName: 'Yuuki',
            lastName: 'Asuna',
            getFullName: function () {
                console.log(this.firstName + ' ' + this.lastName);
            }
        };
        person.getFullName();

        $('button').click(person.getFullName);
    </script>
</body>

</html>

Tuy nhiên chỉ có gọi function person.getFullName() là chạy đúng còn khi ta click button show full name thì cho kết quả lại là undefined undefined, như hình.

Lý do mà ta không thể truy cập đến object person được, vì this ở đây chính là của button ta click vào do đó this không có trường firstNamelastName. Để fix lỗi trên ta chuyển thành dạng anonymus function hoặc dùng function bind để xác định tham số this cho function truyền vào là được.

Ta fix đoạn script trên lại như sau:

var person = {
	id: 1,
	firstName: 'Yuuki',
	lastName: 'Asuna',
	getFullName: function () {
		console.log(this.firstName + ' ' + this.lastName);
	}
};
person.getFullName();

// Dùng anonymous function
$('button').click(function(){ person.getFullName()});

hoặc

var person = {
	id: 1,
	firstName: 'Yuuki',
	lastName: 'Asuna',
	getFullName: function () {
		console.log(this.firstName + ' ' + this.lastName);
	}
};
person.getFullName();

// Dùng bind
$('button').click(person.getFullName.bind(person));

Kết quả:

2. Sử dụng "this" trong anonymous function.

Ví dụ ta có một object person có chứa danh sách các girl friend của anh chàng nào đó, bạn muốn viết một function để show cho ra cho mọi người thấy anh chàng đó "tra nam" như thế nào 🤣, bạn sẽ viết như sau:

const person = {
	name: "Kirigaya Kazuto",
    girlFriends: ["Kirigaya Suguha", "Yuuki Asuna", "Asada Shino", "Alice Zuberg"],
    showGirlFriend: function() {
    	for(let i = 0; i < this.girlFriends.length; i++) {
        	console.log(this.name + " love girls named: " + this.girlFriends[i]);
        }
    },
    showGirlFriendThis: function() {
    	this.girlFriends.forEach(function(fr) {
        	console.log(this.name + " love girls named: " + fr);
        });
    }
};

person.showGirlFriend();
//-->Output: Kirigaya Kazuto love girls named: Kirigaya Suguha
//           Kirigaya Kazuto love girls named: Yuuki Asuna
//           Kirigaya Kazuto love girls named: Asada Shino
//           Kirigaya Kazuto love girls named: Alice Zuberg

person.showGirlFriendThis();
//-->Output: love girls named: Kirigaya Suguha
//           love girls named: Yuuki Asuna
//           love girls named: Asada Shino
//           love girls named: Alice Zuberg

Ta thấy function showGirlFriend() dùng for thường thì chạy đúng như mong muốn, nhưng function showGirlFriendThis() dùng forEach và truyền vào một anonymous function, tuy nhiên nó cho ra kết quả không như mong muốn.

Bởi vì this lúc này là this của object window, do đó mà trường name bị undefined. Để fix trường hợp này ta tạo một biến để gán giá trị this vào và truy xuất đến giá trị đó trong anonymous function là được.

const person = {
	name: "Kirigaya Kazuto",
    girlFriends: ["Kirigaya Suguha", "Yuuki Asuna", "Asada Shino", "Alice Zuberg"],
    showGirlFriendThis: function() {
        let objPersion = this; //Fix như vầy
    	this.girlFriends.forEach(function(fr) {
        	console.log(objPersion.name + " love girls named: " + fr);
        });
    }
};

person.showGirlFriendThis();
//-->Output: Kirigaya Kazuto love girls named: Kirigaya Suguha
//           Kirigaya Kazuto love girls named: Yuuki Asuna
//           Kirigaya Kazuto love girls named: Asada Shino
//           Kirigaya Kazuto love girls named: Alice Zuberg

Đơn giản phải không 😁.

3. Function được gán vào một biến.

Trường hợp khi ta gán một function vào một biến và bạn nghĩ nó sẽ chạy bình thường, bạn gọi nó ra sử dụng. Nhưng đời không như mơ, nó lại chạy nhưng lại không đúng với kết quả nhưng mong đợi 🤣.

const person = {
    id: 1,
	firstName: "Alice",
    lastName: "Zuberg",
    getFullName: function() {
    	console.log(this.firstName + " " + this.lastName);
    }
};

person.getFullName();
//-->Output: Alice Zuberg

const showFullName = person.getFullName; //Gán function vào biến showFullName
showFullName();
//-->Output: undefined undefined

Cách fix cũng dễ thôi, ta dùng bind() như trường hợp ở trên là được 😁.

const person = {
    id: 1,
	firstName: "Alice",
    lastName: "Zuberg",
    getFullName: function() {
    	console.log(this.firstName + " " + this.lastName);
    }
};

const showFullName = person.getFullName.bind(person);
showFullName();
//-->Output: Alice Zuberg

IV. Tổng kết.

Như vậy, qua bài này, chúng ta đã tìm hiểu được cái this trong JavaScript là cái gì, cách sử dụng nó ra làm sao cũng nhưng các trường hợp đặc biệt, dễ nhầm lẫn với this để các bạn có thể nắm được và tránh gặp các bug như vậy. Ngoài this ra thì các bạn cũng thấy mình có sử dụng function bind() vậy nó là cái gì thì mời các bạn đến với bài viết tiếp theo của mình nhé! Cảm ơn các bạn đã đọc 🤗.

Bài viết cùng seri

Bài viết liên quan

Hướng dẫn clone instagram với React JS và Firebase phần 2.

Trong phần 1 của series này, chúng ta tiến hành setup một project ReactJS bằng câu lệnh create-react-app,đăng ký và tạo app trên firebase để có thể sử dụng và lưu trữ data. Trong phần 2 này, chúng ta sẽ tạo header cho nó và tạo component post để hiển thị bài đăng nhé 😉. Nào bắt đầu thôi 😁!...

Hướng dẫn clone instagram với React JS và Firebase phần 2.
Hướng dẫn clone instagram với React JS và Firebase phần 1.

Trong bài viết này, chúng ta sẽ cùng nhau clone một trang mạng xã hội nỗi tiếng, là nơi chia sẽ hình ảnh và video của hàng trăm triệu người trên toàn thế giới, đó chính là Instagram. Chúng ta bắt đầu thôi 😁!...

Hướng dẫn clone instagram với React JS và Firebase phần 1.
Number, string, array và object trong JavaScript

Chúng ta đã cùng nhau tìm hiểu các kiểu dữ liệu có trong JavaScript ở bài trước, tuy nhiên chúng ta vẫn chưa biết cách thao tác với chúng như thế nào trong JavaScript, nó có hổ trợ các phương thức nào hay không? Vấn đề đó, chúng ta sẽ cùng nhau tìm hiểu trong bài này nhé 😉....

Number, string, array và object trong JavaScript
Tìm hiểu thêm về Window Object trong Javascript

Nếu các bạn đã xem các bài trước thuộc series JavasScript cơ bản của mình hoặc đã xem các tài liệu khác thì chắc hẵn đã từng thấy trong bài viết có đề cập đến ông thần window object rồi nhỉ 😉. Vậy trong bài này, chúng ta sẽ cùng nhau tìm hiểu về nó để xem window object là loại object như thế nào nhé...

Tìm hiểu thêm về Window Object trong Javascript
Có gì mới ở ES2022?

ES2021/ES12 mới vừa ra mắt hồi giữa năm còn nóng hổi thì giờ đây ES2022/ES13 đã được ra mắt, thật quá nhanh quá nguy hiểm đi mà 😆. Công nghệ cập nhật và thay đổi không ngừng với tốc độ thật đáng kinh ngạc. Không chần chừ thêm nữa ta cùng nhau tìm hiểu xem ở ES2022 có gì đặc sắc nào 😋...

Có gì mới ở ES2022?
You've successfully subscribed to 200Lab Blog
Great! Next, complete checkout for full access to 200Lab Blog
Xin chào mừng bạn đã quay trở lại
OK! Tài khoản của bạn đã kích hoạt thành công.
Success! Your billing info is updated.
Billing info update failed.
Your link has expired.