Con trỏ This trong Javascript. Những kiến thức cơ bản cần biết

Con trỏ này Có lẽ là một khái niệm không mấy xa lạ trong lập trình hướng đối tượng, nó là một ví dụ của đối tượng chứa mã đang được thực thi, nói một cách đại khái thì ngôn ngữ của con người là như thế này:

Tuyên bố này có thể được diễn đạt theo một cách khác như sau:

Hai câu trên hoàn toàn đồng nghĩa với nhau, tuy không nói rõ nhưng chúng ta đều hiểu “anh” là “Nam”. Con trỏ điều này Nó cũng có ý nghĩa tương tự. Nếu nói bằng ngôn ngữ của con người, con trỏ này là một đại từ để chỉ một đối tượng cụ thể được chỉ định trong ngữ cảnh trước đó.

Con trỏ điều này được sử dụng rất nhiều trong mã JS, và nó cũng là một trong những khái niệm bị hiểu nhầm (dẫn đến lỗi) trong ngôn ngữ này. Sẽ hơi mất công nếu bạn muốn tìm hiểu đầy đủ về nó, nhưng một khi bạn đã hiểu nó, bạn sẽ thấy nó không tốn công sức.

Một lần nữa về con trỏ này

Trong các ngôn ngữ lập trình như C, C #, Java, PHP hoặc thậm chí là Javascript, con trỏ điều này Thường được dùng để chỉ Đối tượng chứa phương thức đang được gọi để thực thi, có vẻ như cách sử dụng này có vẻ rõ ràng và dễ hiểu, mã kiểu đó thường có dạng:

Khi đoạn mã trên được biên dịch và hàm getName () được gọi, con trỏ này trong hàm getName () được hiểu là một đối tượng Hocsinh1 và this.name là để chỉ định mã tên của đối tượng Hocsinh1 đó.

Cũng giống như các đại từ trong ngôn ngữ nói, điều này đại diện cho một đối tượng trong ngữ cảnh đã đề cập trước đó. Chúng ta cũng sẽ thảo luận sâu hơn về khái niệm đối tượng và bối cảnh trong các phần tiếp theo.

Mình nghĩ bạn cần xem =>  Chức năng và ứng dụng của định tuyến cuộc gọi, xây dựng định tuyến cuộc gọi hiệu quả

Cơ bản về con trỏ này trong Javascript

Cần nói một chút về hàm (function) trong Javascript, như chúng ta đã biết, trong JS một hàm cũng là một đối tượng (object), và object sẽ có những thuộc tính riêng. Trong JS, khi một hàm được gọi, nó có thuộc tính this, và thuộc tính này giữ giá trị của một đối tượng đang gọi hàm này.

Tức là khi một hàm được gọi (tạm gọi là hàm A) thì con trỏ này chứa giá trị của đối tượng được gọi là A, và ta có thể thông qua con trỏ này để lấy các giá trị thuộc tính khác trong đối tượng vừa được gọi là A.

điều này được khai báo trong hàm getName (), và hàm getName () là hàm sẽ được gọi bởi đối tượng Hocsinh1, vì vậy ở đây được hiểu là mang giá trị tham chiếu đến đối tượng Hocsinh1. Ở đây, việc sử dụng con trỏ này trong Javascript cũng tương tự như các ngôn ngữ khác.

Tuy nhiên, chúng ta sẽ xem xét 4 trường hợp con trỏ này trở nên mơ hồ hơn ví dụ trên:

• Con trỏ này trong chức năng gọi lại sử dụng

• Con trỏ này nằm bên trong bao đóng

• Con trỏ này trong trường hợp gán hàm cho một biến khác

• Con trỏ này trong các phương pháp vay

1. Con trỏ này sử dụng chức năng Gọi lại

Có thể nói hàm callback là việc chúng ta truyền một hàm làm đối số cho một hàm khác để có thể kích hoạt hàm đó sau này. Hãy xem xét ví dụ sau:

Khi người dùng nhấn vào nút, hàm PrintName () sẽ được gọi để hiển thị tên của Hocsinh trên màn hình. Tuy nhiên, đoạn mã trên sẽ không thể chạy đúng cách.

