Bài 20: Đố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 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. 

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.

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.