Hàm mũi tên so với hàm thông thường trong JavaScript

Các hàm mũi tên khác với các hàm thông thường trong JS như thế nào?


Các hàm thông thường là các hàm “cũ” mà chúng tôi sử dụng kể từ khi JavaScript ra đời:

function run() {

}

Chúng có thể được chạy trực tiếp:

run()

hoặc chúng có thể được gán cho một biến:

const run = function run() {

}

run()

Khi bạn làm như vậy, hàm có thểcũng thếẩn danh:

const run = function () {

}

run()

Sự khác biệt duy nhất là bây giờ trong dấu vết ngăn xếp xuất hiện khi có lỗi, bạn sẽ không thấy tên hàm nữa.

Các hàm mũi tên, được giới thiệu trong ES6 vào năm 2015, giống như phiên bản cuối cùng của các hàm thông thường, vì chúng không có tên. Không bao giờ.

Cú pháp "footprint" nhỏ hơn:

const run = () => {

}

run()

Nếu chúng ta có một tham số, chúng ta có thể bỏ qua dấu ngoặc đơn:

const run = param => {

}

run()

Và nếu chúng ta chỉ có một câu lệnh, chúng ta cũng có thể bỏ qua dấu ngoặc nhọn:

const run = param => 'running'
run()

Trong trường hợp này, giá trị trả về là chuỗi'running'.

Cả hàm mũi tên và hàm thông thường đều có thể được sử dụng làm phương thức đối tượng.

Bây giờ là sự khác biệt lớn nhất giữa 2 chức năng đó và nó liên quan đến cáchthisđược ràng buộc trong một phương thức.

Hãy xem xét ví dụ này:

const car = {
  brand: 'Ford',
  model: 'Fiesta',
  start: function() {
    console.log(`Started ${this.brand} ${this.model}`)
  },
  stop: () => {
    console.log(`Stopped ${this.brand} ${this.model}`)
  }
}

thisbên trongstart()phương thức tham chiếu đến chính đối tượng.

Nhưng trongstop()phương thức, là một hàm mũi tên, nó không.

thiskhông bị ràng buộc với cá thể đối tượng. Nó chỉ ra cái gìthistrỏ đến trong phạm vi bên ngoài.

Điều này ngụ ý rằngcác hàm mũi tên không phù hợp để sử dụng cho các phương thức đối tượngkhi bạn muốn truy cậpthis.

Tải xuống miễn phí của tôiSổ tay dành cho Người mới bắt đầu JavaScript


Các hướng dẫn js khác: