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ốngMộ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àngvar 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 đề
- 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 BaptTrong 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ênVí 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 địnhvar timesTwo = params => params * 2
timesTwo[4]; // 8
0Cá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 địnhKhi 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
- 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
12. 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
2Nế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ểmCả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