Series JavaScript sida – Luận bàn về cái đít (this) trong javascript

Trước đây, mình đã đề cập tới một khái niệm khá khó nhằn trong javascriptcallback. Ở bài viết này, mình sẽ giải thích về cái đít, nhầm, cái this – một từ khóa dễ làm đau đầu các lập trình viên js. Ảnh trong bài viết chỉ có tính chất minh họa, các bạn chăm chú đọc bài chứ đừng ngắm mông với đít nhé ;).

2w54jeu

Từ khi đít (this) nhỏ còn hiền lành vô hại

Khi mới học, ta thấy this cũng khá đơn giản và vô hại. Nếu bạn từng học Java hoặc C#, hẳn bạn cũng nhớ từ khóa this dùng để trỏ tới chính object gọi hàm đó. Trong javascript, từ khóa this cũng đóng vai trò tương tự. Ở dòng code dưới, ta sẽ thấy this trở tới object person, in ra đúng những điều ta muốn.

Một trường hợp khác, khi ta khai báo biến global và hàm global, toàn bộ các biến và hàm đó sẽ nằm trong một object có tên là window. Lúc này, khi ta gọi hàm showName, chính object window là object gọi hàm đó, this trỏ tới chính object window.

Tới khi đít lớn và gây bao rắc rối

Nếu chỉ sử dụng theo 2 cách nêu trên, this khá dễ hiểu vào không gây ra mấy khó khăn khi sử dụng. Song, sự đáng sợ và khó chịu của this sẽ dần lộ ra qua các ví dụ dưới đây. Các bạn vui lòng tiếp tục chăm chú đọc bài chứ đừng ngắm mông với đít nhé ;).

girls in yoga pants 15_thumb

Rắc rối 1 – Hàm được truyền vào như một callback

Giả sử, ta muốn khi người dùng click vào một button, ta sẽ gọi hàm showName của user. Vô cùng đơn giản, ta chỉ cần truyền hàm showName vào như một callback cho hàm click là xong.

Tuy nhiên, hàm lại không chạy như ta mong muốn. Mở developer tools lên thì thấy object this không có trường firstNamelastName. Kiểm tra kĩ chút nữa thì ta thấy this ở đây là chính button ta đã click vào, chứ không còn là object person như ví dụ trên nữa.

Trong trường hợp này, ta có thể sửa lỗi bằng cách sử dụng anonymous function, hoặc dùng hàm bind để xác định tham số this cho hàm truyền vào là được.

Rắc rối 2 – Sử dụng this trong anonymous function

Giả sử, object person có một danh sách bạn bè, bạn muốn viết một function show toàn bộ bạn bè của person đó. Theo lý thuyết, ta sẽ viết như sau:

Với hàm showFriend, khi ta dùng hàm for thường, hàm chạy đúng như mong muốn. Tuy nhiên, trong trường hợp dưới, khi ta dùng hàm forEach (xem lại ở đây), truyền vào một anonymous function, this ở đây lại thành object window, do đó trường firstName bị underfined.

Trong trường hợp này, cách giải quyết ta thường dùng là tạo một biến để gán giá trị this vào, và truy xuất tới giá trị đó trong anonymous function.

Rắc rối 3 – Khi hàm được gán vào một biến

Trường hợp này ít xảy ra, nhưng mình cũng liệt kệ cho đủ bộ. Đó là trường hợp khi ta gán một hàm vào một biến, sau đó gọi hàm đó. Hàm sẽ không chạy như ta mong muốn, vì object gọi hàm lúc này chính là object window.

Để giải quyết, ta cũng sử dụng hàm bind như trường hợp trên cùng, quá đơn giản phải không nào?

Trong bài viết, mình đã sử dụng hàm bind để giải quyết một số vấn đề với từ khóa this. Thật ra, liên quan tới cái đít (this) không chỉ có bind mà còn có 2 mĩ nữ khác cũng phức tạp không kém là applycall. Ở một số bài viết tiếp theo, mình sẽ cùng các bạn lột đồ, lộn, vạch trần sự phức tạp của 3 hàm này. Nhớ đón xem nhé, ở các bài viết sau không có mông cũng chả có đít nữa đâu.

javascript-guy

Bài viết có tham khảo từ nguồn: http://javascriptissexy.com/understand-javascripts-this-with-clarity-and-master-it/. Đây là một trang web khá hay về javascript, mình ôn lại được khá nhiều kiến thức js bị hổng trong này.

Advertisements

10 thoughts on “Series JavaScript sida – Luận bàn về cái đít (this) trong javascript”

  1. Đang làm ngồi coi bài bạn post .Lead đi ngang xong vể chỗ chat Skype hỏi :”em xem gì mà chỉ thấy hình đít gái thế ?” .Đơ người luôn

    Like

  2. Không khéo cuối tháng nhận cái mail “Cảm ơn bạn đã cộng tác với công ty ….” rùi mình cũng đi code dạo sao ta .Lead mới bị bồ đá nữa nên hơi khó tánh

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s