Hàm là một khối mã tham số được xác định một lần và được gọi nhiều lần sau đó. Trong JavaScript, một chức năng được cấu thành và chịu ảnh hưởng của nhiều thành phần
- Mã JavaScript tạo thành thân hàm
- Danh sách các tham số
- Các biến có thể truy cập từ phạm vi từ vựng
- Giá trị trả về
- Bối cảnh
6 khi hàm được gọijavascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
- Chức năng được đặt tên hoặc ẩn danh
- Biến chứa đối tượng hàm
- đối tượng
7 [hoặc bị thiếu trong hàm mũi tên]javascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
Bài đăng này hướng dẫn bạn sáu cách tiếp cận để khai báo các hàm JavaScript. cú pháp, ví dụ và những cạm bẫy phổ biến. Hơn nữa, bạn sẽ hiểu khi nào nên sử dụng một loại chức năng cụ thể trong một số trường hợp nhất định
Mục lục
- 1. khai báo hàm
- 1. 1 Một chức năng thông thường
- 1. 2 Sự khác biệt từ biểu thức chức năng
- 1. 3 Khai báo hàm trong điều kiện
- 2. biểu thức hàm
- 2. 1 Biểu thức hàm được đặt tên
- 2. 2 Biểu thức hàm được ưu tiên đặt tên
- 3. định nghĩa phương pháp tốc ký
- 3. 1 Tên và phương thức thuộc tính được tính toán
- 4. chức năng mũi tên
- 4. 1 Minh bạch bối cảnh
- 4. 2 cuộc gọi lại ngắn
- 5. Chức năng máy phát điện
- 6. Một điều nữa. chức năng mới
- 7. Cuối cùng, cách nào tốt hơn?
1. khai báo hàm
Một khai báo hàm được tạo bằng từ khóa
8, theo sau là tên hàm bắt buộc, danh sách các tham số trong một cặp dấu ngoặc đơnjavascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
9 và một cặp dấu ngoặc nhọnjavascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
0 để phân định mã cơ thểjavascript
function factorial[n] {
if [n === 0] {
return 1;
}
return n * factorial[n - 1];
}
factorial[4]; // => 24
Ví dụ khai báo hàm
javascript
// function declaration
function isEven[num] {
return num % 2 === 0;
}
isEven[24]; // => true
isEven[11]; // => false
1 là một khai báo hàm xác định hàmjavascript
function factorial[n] {
if [n === 0] {
return 1;
}
return n * factorial[n - 1];
}
factorial[4]; // => 24
2, xác định xem một số có chẵn khôngjavascript
function factorial[n] {
if [n === 0] {
return 1;
}
return n * factorial[n - 1];
}
factorial[4]; // => 24
Khai báo hàm tạo một biến trong phạm vi hiện tại với định danh bằng tên hàm. Biến này giữ đối tượng chức năng
Biến hàm được nâng lên trên cùng của phạm vi hiện tại, có nghĩa là hàm có thể được gọi trước khi khai báo [xem chương này để biết thêm chi tiết]
Hàm đã tạo được đặt tên, có nghĩa là thuộc tính
3 của đối tượng hàm giữ tên của nó. Nó rất hữu ích khi xem ngăn xếp cuộc gọi. trong quá trình gỡ lỗi hoặc đọc thông báo lỗijavascript
function factorial[n] {
if [n === 0] {
return 1;
}
return n * factorial[n - 1];
}
factorial[4]; // => 24
Hãy xem các thuộc tính này trong một ví dụ
javascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
Khai báo hàm
4 tạo một biếnjavascript
function factorial[n] {
if [n === 0] {
return 1;
}
return n * factorial[n - 1];
}
factorial[4]; // => 24
5 được nâng lên đầu phạm vi hiện tại. Biếnjavascript
function factorial[n] {
if [n === 0] {
return 1;
}
return n * factorial[n - 1];
}
factorial[4]; // => 24
5 chứa đối tượng hàm và biếnjavascript
function factorial[n] {
if [n === 0] {
return 1;
}
return n * factorial[n - 1];
}
factorial[4]; // => 24
7 chứa tên hàm.javascript
function factorial[n] {
if [n === 0] {
return 1;
}
return n * factorial[n - 1];
}
factorial[4]; // => 24
8javascript
function factorial[n] {
if [n === 0] {
return 1;
}
return n * factorial[n - 1];
}
factorial[4]; // => 24
1. 1 Một chức năng thông thường
Khai báo hàm phù hợp với các trường hợp khi cần một hàm thông thường. Thông thường có nghĩa là bạn khai báo hàm một lần và sau đó gọi nó ở nhiều nơi khác nhau. Đây là kịch bản cơ bản
javascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
Bởi vì khai báo hàm tạo ra một biến trong phạm vi hiện tại, bên cạnh các lời gọi hàm thông thường, nó rất hữu ích cho các trình xử lý sự kiện đệ quy hoặc tách rời. Trái ngược với các biểu thức hàm hoặc hàm mũi tên, không tạo ràng buộc với biến hàm theo tên của nó
Ví dụ, để tính giai thừa đệ quy, bạn phải truy cập vào hàm bên trong
javascript
function factorial[n] {
if [n === 0] {
return 1;
}
return n * factorial[n - 1];
}
factorial[4]; // => 24
Bên trong
9, một cuộc gọi đệ quy đang được thực hiện bằng cách sử dụng biến chứa hàm.javascript
function factorial[n] {
if [n === 0] {
return 1;
}
return n * factorial[n - 1];
}
factorial[4]; // => 24
80javascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
Có thể sử dụng một biểu thức hàm và gán nó cho một biến thông thường, e. g.
81. Nhưng khai báo hàmjavascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
82 gọn nhẹ [không cầnjavascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
83 vàjavascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
84]javascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
Một thuộc tính quan trọng của khai báo hàm là cơ chế cẩu của nó. Nó cho phép sử dụng hàm trước khi khai báo trong cùng một phạm vi
Palăng rất hữu ích trong một số tình huống. Ví dụ: khi bạn muốn xem cách hàm được gọi ở đầu tập lệnh mà không cần đọc phần triển khai hàm. Việc triển khai chức năng có thể được đặt bên dưới trong tệp, vì vậy bạn thậm chí không thể cuộn ở đó
Bạn có thể đọc thêm chi tiết về khai báo hàm hois tại đây
1. 2 Sự khác biệt từ biểu thức chức năng
Dễ nhầm lẫn giữa khai báo hàm và biểu thức hàm. Chúng trông rất giống nhau nhưng tạo ra các hàm với các thuộc tính khác nhau
Một quy tắc dễ nhớ. khai báo hàm trong câu lệnh luôn bắt đầu bằng từ khóa
8. Mặt khác, nó là một biểu thức hàm [xem 2. ]javascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
Mẫu sau đây là một khai báo hàm trong đó câu lệnh bắt đầu bằng từ khóa
8javascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
8javascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
Trong trường hợp các biểu thức hàm, câu lệnh JavaScript không bắt đầu bằng từ khóa
8 [nó hiện diện ở đâu đó ở giữa mã câu lệnh]javascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
7javascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
1. 3 Khai báo hàm trong điều kiện
Một số môi trường JavaScript có thể gây ra lỗi tham chiếu khi gọi hàm có khai báo xuất hiện trong các khối
0 của câu lệnhjavascript
function factorial[n] {
if [n === 0] {
return 1;
}
return n * factorial[n - 1];
}
factorial[4]; // => 24
89,javascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
70 hoặcjavascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
71.javascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
Hãy kích hoạt chế độ nghiêm ngặt và xem điều gì sẽ xảy ra khi một hàm được khai báo trong điều kiện.
2javascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
Khi gọi
72, JavaScript ném rajavascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
73, vì khai báo hàm nằm trong một khối điều kiệnjavascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
Việc khai báo hàm trong điều kiện được cho phép ở chế độ không nghiêm ngặt, điều này càng khiến nó trở nên khó hiểu hơn
Theo quy tắc chung cho những tình huống này, khi một hàm nên được tạo theo điều kiện - hãy sử dụng biểu thức hàm. Hãy xem làm thế nào nó có thể
5javascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
Vì hàm là một đối tượng chính quy, nên gán nó cho một biến tùy thuộc vào điều kiện. Gọi
72 hoạt động tốt, không có lỗijavascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
2. biểu thức hàm
Một biểu thức hàm được xác định bởi một từ khóa
8, theo sau là một tên hàm tùy chọn, một danh sách các tham số trong một cặp dấu ngoặc đơnjavascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
9 và một cặp dấu ngoặc nhọnjavascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
77 để phân định mã cơ thểjavascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
Một số mẫu biểu thức hàm
0javascript
function factorial[n] {
if [n === 0] {
return 1;
}
return n * factorial[n - 1];
}
factorial[4]; // => 24
Biểu thức hàm tạo một đối tượng hàm có thể được sử dụng trong các tình huống khác nhau
- Được gán cho một biến như một đối tượng
78javascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
- Tạo một phương thức trên một đối tượng
79javascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
- Sử dụng chức năng như một cuộc gọi lại
20javascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
Biểu thức hàm là con ngựa làm việc trong JavaScript. Thông thường, bạn xử lý kiểu khai báo hàm này, bên cạnh hàm mũi tên [nếu bạn thích cú pháp ngắn và ngữ cảnh từ vựng]
2. 1 Biểu thức hàm được đặt tên
Một hàm ẩn danh khi nó không có tên [thuộc tính ______43 là một chuỗi rỗng
22]javascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
6javascript
function factorial[n] {
if [n === 0] {
return 1;
}
return n * factorial[n - 1];
}
factorial[4]; // => 24
Đây là một hàm ẩn danh, tên là một chuỗi rỗng
Đôi khi tên hàm có thể được suy ra. Ví dụ: khi ẩn danh được gán cho một biến
0javascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
Tên hàm ẩn danh là
23, vì tên biếnjavascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
24 được sử dụng để suy ra tên hàmjavascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
Khi biểu thức có tên được chỉ định, đây là biểu thức hàm được đặt tên. Nó có một số thuộc tính bổ sung so với biểu thức hàm đơn giản
- Một chức năng được đặt tên được tạo ra, tôi. e. Thuộc tính
3 giữ tên hàmjavascript
function factorial[n] {
if [n === 0] {
return 1;
}
return n * factorial[n - 1];
}
factorial[4]; // => 24
- Bên trong thân hàm, một biến có cùng tên giữ đối tượng hàm
Hãy sử dụng ví dụ trên, nhưng đặt tên trong biểu thức hàm
1javascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
26 là một biểu thức hàm được đặt tên. Biếnjavascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
27 có thể truy cập trong phạm vi chức năng, nhưng không thể truy cập bên ngoài. Dù bằng cách nào, thuộc tínhjavascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
3 của đối tượng hàm giữ tên.javascript
function factorial[n] {
if [n === 0] {
return 1;
}
return n * factorial[n - 1];
}
factorial[4]; // => 24
27javascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
2. 2 Biểu thức hàm được ưu tiên đặt tên
Khi một biểu thức hàm
50 được gán cho một biến, một số công cụ sẽ suy ra tên hàm từ biến này. Tuy nhiên, các cuộc gọi lại có thể được chuyển dưới dạng các biểu thức hàm ẩn danh mà không cần lưu trữ vào các biến. vì vậy động cơ không thể xác định tên của nójavascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
Điều hợp lý là ưu tiên các chức năng được đặt tên và tránh các chức năng ẩn danh để đạt được các lợi ích như
- Thông báo lỗi và ngăn xếp cuộc gọi hiển thị thông tin chi tiết hơn khi sử dụng tên hàm
- Gỡ lỗi thoải mái hơn bằng cách giảm số lượng tên ngăn xếp ẩn danh
- Tên hàm cho biết hàm làm gì
- Bạn có thể truy cập chức năng bên trong phạm vi của nó để gọi đệ quy hoặc tách trình nghe sự kiện
3. định nghĩa phương pháp tốc ký
Định nghĩa phương thức tốc ký có thể được sử dụng trong khai báo phương thức trên các đối tượng bằng chữ và các lớp ES2015. Bạn có thể định nghĩa chúng bằng cách sử dụng tên hàm, theo sau là danh sách các tham số trong một cặp dấu ngoặc đơn
9 và một cặp dấu ngoặc nhọnjavascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
77 để phân định các câu lệnh nội dungjavascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
Ví dụ sau sử dụng định nghĩa phương thức tốc ký trong một đối tượng bằng chữ
2javascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
Các phương thức
53 vàjavascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
54 trong đối tượngjavascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
55 được định nghĩa bằng cách sử dụng định nghĩa phương thức ngắn. Các phương pháp này được gọi như bình thường.javascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
56 vàjavascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
57javascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
Cách tiếp cận ngắn gọn của định nghĩa phương thức có một số lợi ích so với định nghĩa thuộc tính truyền thống với tên, dấu hai chấm
58 và biểu thức hàmjavascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
59javascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
- Cú pháp ngắn hơn dễ hiểu hơn
- Định nghĩa phương thức tốc ký tạo ra một hàm được đặt tên, trái ngược với một biểu thức hàm. Nó rất hữu ích để gỡ lỗi
Cú pháp
00 yêu cầu khai báo phương thức ở dạng ngắnjavascript
function factorial[n] {
if [n === 0] {
return 1;
}
return n * factorial[n - 1];
}
factorial[4]; // => 24
3javascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
3. 1 Tên và phương thức thuộc tính được tính toán
ECMAScript 2015 thêm một tính năng hay. tên thuộc tính được tính toán theo nghĩa đen và lớp đối tượng.
Các thuộc tính được tính toán sử dụng một cú pháp hơi khác
01, vì vậy định nghĩa phương thức sẽ giống như thế này.javascript
function factorial[n] {
if [n === 0] {
return 1;
}
return n * factorial[n - 1];
}
factorial[4]; // => 24
4javascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
02 vàjavascript
function factorial[n] {
if [n === 0] {
return 1;
}
return n * factorial[n - 1];
}
factorial[4]; // => 24
03 là các khai báo phương thức tốc ký với tên thuộc tính được tính toánjavascript
function factorial[n] {
if [n === 0] {
return 1;
}
return n * factorial[n - 1];
}
factorial[4]; // => 24
4. chức năng mũi tên
Một hàm mũi tên được xác định bằng cách sử dụng một cặp dấu ngoặc đơn chứa danh sách các tham số
04, theo sau là một mũi tên béojavascript
function factorial[n] {
if [n === 0] {
return 1;
}
return n * factorial[n - 1];
}
factorial[4]; // => 24
05 và một cặp dấu ngoặc nhọnjavascript
function factorial[n] {
if [n === 0] {
return 1;
}
return n * factorial[n - 1];
}
factorial[4]; // => 24
0 để phân định các câu lệnh nội dungjavascript
function factorial[n] {
if [n === 0] {
return 1;
}
return n * factorial[n - 1];
}
factorial[4]; // => 24
Khi hàm mũi tên chỉ có một tham số, có thể bỏ qua cặp dấu ngoặc đơn. Khi nó chứa một câu lệnh đơn, dấu ngoặc nhọn cũng có thể được bỏ qua
Hãy xem chức năng mũi tên sử dụng cơ bản
5javascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
07 là một hàm mũi tên tính giá trị tuyệt đối của một sốjavascript
function factorial[n] {
if [n === 0] {
return 1;
}
return n * factorial[n - 1];
}
factorial[4]; // => 24
Hàm được khai báo bằng mũi tên béo có các thuộc tính sau
- Hàm mũi tên không tạo bối cảnh thực thi của nó, nhưng sử dụng nó theo từ vựng [trái ngược với biểu thức hàm hoặc khai báo hàm, tạo ra
6 riêng tùy thuộc vào lệnh gọi]javascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
- Chức năng mũi tên là ẩn danh. Tuy nhiên, động cơ có thể suy ra tên của nó từ biến giữ chức năng
- Đối tượng
7 không có sẵn trong hàm mũi tên [trái ngược với các kiểu khai báo khác cung cấp đối tượngjavascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
7]. Tuy nhiên, bạn có thể tự do sử dụng các tham số còn lạijavascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
61javascript
function factorial[n] {
if [n === 0] {
return 1;
}
return n * factorial[n - 1];
}
factorial[4]; // => 24
4. 1 Minh bạch bối cảnh
6 từ khóa là một khía cạnh khó hiểu của JavaScript [xem bài viết này để biết giải thích chi tiết vềjavascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
6].javascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
Vì hàm tạo ngữ cảnh thực thi riêng nên thường khó phát hiện giá trị
6.javascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
ECMAScript 2015 cải thiện việc sử dụng
6 bằng cách giới thiệu chức năng mũi tên, lấy ngữ cảnh theo từ vựng [hoặc đơn giản là sử dụngjavascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
6 từ phạm vi bên ngoài ngay lập tức]. Điều này thật tuyệt vì bạn không phải sử dụngjavascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
67 hoặc lưu trữ ngữ cảnhjavascript
function factorial[n] {
if [n === 0] {
return 1;
}
return n * factorial[n - 1];
}
factorial[4]; // => 24
68 khi một hàm cần ngữ cảnh kèm theojavascript
function factorial[n] {
if [n === 0] {
return 1;
}
return n * factorial[n - 1];
}
factorial[4]; // => 24
Hãy xem cách
6 được kế thừa từ hàm bên ngoàijavascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
6javascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
____900 lớp chứa một mảng các số và cung cấp một phương thức
01 để chèn các số mới.javascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
Khi
01 được gọi mà không có đối số, một bao đóng được trả về cho phép chèn số. Bao đóng này là một hàm mũi tên cójavascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
6 là đối tượngjavascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
04 vì ngữ cảnh được lấy từ vựng từ phương thứcjavascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
05.javascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
Không có chức năng mũi tên, bạn phải tự sửa ngữ cảnh. Nó có nghĩa là sử dụng cách giải quyết như phương pháp
06javascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
7javascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
hoặc lưu ngữ cảnh vào một biến riêng biệt
68javascript
function factorial[n] {
if [n === 0] {
return 1;
}
return n * factorial[n - 1];
}
factorial[4]; // => 24
8javascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
Độ trong suốt của ngữ cảnh có thể được sử dụng khi bạn muốn giữ nguyên
6, được lấy từ ngữ cảnh kèm theojavascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
4. 2 cuộc gọi lại ngắn
Khi tạo một hàm mũi tên, các cặp dấu ngoặc đơn và dấu ngoặc nhọn là tùy chọn cho một tham số và câu lệnh nội dung đơn. Điều này giúp tạo các chức năng gọi lại rất ngắn
Hãy tạo một hàm tìm xem một mảng có chứa
09 hay khôngjavascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
9javascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
10 là một chức năng mũi tên trông đơn giảnjavascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
Lưu ý rằng các hàm mũi tên ngắn lồng nhau rất khó đọc. Cách thuận tiện để sử dụng biểu mẫu hàm mũi tên ngắn nhất là gọi lại một lần [không lồng nhau]
Nếu cần, hãy sử dụng cú pháp mở rộng của các hàm mũi tên khi viết các hàm mũi tên lồng nhau. Nó chỉ dễ đọc hơn
5. Chức năng máy phát điện
Hàm trình tạo trong JavaScript trả về một đối tượng Trình tạo. Cú pháp của nó tương tự như biểu thức hàm, khai báo hàm hay khai báo phương thức, chỉ khác là nó yêu cầu ký tự sao
11javascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
Hàm tạo có thể được khai báo theo các dạng sau
a. Mẫu khai báo hàm
12javascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
0javascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
b. dạng biểu thức hàm
13javascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
1javascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
c. Biểu mẫu định nghĩa phương pháp tốc ký
14javascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
2javascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
Trong cả 3 trường hợp, hàm tạo trả về đối tượng trình tạo
15. Sau nàyjavascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
15 được sử dụng để tạo ra một dãy số tăng dầnjavascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
6. Một điều nữa. chức năng mới
Trong JavaScript, hàm là đối tượng hạng nhất - hàm là đối tượng thông thường thuộc loại
8.javascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
Các cách khai báo được mô tả ở trên tạo ra cùng một kiểu đối tượng hàm. Hãy xem một ví dụ.
3javascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
Kiểu đối tượng hàm có hàm tạo.
18.javascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
Khi
18 được gọi như một hàm tạojavascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
20, một hàm mới được tạo. Các đối sốjavascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
21 được truyền cho hàm tạo trở thành tên tham số cho hàm mới và đối số cuối cùngjavascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
22 được sử dụng làm mã thân hàm.javascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
Hãy tạo một hàm tính tổng hai số
4javascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
23 được tạo bằng lời gọi hàm tạojavascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
18 có các tham sốjavascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
25 vàjavascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
26 và phần thânjavascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
27javascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
Các chức năng được tạo theo cách này không có quyền truy cập vào phạm vi hiện tại, do đó không thể tạo các bao đóng. Chúng luôn được tạo trong phạm vi toàn cầu
Một ứng dụng có thể có của
28 là cách tốt hơn để truy cập đối tượng toàn cầu trong trình duyệt hoặc tập lệnh NodeJSjavascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
5javascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
Hãy nhớ rằng các chức năng hầu như không bao giờ nên được khai báo bằng cách sử dụng
29. Bởi vì thân hàm được đánh giá trong thời gian chạy, cách tiếp cận này kế thừa nhiều vấn đề sử dụngjavascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
30. rủi ro bảo mật, gỡ lỗi khó hơn, không có cách nào để áp dụng tối ưu hóa công cụ, không có trình chỉnh sửa tự động hoàn thànhjavascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
7. Cuối cùng, cách nào tốt hơn?
Không có người chiến thắng hay kẻ thua cuộc. Quyết định chọn loại khai báo nào tùy thuộc vào tình huống
Tuy nhiên, có một số quy tắc mà bạn có thể tuân theo trong các tình huống thông thường
Nếu chức năng sử dụng
6 từ chức năng kèm theo, chức năng mũi tên là một giải pháp tốt. Khi chức năng gọi lại có một câu lệnh ngắn, chức năng mũi tên cũng là một lựa chọn tốt, bởi vì nó tạo ra mã ngắn và nhẹjavascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
Đối với một cú pháp ngắn hơn khi khai báo các phương thức trên các ký tự đối tượng, nên sử dụng khai báo phương thức tốc ký
28 cách khai báo hàm thông thường không nên dùng. Chủ yếu là vì nó mở ra những rủi ro bảo mật tiềm ẩn, không cho phép mã tự động hoàn thành trong trình chỉnh sửa và mất khả năng tối ưu hóa công cụjavascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
Bạn thích hàm mũi tên hay biểu thức hàm hơn?
Thích bài viết?
Bài đăng chất lượng vào hộp thư đến của bạn
Tôi thường xuyên xuất bản bài viết có chứa
- Các khái niệm JavaScript quan trọng được giải thích bằng các từ đơn giản
- Tổng quan về các tính năng JavaScript mới
- Cách sử dụng TypeScript và cách gõ
- Thiết kế phần mềm và thực hành mã hóa tốt
Đăng ký nhận bản tin của tôi để nhận chúng ngay trong hộp thư đến của bạn
Đặt muaTham gia cùng 6719 người đăng ký khác
Giới thiệu về Dmitri Pavlutin
Nhà văn và huấn luyện viên công nghệ. Thói quen hàng ngày của tôi bao gồm [nhưng không giới hạn] uống cà phê, viết mã, viết, huấn luyện, vượt qua sự nhàm chán 😉