Lý do là vì khi sự kiện nhấp chuột được kích hoạt, sự kiện đang được gán cho đối tượng $ (‘nút’). Vì vậy, khi hàm Hocsinh.printName () được kích hoạt, con trỏ này đang tham chiếu đến $ (‘button’) chứ không phải đối tượng Hocsinh, khiến cuộc gọi this.name trở nên vô nghĩa.

Để đoạn mã trên chạy như mong đợi – in ra tên của Hocsinh – thì chúng ta phải đảm bảo rằng ngữ cảnh của hàm gọi lại Hocsinh.printName là đối tượng Hocsinh khi hàm này được gọi. Cụ thể trong trường hợp này, chúng ta có thể sử dụng hàm Bind () để nối ngữ cảnh vào hàm gọi lại đó.

Mình nghĩ bạn cần xem =>  Tất tần tật thông tin về Machine Learning

Đề xuất: Mọi người có thể tìm hiểu thêm về các hàm Apply () và Call (), cũng được sử dụng để thay đổi ngữ cảnh trong JS.

2. Con trỏ này đang ở trạng thái đóng

Nói tóm lại, bao đóng là một hàm bên trong bên trong một hàm khác (hàm bên ngoài). Chúng ta đã biết rằng quá trình đóng không thể truy cập con trỏ này của hàm bên ngoài, vì vậy tình huống sau sẽ xuất hiện:

Kết quả của đoạn mã trên như sau:

Để khắc phục điều này, các nhà phát triển javascript thường giải quyết bằng cách gán giá trị của biến này cho một biến trung gian trước khi gọi hàm đóng:

Đoạn mã trên có vẻ kỳ quặc với những người ít viết mã trong Javascript trước đây, nhưng đây là một tình huống xảy ra khá thường xuyên trong Javascript.

3. Con trỏ này trong trường hợp gán hàm cho một biến khác

Nếu chúng ta gán hàm cho một biến khác, một trạng thái sẽ thay đổi ngữ cảnh của hàm nếu được gọi. Hãy xem xét ví dụ sau:

Tương tự như các trường hợp đã phân tích ở trên, ngữ cảnh của hàm Hocsinh.printName bị thay đổi khi chúng ta gán hàm cho một đối tượng khác. Để giữ nguyên ngữ cảnh của biến Hocsinh, chúng ta sẽ chỉnh sửa đoạn mã như sau:

Hãy nhớ sử dụng bind () để gán ngữ cảnh chính xác.

4. Con trỏ này trong các phương pháp mượn

Hàm mượn là một trong những khái niệm JavaScript độc đáo. Để hiểu nó có thể cần thêm một bài viết riêng, nhưng tôi sẽ đưa ra một ví dụ về cách nó thay đổi ngữ cảnh của con trỏ này. Hãy xem xét ví dụ sau:

Chúng ta muốn mượn hàm computeAvg () của đối tượng appController để tính điểm trung bình cho đối tượng gameController. Để thực hiện việc này, chúng ta cần thay đổi ngữ cảnh của hàm computeAvg () thành một đối tượng gameController trong thời gian chạy, hàm apply () trong JS sẽ giúp chúng ta thực hiện điều này:

Mình nghĩ bạn cần xem =>  Các bước khai thác dữ liệu

Vì vậy, chúng tôi chỉ sử dụng chức năng vay (phương thức mượn) và thay đổi ngữ cảnh để thực hiện.

Lời Kết

Qua một số chia sẻ trên, hy vọng mọi người có thể hiểu rõ hơn về con trỏ này trong lập trình JavaScript. Chúng ta có trong tay công cụ là các hàm như apply (), bind (), call () để điều khiển con trỏ này trong nhiều trường hợp khác nhau. Bạn có thể đọc thêm về chúng tại đây.

Quy tắc cốt lõi cần nhớ khi làm việc với con trỏ này là: luôn chú ý đến ngữ cảnh của con trỏ này khi hàm được gọi, đảm bảo rằng chúng ta đang sử dụng đúng ngữ cảnh của hàm như mong muốn.

Chúc thành công. Kính thưa!

Nguồn: kipalog.com

>> Xem thêm: Cơ bản đang chờ đợi Async trong Javascript

✤ Top 20 bài viết Tổng Hợp mới nhất :

Xem thêm nhiều Tổng Hợp mới hay

Leave A Reply

Your email address will not be published.