Tìm hiểu về Arrow Functions trong JavaScript ES6
đăng cách đây 1 năm
Arrow function hay Fat Arrow là syntax mới của JavaScript ES6. Ngoài tác dụng giúp cho cú pháp code ngắn ngọn và dễ đọc thì Arrow function có gì đặc biệt? Cùng tìm hiểu với mình qua bài viết dưới đây nhé.
Cú pháp
Một số use case mình hay dùng Arrow function
Trong 1 số trường hợp trên nếu dùng arrow function thì code sẽ rất gọn gàng và dễ nhìn.
Bản thân arrow function không có biến this
Trước arrow function thì mọi function tạo ra đều có biến this tuỳ thuộc vào cách gọi của function :
- this sẽ là global object ( global trong NodeJS, Window object trên browser)
- this sẽ là instance của function đó nếu thực thi 1 function với từ khoá "new"
- this sẽ là undefined khi 1 function được gọi ở dạng "use strict", sẽ là global object nếu thực thi ở dạng non-strict mode
- sẽ là object cha chứa function này nếu function này được khai báo dưới dạng là 1 method của object cha.
(The base object if the function was called as an "object method" mình xin để đoạn tiếng anh ở đây phòng khi mình diễn đạt bằng tiếng việt các bạn khôngnắm được) - this được truyền vào ở tham số thứ 1 của 1 function khi thực thi function qua methods call() hoặc apply()
✧ ✧ ✧
Mình dùng từ bản thân vì arrow function sẽ tự động lấy biến this từ scope gần nhất chưa nó.
Đầu tiên mình tạo ra 1 object godFather với 4 properties, trong đó có 3 properties là function.
method()
Theo (1) (2) ta có method là con props của object godFather => this của method sẽ là instance của object godFather và props được set vào this trong scope của hàm method
arrow()
arrow là 1 arrow function nên giá trị this của nó sẽ được lấy của scope gần với nó nhất là a chàng tokyo ở ngoài.
Ủa vậy tại sao arrow không lấy this của object godFather ???
Bạn để ý chỗ arrow là 1 property của godFather nên scope gần nó nhất phải là nằm ngoài object godFather
arrowGodFather()
Tương tự method arrow, arrowGodFather sẽ lấy biến this gần nó nhất có chứa giá trị {tokyo:700} mình set thêm key em vào this, lúc này arrow function (1) được thực thi sẽ lấy giá trị this của scope gần nó nhất là giá trị this của anh arrowGodFather
Arrow Function không có constructor
Trong javascript khi bạn new 1 function thì kết quả sẽ trả về instance của function đó thông qua biến this, nhưng mà arrow function làm gì có this đâu, nên compiler sẽ quăng lỗi.
Không tự động bind tham số truyền vào hàm
Nếu muốn lấy 1 mảng các tham số truyền vào, bạn phải dùm spread operator.
Arrow Function trong React Class Components
Có bao giờ bạn thắc mắc là tại sao mình cần phải cần dòng :
Khi class FullComp được compile ra, nó sẽ return về instance của class này và có thể access tới tất cả các properties của nó, trong đó có function sayGoodBye.
Hàm sayGoodBye lại là 1 function bình thường, nên có sẽ có this của riêng nó (hoặc undefined nếu là strict mode). Để hàm sayGoodBye này access vào được function this.setState({}) của class thì cần phải bind biến this của class này vào hàm sayGoodBye .
Mọi chuyện sẽ tốt dễ dàng hơn nếu bạn dùng Arrow Function. Dữ liệu cần để render và update trong React đều thông qua props, state. Việc 1 function sử dụng biến this trong nó là không cần thiết, vậy Arrow Function là quá tuyệt trong trường hợp này rồi, vì mình chỉ sử dụng this.state và this.props của class chứa sayGoodBye thôi.
Chỗ này có thể viết lại thành
✧ ✧ ✧
Kết bài
ES6 ra đời với quá nhiều tiện tích, bản thân mình từ khi bắt đầu học javascript đã viết ES6, có nhiều cú pháp mà mãi sau 1 thời gian làm mình mới thực sự biết ý nghĩa của nó.
Còn 1 số tính năng nữa của ES6 nhưng mình chưa xài nhiều nên mình sẽ để link ở đây để các bạn tìm hiểu thêm.
Cảm ơn các bạn để theo dõi. Đăng kí vào codefun để cùng học tập và chia sẻ nha <3 !
#es6#javascript#functional
...