SỰ KHÁC NHAU GIỮA FUNCTION THƯỜNG VÀ ARROW FUNCTION
Nội dung chính
Arrow function là một trong những tính năng rất hay của ES6. Việc sử dụng đúng cách arrow function giúp code trở nên ngắn gọn và dễ hiểu hơn. Tuy nhiên, arrow function không thể thay thế hoàn toàn function thường được. Vì vậy, trong bài viết này, Hybrid Technologies sẽ giúp bạn phân biệt arrow function và function thường trong JavaScript. Qua đó, bạn sẽ biết cách sử dụng chúng sao cho phù hợp nhất với từng hoàn cảnh.
Giống nhau
Arrow function và function đều là function.
Khác nhau cơ bản
Cú pháp
Arrow function sử dụng kí tự =>:
|
Function sử dụng từ khoá function:
|
Arrow function thường ngắn gọn hơn function
Với hàm số có 1 tham số, arrow function có thể bỏ qua cặp dấu ngoặc đơn.
|
Tương đương với function:
|
Ngoài ra, arrow function cũng có thể bỏ qua từ khoá return.
|
Tương đương với function:
|
Ví dụ sử dụng arrow function với các higher-order functions, như: forEach, map, filter,…
Sử dụng map với function:
|
Sử dụng map với arrow function:
|
Arrow function không bind this
Arrow function không định nghĩa giá trị this của riêng nó giống như function.
Ví dụ sử dụng function:
|
Trong chế độ none-strict, function print định nghĩa this chính là đối tượng global (đối với trình duyệt thì đó là window). Do đó, this.x tương đương với window.x và bằng 0.
Để đoạn code trên hoạt động theo đúng mong muốn thì bạn phải sửa lại như sau:
|
Ví dụ sử dụng arrow function:
|
Ngược lại với function, arrow function không định nghĩa lại this. Do đó, giá trị của this sẽ ứng với ngữ cảnh gần nhất của nó. Vì vậy, trong đoạn code trên this.x sẽ tương ứng với giá trị x được truyền vào và bằng 1.
Arrow function không bind arguments
Tương tự như đối với this, arrow function cũng không định nghĩa giá trị arguments của riêng nó.
Đối tượng arguments đặc biệt hữu ích đối với những function không xác định trước số lượng tham số.
|
Đối với arrow function, sử dụng arguments sẽ lỗi vì biến này không được định nghĩa ở arrow function.
|
Tuy nhiên, bạn vẫn có thể sử dụng rest parameters để thay thế cho arguments.
|
Arrow function không phù hợp làm method cho object
Chính vì arrow function không định nghĩa giá trị this của riêng nó, nên cũng không phù hợp là method cho object.
|
Vì vậy, nếu muốn định nghĩa method cho object thì bạn nên sử dụng function.
Arrow function không thể sử dụng làm hàm constructor
Trước khi ES6 ra đời, người ta có thể sử dụng function làm hàm khởi tạo cho object.
|
Nếu thay đoạn code trên bằng arrow function thì bạn sẽ bị lỗi: TypeError: Dog is not a constructor.
|
Arrow function không có thuộc tính prototype
Về cơ bản, mọi đối tượng trong JavaScript đều có thuộc tính prototype và kế thừa cũng theo prototype.
Tuy nhiên, nếu arrow function không thể sử dụng làm constructor thì mình cho rằng điều này cũng hợp lý.
let Foo = () => {};
console.log(Foo.prototype); // undefined
Arrow function không được hoisted
Về cơ bản, hoisting được hiểu là biến và hàm số được đưa lên đầu của phạm vi biến, hàm số trước khi đoạn code đó được thực hiện.
Arrow function không được hoisted: nghĩa là bạn phải định nghĩa arrow function trước khi sử dụng nó.
|
Ngược lại, function declaration được hoisted nên bạn có thể gọi hàm trước khi định nghĩa nó.
|
Kết luận
Trên đây là một số điểm giúp bạn phân biệt arrow function và function trong JavaScript. Để tiện theo dõi, mình sẽ tóm tắt lại các đặc điểm khác nhau của chúng như sau:
- Cú pháp
- Arrow function thường ngắn gọn hơn function
- Arrow function không bind this
- Arrow function không bind arguments
- Arrow function không phù hợp làm method cho object
- Arrow function không thể sử dụng làm hàm constructor
- Arrow function không có thuộc tính prototype
- Arrow function không được hoisted
Nếu bạn thấy arrow function khác với function ở điểm nào nữa thì có thể chia sẻ lại với chúng mình và mọi người bằng cách bình luận xuống phía dưới nhé!