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

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.

Hãy để lại link bài viết gốc khi chia sẻ bài viết này, mình sẽ report DMCA với những website lấy nội dung mà không để nguồn hoặc copy bài với số lượng lớn.

Nguồn: freetuts.net

Profile photo of adminTheHalfHeart

TheHalfHeart

Có sở thích viết tuts nên đã từng tham gia viết ở một số diễn đàn, đến năm 2014 mới có điều kiện sáng lập ra freetuts.net. Sinh năm 90 và có 1 vợ 2 con, thích ca hát và lập trình.

ĐĂNG BÌNH LUẬN: Đăng câu hỏi trên Group Facebook để được hỗ trợ nhanh nhất.