Sự khác biệt giữa các hàm thông thường và các hàm mũi tên trong JavaScript

Theo MDN, Biểu thức hàm mũi tên là một thay thế nhỏ gọn về mặt cú pháp cho biểu thức hàm thông thường, mặc dù không có ràng buộc riêng với các từ khóa this, đối số, super hoặc new.target. Biểu thức hàm mũi tên không phù hợp với tư cách là phương thức và chúng không thể được sử dụng làm hàm tạo.

Có 3 điểm khác biệt nhỏ trong các hàm thông thường và các hàm mũi tên trong JavaScript.

Không sở hữu ràng buộc này

Các hàm mũi tên không có giá trị này của riêng chúng. Giá trị của giá trị này bên trong một hàm mũi tên luôn được kế thừa từ phạm vi bao quanh.

Ví dụ

this.a = 100;
let arrowFunc = () => {this.a = 150};
function regFunc() {
   this.a = 200;
}
console.log(this.a)
arrowFunc()
console.log(this.a)
regFunc()
console.log(this.a)

Đầu ra

100
150
150

Thấy rằng hàm mũi tên đã thay đổi đối tượng này bên ngoài phạm vi của nó. Hàm thông thường chỉ thực hiện các thay đổi trong chính nó.

Các hàm mũi tên không có mảng đối số

Trong JS, mảng đối số trong các hàm là một đối tượng đặc biệt có thể được sử dụng để nhận tất cả các đối số được truyền cho hàm. Tương tự như vậy, các hàm mũi tên không có ràng buộc riêng với đối tượng đối số, chúng bị ràng buộc với các đối số của phạm vi bao quanh.

Các hàm mũi tên có thể gọi được nhưng không thể xây dựng

Nếu một hàm có thể xây dựng, nó có thể được gọi với new, tức là new User (). Nếu một hàm có thể gọi được, nó có thể được gọi mà không có hàm mới (tức là gọi hàm bình thường).

Các hàm được tạo thông qua khai báo / biểu thức hàm đều có thể xây dựng và có thể gọi.

Các hàm (và phương thức) mũi tên chỉ có thể gọi được. các hàm tạo lớp chỉ có thể xây dựng.

Nếu bạn đang cố gắng gọi một hàm không thể gọi hoặc để tạo một hàm không thể xây dựng, bạn sẽ gặp phải lỗi thời gian chạy.

let arrowFunc = () => {}
new arrowFunc()
This code gives the error:
arrowFunc is not a constructor