Trong bài này chúng ta sẽ tìm hiểu về đối tượng this trong Javascript, qua đó sẽ giúp bạn hiểu rõ this trong js là gì và cách dùng this như thế nào. Show Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức. Khi làm việc với Javascript
Object thì bạn sẽ gặp rất nhiều đoạn code có sử dụng từ khóa Nói thì khó hiểu, vì vậy hãy bắt đầu tìm hiểu thông qua những ví dụ và các trường hợp cụ thể nhé. 1. This trong Javascript là gì?Trong lập trình hướng đối tượng thì Bài viết này được đăng tại [free tuts .net] Nhưng this trong javascript thì khác, bạn có thể đặt Ví dụ: Các bạn hãy mở trình duyệt lên và chạy đoạn code sau: Kết quả trả về chính là đối tượng windows trong Javascript. Nói cách khác, khi bạn sử dụng this ở cấp ngoài cùng của chương trình thì nó chính là đối tượng window, vì vậy bạn có thể sử dụng nó thay thế cho windows object. Ví dụ như hai đoạn code dưới đây là tương đương. https://freetuts.net/editor.html?id=1567 this.location.href; window.location.href Đây chỉ là một trường hợp đơn giản. Bây giờ chúng ta sẽ tìm hiểu một số trường hợp khác nhé. 2. Sử dụng this trong javascript functionTheo 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 xảy ra như sau: Trường hợp 1: Nếu không bật chế độ strict mode thì javascript sẽ hiểu function test(){ console.log(this); } test(); // In ra windows object Chính vì vậy bạn dễ dàng bổ sung các thuộc tính cho đối tượng window: function test(){ this.author = "Cường Freetuts.net"; } test(); console.log(window.author); // Cường Freetuts.net Trường hợp 2: Nếu bật chế độ 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. function test(){ console.log(this); } test(); // undefined Vì vậy nếu bạn bạn cố gắng thêm thuộc tính cho 'use strict'; function test(){ this.author = "Cường Freetuts"; } test(); // Lỗi Lưu ý: Khi bạn sử dụng hàm như một constructor thì đối tượng this chính là các thể hiện (instance) của hàm. Ví dụ function test(){ console.log(this); } let test1 = new test(); // test object let test2 = new test(); // test object Chi tiết thì bạn có thể xem ở bài constructor trong javascript. 3. This trong các sự kiện javascriptKhi gán hành động cho các sự kiện
javascript thì Ví dụ 1: Khi bạn gán một hành động cho sự kiện // Lấy đối tượng var button = document.getElementById('btn'); // Gán sự kiện button.addEventListener("click", function(){ // Lấy thuộc tính type của đối tượng đang xử lý // chính là button có id="btn" alert(this.type); }); Như vậy, trong ví dụ này Ví dụ 2: Truyền đối tượng this khi gọi sự kiện trong thuộc tính của thẻ html <script language="javascript"> function show_type(obj) { alert(obj.type); } </script> <input type="button" onclick="show_type(this)" value="Check" /> Trong ví dụ này chúng ta truyền 4. Từ khóa this trong javascript objectJavascript object là một tính năng rất quan trọng trong lập trình javascript. Nếu bạn đã từng sử dụng qua các thư viện như Angular, ReactJS thì sẽ thấy hầu như khi làm việc với js chúng ta đều phải thông qua các object. Ví dụ dưới đây mình đã tạo một object Persion, hai thuộc tính là name và age, và hai phương thức tên là showInfor và setInfor. var Person = { name : "", age : "", setInfor : function(){ }, showInfor : function(){ } }; Trong các phương thức var Person = { name : "", age : "", setInfor : function(name, age){ this.name = name; this.age = age; }, showInfor : function(){ console.log(this.name); console.log(this.age); } }; 5. Từ khóa this trong class javascriptGiống như object, từ khóa this trong javascript cũng có thể được sử dụng trong các class (ES6). Lúc này thì this chính là instance mà bạn đã tạo ra từ class đó. Ví dụ class Person { constructor(name) { this.name = name; } // Adding a method to the constructor showName() { console.log(this.name); } } let person1 = new Person("Kinh"); person1.showName(); // Kinh 6. Từ khóa this trong arrow functionKhông giống như function bình thường. Arrow function không tồn tại đối tượng this, bởi vậy khi bạn sử dụng thì nó sẽ lấy đối tượng global window. var showUser = () => { console.log(this); }; showUser(); Kết quả: Lời kết: Như vậy là mình đã giới thiệu xong một số cách sử dụng từ khóa this trong Javsscript. Qua bài này hy vọng bạn hiểu rõ từ khóa this trong javascript là gì, cũng như cách sử dụng this trong từng trường hợp cụ thể như trên. |