Sự khác nhau giữa “this” và “$(this)”

Trong bài học số 2 trong khóa học jQuery căn bản trên CiOne. Các bạn đã được giới thiệu về this và $(this). Vậy chính xác thì sự khác nhau giữa chúng là gì? Chúng ta sẽ cùng nhau tìm hiểu, phân tích và làm rõ về chúng.

this là gì?

this là một từ khóa trong một số các ngôn ngữ lập trình hướng dối tượng (OOP). Nó khá rắc rối nếu giải thích cặn kẽ về this trong khóa học jQuery cơ bản. Tuy nhiên, trong nội dụng bài học này, các bạn có thể hiểu this là một biến trỏ đến bản thân của một đối tượng.

Ví dụ, khi các bạn click vào một button và nó sẽ gọi hàm xử lý sự kiện, thì lúc này this chính là biến trỏ đến button đó. Như vậy là ta có thể thao tác đến button thông qua biến this.

Vậy thì thực chất this chứa những giá trị nào trong nó, khi ta click lên một button? Nào, chúng ta hãy dùng debugger và dùng Google Chrome Dev Tool để xem các giá trị của biến này trong ngữ cảnh click lên một button nhé.

Các bạn có thể xem demo tại đây:
JS Bin on jsbin.com

Hình bên dưới là các thuộc tính của biến this

Đoạn code nhìn rất khác so với code ban đầu trên jsbin.com nhưng các bạn đừng lo lắng, đó là vì jsbin.com đã “xào nấu” cho tương thích với hệ thống của nó.

Chúng ta chỉ quan tâm đến hành vi của đoạn code này trong màn hình Chrome Dev Tool

Như các bạn có thể thấy, biến this là một DOM Element (Để ngắn gọn, chúng ta gọi là element). Vì nó là một element nên ta có thể thao tác nó như thêm, xóa, thay nội dung… giống như bất kỳ DOM Element khác.
Tóm lại, bạn đã biết được this trong bài học số 2 là như thế nào. Giờ chúng ta sẽ xem $(this) là thế nào?

$(this) là gì?

Bạn có thể gọi nó là “jQuery this” như cách mà CiOne gọi nó để phân biệt đối tượng this ở trên. $(this) hay cách gọi “jQuery this” chính là một bản “WRAPPER” của this. Vậy thì wrapper ở đây nghĩa là thế nào?

Ví dụ: Hẳn các bạn đều đã xem bộ phim Iron Man!?. Tony Stark là một người không có mấy sức mạnh, nhưng khi khoác lên bộ giáp thì trở thành siêu nhân (Đầu đội giáp, chân đạp vớ/tất). Hmm, có liên quan à?!.

Hãy tưởng tưởng, Tony Stark là this, còn bộ giáp là jQuery. Như vậy khi trang bị jQuery cho this thì ta có siêu nhân $(this).
Quay lại thực tại, hãy dùng Chrome Dev Tool để xem $(this) có gì khác:

Như vậy các bạn thấy là $(this) sẽ trả về một mảng, mảng này có 1 phần tử là button. Tới đây, nó cũng sẽ khó hình dung lợi hại của $(this). Vậy hãy viết thêm mã để thấy rõ sức mạnh của $(this).
Hãy xem đoạn mã sau:
JS Bin on jsbin.com
Và xem kết quả
Hmmm, toàn true và false. Tóm lại thế nghĩa là sao???

Các bạn hãy để ý kết quả của chúng ta có 2 cột. Một cột toàn là true và một cột toàn là false.

Hãy xem lại đoạn mã của chúng ta, cột đầu tiên là so sánh các hàm của _this còn cột thứ 2 là của $(this). Như vậy bạn có thể thấy là _this không có các hàm như find(), next(), prev(),… cho nên khi tôi “hỏi” là: “ê _this, cậu không có các hàm này đúng không? thì đồng thanh trả lời là đúng rồi”. Còn khi tôi “hỏi”: “ê $(this), cậu không có những hàm này à? thì chúng đồng thanh trả lời là sai (false)”.

Kết luận

Hy vọng qua những ví dụ sinh động này các bạn có thể hiểu rõ hơn về sự khác nhau giữa this và $(this).

Tham khảo

1. Chrome Dev Tool
2. OOP (wikipedia.org)