Chức năng mũi tên là một trong những tính năng được giới thiệu trong phiên bản ES6 của JavaScript. Nó cho phép bạn tạo các chức năng theo cách gọn gàng hơn so với các chức năng thông thường. Ví dụ,
Chức năng này
// function expression
let x = function[x, y] {
return x * y;
}
có thể được viết như
// using arrow functions
let x = [x, y] => x * y;
sử dụng chức năng mũi tên
Cú pháp hàm mũi tên
Cú pháp của hàm mũi tên là
let myFunction = [arg1, arg2, ...argN] => {
statement[s]
}
Nơi đây,
9 là tên của hàm// using arrow functions let x = [x, y] => x * y;
0 là các đối số của hàmlet myFunction = [arg1, arg2, ...argN] => { statement[s] }
1 là thân hàmlet myFunction = [arg1, arg2, ...argN] => { statement[s] }
Nếu nội dung có một câu lệnh hoặc biểu thức, bạn có thể viết hàm mũi tên dưới dạng
let myFunction = [arg1, arg2, ...argN] => expression
ví dụ 1. Hàm mũi tên không có đối số
Nếu một hàm không nhận bất kỳ đối số nào, thì bạn nên sử dụng dấu ngoặc đơn rỗng. Ví dụ,
let greet = [] => console.log['Hello'];
greet[]; // Hello
ví dụ 2. Hàm mũi tên với một đối số
Nếu một hàm chỉ có một đối số, bạn có thể bỏ qua dấu ngoặc đơn. Ví dụ,
________số 8ví dụ 3. Chức năng mũi tên như một biểu thức
Bạn cũng có thể tự động tạo một hàm và sử dụng nó như một biểu thức. Ví dụ,
let age = 5;
let welcome = [age < 18] ?
[] => console.log['Baby'] :
[] => console.log['Adult'];
welcome[]; // Baby
Ví dụ 4. Hàm mũi tên nhiều dòng
Nếu thân hàm có nhiều câu lệnh, bạn cần đặt chúng bên trong dấu ngoặc nhọn
let myFunction = [arg1, arg2, ...argN] => {
statement[s]
}
2. Ví dụ,// using arrow functions
let x = [x, y] => x * y;
1cái này với chức năng mũi tên
Bên trong một chức năng thông thường, từ khóa này đề cập đến chức năng mà nó được gọi
Tuy nhiên,
let myFunction = [arg1, arg2, ...argN] => {
statement[s]
}
3 không được liên kết với các chức năng mũi tên. Chức năng mũi tên không có let myFunction = [arg1, arg2, ...argN] => {
statement[s]
}
3 riêng. Vì vậy, bất cứ khi nào bạn gọi let myFunction = [arg1, arg2, ...argN] => {
statement[s]
}
3, nó đề cập đến phạm vi cha của nó. Ví dụ,Bên trong một chức năng thông thường
// using arrow functions
let x = [x, y] => x * y;
5đầu ra
// using arrow functions
let x = [x, y] => x * y;
6Ở đây, có thể truy cập
let myFunction = [arg1, arg2, ...argN] => {
statement[s]
}
6 bên trong let myFunction = [arg1, arg2, ...argN] => {
statement[s]
}
7 vì let myFunction = [arg1, arg2, ...argN] => {
statement[s]
}
7 là phương thức của một đối tượngTuy nhiên,
let myFunction = [arg1, arg2, ...argN] => {
statement[s]
}
9 là một chức năng bình thường và let myFunction = [arg1, arg2, ...argN] => {
statement[s]
}
6 không thể truy cập được vì let myFunction = [arg1, arg2, ...argN] => {
statement[s]
}
3 đề cập đến đối tượng chung [Đối tượng cửa sổ trong trình duyệt]. Do đó, let myFunction = [arg1, arg2, ...argN] => {
statement[s]
}
6 bên trong hàm let myFunction = [arg1, arg2, ...argN] => {
statement[s]
}
9 mang lại cho let myFunction = [arg1, arg2, ...argN] => expression
4Bên trong một chức năng mũi tên
// using arrow functions
let x = [x, y] => x * y;
0đầu ra
// using arrow functions
let x = [x, y] => x * y;
1Ở đây, hàm
let myFunction = [arg1, arg2, ...argN] => {
statement[s]
}
9 được xác định bằng hàm mũi tên. Và bên trong hàm mũi tên, let myFunction = [arg1, arg2, ...argN] => {
statement[s]
}
3 đề cập đến phạm vi của cha mẹ. Do đó, let myFunction = [arg1, arg2, ...argN] => {
statement[s]
}
6 cho 25Ràng buộc đối số
Các hàm thông thường có đối số ràng buộc. Đó là lý do tại sao khi bạn truyền đối số cho một hàm thông thường, bạn có thể truy cập chúng bằng từ khóa
let myFunction = [arg1, arg2, ...argN] => expression
8. Ví dụ,// using arrow functions
let x = [x, y] => x * y;
2Hàm mũi tên không có ràng buộc đối số
Khi bạn cố gắng truy cập một đối số bằng chức năng mũi tên, nó sẽ báo lỗi. Ví dụ,
// using arrow functions
let x = [x, y] => x * y;
3Để giải quyết vấn đề này, bạn có thể sử dụng cú pháp lây lan. Ví dụ,
// using arrow functions
let x = [x, y] => x * y;
4Chức năng mũi tên với lời hứa và cuộc gọi lại
Các hàm mũi tên cung cấp cú pháp tốt hơn để viết lời hứa và gọi lại. Ví dụ,
// using arrow functions
let x = [x, y] => x * y;
5có thể được viết như
// using arrow functions
let x = [x, y] => x * y;
6Những điều bạn nên tránh với chức năng mũi tên
1. Bạn không nên sử dụng các hàm mũi tên để tạo các phương thức bên trong các đối tượng
// using arrow functions
let x = [x, y] => x * y;
72. Bạn không thể sử dụng hàm mũi tên làm hàm tạo. Ví dụ,
// using arrow functions
let x = [x, y] => x * y;
8Ghi chú. Các chức năng mũi tên đã được giới thiệu trong ES6. Một số trình duyệt có thể không hỗ trợ sử dụng chức năng mũi tên. Truy cập hỗ trợ JavaScript Arrow Function để tìm hiểu thêm