03/08/2018, 10:02

Đối tượng this trong Javascript

Có nhiều bạn gửi email hỏi mình rằng đối tượng this trong javascript có ý nghĩa như thế nào mà ở một số đoạn code trên mạng có sử dụng. Thì thực ...

Có nhiều bạn gửi email hỏi mình rằng đối tượng this trong javascript có ý nghĩa như thế nào mà ở một số đoạn code trên mạng có sử dụng. Thì thực ra bản chất nó giống như cái tên của nó là ám chỉ đối tượng hiện tại (this). Vấn đề này rất giống như trong lập trình hướng đối tượng khi muốn truy xuất đến các phương thức hay thuộc tính thì phải sử dụng $this->name.

Ok để dễ hiểu hơn thì chúng ta sẽ tìm hiểu một số ví dụ về đối tượng this.

1. This trong Javascript là gì?

Đối tượng this chính là đối tượng hiện tại đang được sử dụng hoặc đang truy cập tới. Ví dụ khi bạn viết một hành động cho sự kiện click thì nếu trong hành động đó có sử dụng this lúc này this chính là thẻ HTML mà ta click. 

Ví dụ: Đối tượng this trong event

XEM DEMO

// 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 this chính là thẻ HTML mà chúng ta đang xử lý và đó chính là thẻ HTML có id="btn", vì vậy bạn có thể sử dụng DOM để lấy các giá trị thuộc tính hoặc gán thêm sự kiện khác vẫn được.

Ví dụ: Truyền đối tượng this trong HTML

XEM DEMO

<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 this ở dạng một tham số nên ở hàm xử lý show_type() tuy ta đặt tên tham số là obj nhưng bản chất nó chính là đối tượng this.

Tóm lại: qua hai ví dụ này bạn có thể ví các thẻ HTML như là một đối tượng nên nó sẽ có các thuộc tính và các phương thức (event), lúc này this chính là đối tượng HTML đó nên ta có thể  sử dụng nó để gọi đến các thuộc tính và phương thức.

2. Lời kết

Vẫn còn một số ví dụ liên quan đến this nữa nhưng nó liên quan tới Javascript nâng cao nên mình sẽ không trình bày trong bài này mà ở các bài nâng cao mình sẽ có sử dụng và giải thích qua. Cái quan trọng chính là hiểu được this là gì và cách sử dụng nó khi kêt hợp với DOM HTML.

Bài này cũng tương đối ngắn vì nội dung cũng không có gì để trình bày, cái quan trọng nhất là bạn cần nắm được then chốt của vấn đề đó là cách sử dụng đối tượng this để sau này gặp bài tập hoặc ví dụ thì bạn sẽ dễ dàng hiểu bài hơn.

BÀI KẾ SAU
BÀI KẾ TIẾP

Nguồn: code24h.com

Bài liên quan

Tìm hiểu đối tượng this trong Javascript

Cách thêm sự kiện (Event) bằng Javascript Tìm hiểu hàm addEventListener() trong Javascript Bài tập – xây dựng menu dropdown trong Javascript Tìm hiểu hàm removeEventListener() trong Javascript Đối tượng this trong Javascript cũng chính như cái tên của nó chính là đối tượng hiện tại ...

Vũ Văn Thanh viết 16:56 ngày 04/09/2018

Đối tượng History trong JavaScript

Đối tượng window trong JavaScript Đối tượng history trong Javascript đại diện cho một loạt các URL được truy cập bởi người sử dụng. Bằng cách sử dụng đối tượng này, bạn có thể tải lại trang trước, trang sau hoặc bất kỳ trang cụ thể nào. Đối tượng history là thuộc tính của đối ...

Hoàng Hải Đăng viết 19:12 ngày 11/08/2018

Đối tượng Math trong JavaScript

Đối tượng Date trong JavaScript Đối tượng Math trong JavaScript cung cấp một số hằng số và phương thức để thực hiện phép toán. Không giống như đối tượng Date, nó không có các constructor. Math.sqrt(n) Phương thức Math.sqrt(n) trong JavaScript trả về căn bậc hai của ...

Trịnh Tiến Mạnh viết 19:12 ngày 11/08/2018

Đối tượng Screen trong JavaScript

Đối tượng Navigator trong JavaScript Đối tượng screen trong JavaScript chứa thông tin của màn hình trình duyệt . Nó có thể được sử dụng để hiển thị chiều rộng màn hình, chiều cao, colorDepth, pixelDepth, v.v. Đối tượng screen là thuộc tính của đối tượng window, vì vậy nó có ...

Trịnh Tiến Mạnh viết 19:01 ngày 11/08/2018

Đối tượng Document trong JavaScript

Cookie trong JavaScript Đối tượng document trong JavaScript đại diện cho toàn bộ tài liệu HTML . Khi tài liệu html được tải trong trình duyệt, nó sẽ trở thành một đối tượng document. Nó là phần tử gốc đại diện cho tài liệu html. Nó có các thuộc tính và phương thức. Nhờ sự giúp ...

Hoàng Hải Đăng viết 18:59 ngày 11/08/2018
0