Hàm mũi tên trong JavaScript là gì?

Hàm mũi tên (còn được gọi là “hàm mũi tên béo”) chắc chắn là một trong những tính năng phổ biến hơn của ES6. Họ đã giới thiệu một cách mới để viết các hàm ngắn gọn

Đây là một hàm được viết theo cú pháp ES5

function timesTwo(params) {  return params * 2}function timesTwo(params) {
  return params * 2
}

timesTwo(4);  // 8

Bây giờ, đây là hàm tương tự được biểu diễn dưới dạng hàm mũi tên

var timesTwo = params => params * 2

timesTwo(4);  // 8

Nó ngắn hơn nhiều. Chúng tôi có thể bỏ qua các dấu ngoặc nhọn và câu lệnh return do trả về ngầm định (nhưng chỉ khi không có khối nào — thêm về điều này bên dưới)

Điều quan trọng là phải hiểu chức năng mũi tên hoạt động khác như thế nào so với các chức năng ES5 thông thường

biến thể

Sự đa dạng là gia vị của cuộc sống

Một điều bạn sẽ nhanh chóng nhận thấy là có rất nhiều cú pháp có sẵn trong các hàm mũi tên. Hãy chạy qua một số trong những cái phổ biến

1. Không có tham số

Nếu không có tham số, bạn có thể đặt dấu ngoặc đơn trống trước

var timesTwo = params => params * 2

timesTwo(4);  // 8

3gt;

() => 42

Trên thực tế, bạn thậm chí không cần dấu ngoặc đơn

_ => 42

2. tham số đơn

Với các chức năng này, dấu ngoặc đơn là tùy chọn

x => 42  || (x) => 42

3. Nhiều thông số

Dấu ngoặc đơn là bắt buộc đối với các chức năng này

(x, y) => 42

4. Tuyên bố (trái ngược với biểu thức)

Ở dạng cơ bản nhất, một biểu thức hàm tạo ra một giá trị, trong khi một câu lệnh hàm thực hiện một hành động

Với hàm mũi tên, điều quan trọng cần nhớ là các câu lệnh cần có dấu ngoặc nhọn. Sau khi có dấu ngoặc nhọn, bạn luôn cần phải viết

var timesTwo = params => params * 2

timesTwo(4);  // 8

4

Đây là một ví dụ về hàm mũi tên được sử dụng với câu lệnh if

________số 8_______

5. “Thân hình khối”

Nếu chức năng của bạn ở trong một khối, bạn cũng phải sử dụng câu lệnh

var timesTwo = params => params * 2

timesTwo(4);  // 8

4 rõ ràng

var addValues = (x, y) => {
  return x + y
}

6. Đối tượng chữ

Nếu bạn đang trả về một đối tượng theo nghĩa đen, nó cần được đặt trong dấu ngoặc đơn. Điều này buộc trình thông dịch đánh giá những gì bên trong dấu ngoặc đơn và đối tượng bằng chữ được trả về

x =>({ y: x })

Cú pháp ẩn danh

Điều quan trọng cần lưu ý là các chức năng mũi tên là ẩn danh, có nghĩa là chúng không được đặt tên

Ẩn danh này tạo ra một số vấn đề

1. Khó gỡ lỗi hơn

Khi bạn gặp lỗi, bạn sẽ không thể theo dõi tên của chức năng hoặc số dòng chính xác nơi nó xảy ra

2. Không tự tham khảo

Nếu chức năng của bạn cần phải có một tham chiếu tự tại bất kỳ thời điểm nào (e. g. đệ quy, trình xử lý sự kiện cần hủy liên kết), nó sẽ không hoạt động

Lợi ích chính. Không có ràng buộc của 'điều này'

Ảnh của davide ragusa trên Bapt

Trong các biểu thức hàm cổ điển, từ khóa

var timesTwo = params => params * 2

timesTwo(4);  // 8

6 được liên kết với các giá trị khác nhau dựa trên ngữ cảnh mà nó được gọi. Tuy nhiên, với các chức năng mũi tên,

var timesTwo = params => params * 2

timesTwo(4);  // 8

