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 biến thể ngắn gọn về mặt cú pháp đối với một 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ị riê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

Điều này sẽ cung cấp đầ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ó.

• Hàm mũi tên không có mảng đối số Trong JS, mảng đối số trong 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ể cấu trúc và có thể gọi được.

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 có cấu trúc, bạn sẽ gặp phải lỗi thời gian chạy.

Ví dụ

let arrowFunc = () => {}
new arrowFunc()

Đầu ra

Mã này gây ra lỗi -

arrowFunc is not a constructor