Đào sâu vào "this" trong JavaScript: Cuộc Phiêu Lưu Của Một React Developer 💻
Câu chuyện bắt đầu từ một bug kỳ lạ...
Hãy tưởng tượng: 3 giờ sáng, bạn vẫn ngồi trước màn hình. Component React của bạn hoạt động hoàn hảo 🚀... cho đến khi bạn truyền một method vào props. Đột nhiên, this.setState ném ra lỗi "Cannot read property 'setState' of undefined".
Anh em nhìn thấy quen không?
Nếu anh em đã từng trải qua cảm giác này, chúc mừng - bạn vừa va phải một trong những bí ẩn thú vị nhất của JavaScript: con trỏ this.
Giờ cùng đào sâu để hiểu rõ bản chất qua câu chuyện sau cùng Sydexa nhé 😉
Nếu anh em đang tìm để học hỏi kinh nghiệm từ Senior, rút ngắn thời gian đi mày mò kiến thức của mình thì chúng mình có mời một chị cựu Senior tại Shopee Singapore về để dạy lớp React Nâng Cao tối ưu hiệu năng, hãy đào thật sâu trong khóa học để có thể hiểu rõ bản chất, học các khái niệm khó trong React và tối ưu cho sản phẩm tại công ty nhé: 😉
Sydexa Team
Học cùng người giỏi nhất sẽ giúp bạn đi nhanh nhất!
Câu chuyện về một cửa hàng cà phê JavaScript
Hãy quên React đi một chút. Tôi muốn kể cho anh em nghe về một quán cà phê đặc biệt trong thế giới JavaScript:
Kết quả in ra: "EspressoMaster 3000 đang pha cà phê ở 95°C" ✅
Mọi thứ vẫn hoàn hảo. Máy pha cà phê hoạt động, cuộc sống bình yên!
Nhưng khoan đã, nếu làm như sau thì sao:
Kết quả là: undefined đang pha cà phê ở undefined°C" 🤯
Plot twist! Máy pha cà phê đã... mất trí nhớ? Vậy chuyện gì đã xảy ra?
Sự thật: Functions chỉ là những người làm thuê
Đây là điều mà nhiều developer không nhận ra:
Hãy tưởng tượng functions như những người đi làm thuê. Khi bạn viết:
JavaScript thực sự lưu trữ nó như thế này:
"this" - Chiếc áo đồng phục của quán coffee: 👕
Bí mật nằm ở đây: this giống như chiếc áo đồng phục mà nhân viên mặc - nó thay đổi tùy theo quán cà phê họ đang làm việc.
Khi bạn gọi coffeeMachine.brew(), JavaScript âm thầm làm như sau:
Và khi code:
const justBrew = coffeeMachine.brew;
justBrew(); // Nhân viên không biết mình đang làm ở đâu!Không có quán cà phê nào → Nhân viên không có áo đồng phục → this = undefined (hoặc window). đó chính là lỗi mà chúng ta gặp ở trên!
Một nhân viên, nhiều quán cà phê? ☕
Lúc đầu, điều này có vẻ như một lỗi thiết kế. Nhưng không! Đây là sức mạnh thực sự:
Nhân viên (function) có thể làm việc ở bất kỳ quán nào, mặc áo đồng phục của quán đó. Điều này cho phép JavaScript có những patterns cực kỳ linh hoạt như mixins, decorators, và method borrowing. (nếu anh em like share thì tôi sẽ viết 1 bài đào sâu về những cái này)
Quay lại với React: Bây giờ mọi thứ đã sáng tỏ
Nhớ bug React lúc đầu không? Giờ bạn đã hiểu tại sao:
Để khắc phục, chúng ta có một số giải pháp như sau:
Solution 1: Arrow function (tự động giữ áo đồng phục) ✅
Solution 2: Bind - "khâu" áo đồng phục vào nhân viên
Solution 3: Wrapper - gọi nhân viên qua quản lý
Bài học rút ra:
this trong JavaScript không phải là bug - nó là một tính năng cực kỳ hay ho. Một khi bạn hiểu rằng:
- Functions là người làm thuê - Họ không gắn chặt với một "công ty" nào
- Context là chiếc áo đồng phục - Được mặc khi làm việc, không phải khi ký hợp đồng
- Bạn là ông chủ - Quyết định ai mặc áo gì với
.call(),.apply(),.bind()
...thì this từ cơn ác mộng trở thành siêu năng lực.
Thử thách cho bạn đọc: ⁉️
Đoán xem đoạn code này in ra gì:
Còn rất nhiều thứ nâng cao thú vị dành cho React Developer nữa, nếu anh em đang tìm để học hỏi kinh nghiệm từ Senior, rút ngắn thời gian đi mày mò kiến thức của mình thì chúng mình có mời một chị cựu Senior tại Shopee Singapore về để dạy lớp React Nâng Cao tối ưu hiệu năng, hãy đào thật sâu trong khóa học để có thể hiểu rõ bản chất, học các khái niệm khó trong React và tối ưu cho sản phẩm tại công ty nhé: 😉
Sydexa Team
Học cùng người giỏi nhất sẽ giúp bạn đi nhanh nhất!