6 bị ràng buộc về mặt từ vựng. Nó có nghĩa là nó sử dụng_______1_______6 từ đoạn mã chứa chức năng mũi tên

Ví dụ, hãy xem hàm

var timesTwo = params => params * 2

timesTwo(4);  // 8

9 bên dưới

// ES5
var obj = {
  id: 42,
  counter: function counter() {
    setTimeout(function() {
      console.log(this.id);
    }.bind(this), 1000);
  }
};

Trong ví dụ ES5, cần có

() => 42

0 để chuyển ngữ cảnh ____1_______6 vào hàm. Mặt khác, theo mặc định,

var timesTwo = params => params * 2

timesTwo(4);  // 8

6 sẽ không được xác định

var timesTwo = params => params * 2

timesTwo(4);  // 8

0

Các hàm mũi tên ES6 không thể bị ràng buộc với từ khóa

var timesTwo = params => params * 2

timesTwo(4);  // 8

6, do đó, về mặt từ vựng, nó sẽ tăng phạm vi và sử dụng giá trị của

var timesTwo = params => params * 2

timesTwo(4);  // 8

6 trong phạm vi mà nó được xác định

Khi nào bạn không nên sử dụng Arrow Functions

Sau khi tìm hiểu thêm một chút về hàm mũi tên, tôi hy vọng bạn hiểu rằng chúng không thay thế các hàm thông thường

Dưới đây là một số trường hợp mà bạn có thể không muốn sử dụng chúng

1. phương pháp đối tượng

Khi bạn gọi

() => 42

5, số mạng không giảm. Đó là bởi vì

var timesTwo = params => params * 2

timesTwo(4);  // 8

6 không bị ràng buộc với bất kỳ thứ gì và sẽ kế thừa giá trị của

var timesTwo = params => params * 2

timesTwo(4);  // 8

6 từ phạm vi cha của nó

var timesTwo = params => params * 2

timesTwo(4);  // 8

1

2. Hàm gọi lại với ngữ cảnh động

Nếu bạn cần ngữ cảnh của mình động, các chức năng mũi tên không phải là lựa chọn phù hợp. Hãy xem trình xử lý sự kiện này bên dưới

var timesTwo = params => params * 2

timesTwo(4);  // 8

2

Nếu chúng tôi nhấp vào nút, chúng tôi sẽ nhận được TypeError. Đó là bởi vì

var timesTwo = params => params * 2

timesTwo(4);  // 8

6 không bị ràng buộc với nút, mà thay vào đó bị ràng buộc với phạm vi cha của nó

3. Khi nó làm cho mã của bạn khó đọc hơn

Cần xem xét sự đa dạng của cú pháp mà chúng tôi đã đề cập trước đó. Với các chức năng thông thường, mọi người biết điều gì sẽ xảy ra. Với các chức năng mũi tên, có thể khó giải mã những gì bạn đang xem ngay lập tức

Khi nào bạn nên sử dụng chúng

Các chức năng mũi tên tỏa sáng nhất với bất kỳ thứ gì yêu cầu

var timesTwo = params => params * 2

timesTwo(4);  // 8

6 bị ràng buộc với ngữ cảnh chứ không phải chính chức năng đó

Mặc dù thực tế là chúng ẩn danh, nhưng tôi cũng thích sử dụng chúng với các phương thức như

_ => 42

0 và

_ => 42

1, bởi vì tôi nghĩ rằng nó làm cho mã của tôi dễ đọc hơn. Đối với tôi, ưu điểm vượt trội hơn nhược điểm

Cảm ơn đã đọc bài viết của tôi, và chia sẻ nếu bạn thích nó. Hãy xem các bài viết khác của tôi như Cách tôi xây dựng ứng dụng Đồng hồ Pomodoro của mình và những bài học tôi đã học được trong quá trình thực hiện và Hãy làm sáng tỏ từ khóa 'mới' của JavaScript

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

---

Nếu bài viết này hữu ích, hãy tweet nó

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

Việc sử dụng chức năng mũi tên trong JavaScript là gì?

Công dụng chính của chức năng mũi tên là gì?

Sự khác biệt giữa chức năng và chức năng mũi tên trong JavaScript là gì?

Hàm mũi tên trong JavaScript được gọi là gì?