React ES6 Arrow Functions

Arrow Function

Arrow function cho phép chúng ta viết cú pháp của function ngắn hơn:

Ví dụ: Trước đây, function sẽ được viết như sau:

Bây giờ với Arrow Function, function sẽ được viết lại ngắn gọn như sau:

Nếu như function chỉ có một câu lệnh duy nhất, và câu lệnh này trả về một giá trị, thì bạn có thể loại bỏ dấu ngoặc nhọn và từ khóa return:

Ví dụ: Arrow Function trả về giá trị theo mặc định:

Ghi chú: Cú pháp này chỉ làm việc nếu như function chỉ có một câu lệnh duy nhất.

Nếu như bạn có các tham số, thì bạn truyền chúng bên trong dấu ngoặc tròn:

Ví dụ: Arrow Function với các tham số:

Trong thực tế, nếu như bạn chỉ có một tham số, thì bạn cũng có thể bỏ qua dấu ngoặc tròn:

Ví dụ: Arrow Function không có dấu ngoặc tròn:

Về this thì sao?

Việc xử lý this trong các arrow function cũng khác so với các hàm thông thường.

Nói tóm lại, với các arrow function thì không có ràng buộc nào về this.

Trong các hàm thông thường từ khóa this đã miêu tả đối tượng đã gọi hàm, nó có thể là window, document, một button hoặc bất cứ cái gì.

Với các arrow function, từ khóa this luôn luôn miêu tả đối tượng đã định nghĩa arrow function.

Chúng ta hãy xem hai ví dụ sau để hiểu sự khác biệt.

Cả hai ví dụ đều gọi cùng một phương thức hai lần, lần đầu tiên khi trang được tải, và một lần nữa khi người dùng click vào một button.

Ví dụ đầu tiên sử dụng một hàm thông thường, và ví dụ thứ hai sử dụng một arrow function.

Kết quả trả về cho thấy rằng ví dụ đầu tiên trả về hai đối tượng khác nhau (window và button), và ví dụ thứ hai trả về đối tượng Header hai lần.

Ví dụ: Với một hàm thông thường, this miêu tả đối tượng đã gọi hàm:

Ví dụ: Với một arrow function, this miêu tả đối tượng Header, không quan trọng là ai đã gọi hàm:

Hãy nhớ những sự khác biệt này khi bạn làm việc với hàm. Thỉnh thoảng cách hoạt động của các hàm thông thường là điều mà bạn muốn, nếu không thì, hãy sử dụng arrow function.