Chủ đề nổi bật
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
Mới nhất

Image Map trong JavaScript

Bạn có thể sử dụng JavaScript để tạo Image map ở Client-Side. Các Image map được kích hoạt bởi thuộc tính usemap cho thẻ <img /> và được định nghĩa bởi các thẻ mở rộng đặc biệt <map> và <area>. Hình ảnh mà tạo bản đồ đó được chèn vào trong trang bởi sử dụng phần tử ...

Tài liệu tham khảo & Framework cho Javascript

Dưới đây chúng tôi liệt kê tất cả các nguồn tài liệu hữu ích và Framework cho JavaScript. Bạn nên sử dụng chúng để thực hành cũng như hiểu sâu hơn những chủ đề đã được đề cập trong loạt bài này. Các JavaScript Framework hàng đầu: Follow fanpage của ...

Xử lý lỗi trong JavaScript

Có 3 kiểu lỗi trong chương trình: (a) lỗi cú pháp (Syntax Error), (b) lỗi trong khi chạy chương trình (Runtime Error), và (c) lỗi về tính logic của cấu trúc chương trình (Logical Error). Syntax Error Lỗi cú pháp (Syntax Error), cũng được gọi là parsing error, xảy ra tại thời gian biên dịch ...

Đa phương tiện (Multimedia) trong JavaScript

Đối tượng navigator trong JavaScript bao gồm một đối tượng con gọi là plugins . Đối tượng này là một mảng, với một cổng vào (entry) cho mỗi plug-in được cài đặt trên trình duyệt. Đối tượng navigator.plugins chỉ được hỗ trợ bởi Netscape, Firefox và Mozilla. Ví dụ Dưới đây là ví dụ minh ...

Các hàm có sẵn trong JavaScript

Đối tượng Number chỉ chứa các phương thức mặc định mà là một phần của sự định nghĩa của mỗi đối tượng. Phương thức Miêu tả constructor() Trả về hàm mà tạo sự instance của đối tượng này. Theo mặc định, nó là đối tượng Number. toExponential() Làm một số hiển thị ở dạng số mũ, ...

Debug trong JavaScript

Trong khi mã hóa chương trình, các nhà lập trình có thể tạo ra các lỗi. Một lỗi trong một chương trình hoặc một script được xem như là một bug . Tiến trình tìm kiếm và sửa các bug được gọi là dubugging và là một phần bình thường của tiến trình lập trình. Chương này giới thiệu một số công ...

Document Object Model (DOM) trong JavaScript

Mỗi trang web cư ngụ bên trong một cửa sổ trình duyệt mà có thể xem như là một đối tượng. Một đối tượng Document biểu diễn tài liệu HTML được hiển thị trong cửa sổ đó. Đối tượng Document có nhiều thuộc tính đa dạng như các đối tượng khác mà cho phép truy cập và chỉnh sửa nội dung tài liệu. ...

Đối tượng Boolean trong JavaScript

Miêu tả Đối tượng Boolean biểu diễn hai giá trị, hoặc "true" hoặc "false". Nếu tham số value bị bỏ qua hoặc là 0, -0, null, false, NaN , undefined, hoặc một chuỗi trống (""), đối tượng có một giá trị khởi tạo là false. Cú pháp Sử dụng cú pháp sau để tạo một đối tượng Boolean . ...

Đối tượng String trong JavaScript

Đối tượng String giúp bạn làm việc với một dãy các ký tự; nó giúp xử lý các kiểu dữ liệu chuỗi gốc trong JavaScript với một số phương thức giúp đỡ. Khi JavaScript tự động biến đổi giữa chuỗi gốc và các đối tượng String, bạn có thể gọi bất kỳ phương thức giúp đỡ nào của đối tượng String ...

Điều hướng trang (Redirect) trong JavaScript

Điều hướng lại trang là gì? Bạn có thể gặp tình huống khi bạn click vào một URL để tới trang X nhưng bạn được điều hướng tới trang Y. Nó xảy ra là do Page Redirection – Điều hướng lại trang . Khái niệm này khác với: JavaScript – Refresh trang. Có nhiều lý do khác nhau để tại sao bạn muốn ...