Hàm là một nhóm mã có thể tái sử dụng có thể được gọi ở bất kỳ đâu trong chương trình của bạn. Điều này giúp loại bỏ nhu cầu viết đi viết lại cùng một mã. Nó giúp các lập trình viên viết mã mô-đun. Các hàm cho phép lập trình viên chia một chương trình lớn thành một số hàm nhỏ và có thể quản lý được
Giống như bất kỳ ngôn ngữ lập trình nâng cao nào khác, JavaScript cũng hỗ trợ tất cả các tính năng cần thiết để viết mã mô-đun bằng các hàm. Chắc hẳn bạn đã thấy các hàm như alert() và write() trong các chương trước. Chúng tôi đã sử dụng đi sử dụng lại các chức năng này, nhưng chúng chỉ được viết bằng JavaScript lõi một lần
JavaScript cũng cho phép chúng ta viết các hàm của riêng mình. Phần này giải thích cách viết các hàm của riêng bạn trong JavaScript
Định nghĩa hàm
Trước khi sử dụng một hàm, chúng ta cần định nghĩa nó. Cách phổ biến nhất để xác định hàm trong JavaScript là sử dụng từ khóa hàm, theo sau là tên hàm duy nhất, danh sách tham số (có thể trống) và khối câu lệnh được bao quanh bởi dấu ngoặc nhọn
cú pháp
Cú pháp cơ bản được hiển thị ở đây
Ví dụ
Hãy thử ví dụ sau. Nó định nghĩa một hàm gọi là sayHello không có tham số nào -
Gọi một chức năng
Để gọi một hàm ở đâu đó sau này trong tập lệnh, bạn chỉ cần viết tên của hàm đó như được hiển thị trong đoạn mã sau
Click the following button to call the function
Use different text in write method and then try...
đầu ra
Thông số chức năng
Cho đến bây giờ, chúng ta đã thấy các chức năng không có tham số. Nhưng có một cơ sở để truyền các tham số khác nhau trong khi gọi một hàm. Các tham số đã truyền này có thể được ghi lại bên trong hàm và mọi thao tác có thể được thực hiện trên các tham số đó. Một hàm có thể nhận nhiều tham số được phân tách bằng dấu phẩy
Ví dụ
Hãy thử ví dụ sau. Chúng tôi đã sửa đổi chức năng sayHello của mình tại đây. Bây giờ phải mất hai tham số
Click the following button to call the function
Use different parameters inside the function and then try...
đầu ra
Tuyên bố trở lại
Hàm JavaScript có thể có câu lệnh trả về tùy chọn. Điều này là bắt buộc nếu bạn muốn trả về một giá trị từ một hàm. Câu lệnh này phải là câu lệnh cuối cùng trong một hàm
Ví dụ: bạn có thể chuyển hai số vào một hàm và sau đó bạn có thể mong đợi hàm trả về phép nhân của chúng trong chương trình gọi của bạn
Ví dụ
Hãy thử ví dụ sau. Nó định nghĩa một hàm nhận hai tham số và nối chúng trước khi trả về kết quả trong chương trình gọi
Click the following button to call the function
Use different parameters inside the function and then try...
đầu ra
Có rất nhiều điều để tìm hiểu về các hàm JavaScript, tuy nhiên chúng tôi đã đề cập đến các khái niệm quan trọng nhất trong hướng dẫn này
Các hàm JavaScript được sử dụng để thực hiện các thao tác. Chúng ta có thể gọi hàm JavaScript nhiều lần để sử dụng lại mã
Lợi thế của chức năng JavaScript
Có hai ưu điểm chính của các hàm JavaScript
- khả năng tái sử dụng mã. Chúng ta có thể gọi một chức năng nhiều lần để nó tiết kiệm mã hóa
- Ít mã hóa hơn. Nó làm cho chương trình của chúng tôi nhỏ gọn. Chúng ta không cần phải viết nhiều dòng mã mỗi lần để thực hiện một tác vụ chung
Cú pháp hàm JavaScript
Cú pháp khai báo hàm được đưa ra dưới đây
Hàm JavaScript có thể có 0 hoặc nhiều đối số
Ví dụ hàm JavaScript
Hãy xem ví dụ đơn giản về hàm trong JavaScript không có đối số
Kiểm tra nó ngay bây giờĐầu ra của ví dụ trên
Đối số chức năng JavaScript
Chúng ta có thể gọi hàm bằng cách truyền đối số. Hãy xem ví dụ về hàm có một đối số
Kiểm tra nó ngay bây giờĐầu ra của ví dụ trên
Hàm có giá trị trả về
Chúng ta có thể gọi hàm trả về một giá trị và sử dụng nó trong chương trình của mình. Hãy xem ví dụ về hàm trả về giá trị
Kiểm tra nó ngay bây giờĐầu ra của ví dụ trên
Đối tượng hàm JavaScript
Trong JavaScript, mục đích của hàm tạo Hàm là tạo một đối tượng Hàm mới. Nó thực thi mã trên toàn cầu. Tuy nhiên, nếu chúng ta gọi trực tiếp hàm tạo, hàm sẽ được tạo động nhưng theo cách không an toàn
Ví dụ: chúng tôi cần hiển thị một thông báo đẹp mắt khi khách đăng nhập, đăng xuất và có thể ở một nơi khác
Hàm là “khối xây dựng” chính của chương trình. Chúng cho phép mã được gọi nhiều lần mà không cần lặp lại
Chúng ta đã thấy các ví dụ về hàm dựng sẵn, như function showMessage() { let message = "Hello, I'm JavaScript!"; // local variable alert( message ); } showMessage(); // Hello, I'm JavaScript! alert( message ); // <-- Error! The variable is local to the function0, function showMessage() { let message = "Hello, I'm JavaScript!"; // local variable alert( message ); } showMessage(); // Hello, I'm JavaScript! alert( message ); // <-- Error! The variable is local to the function1 và function showMessage() { let message = "Hello, I'm JavaScript!"; // local variable alert( message ); } showMessage(); // Hello, I'm JavaScript! alert( message ); // <-- Error! The variable is local to the function2. Nhưng chúng ta cũng có thể tạo các chức năng của riêng mình
Khai báo hàm
Để tạo một hàm chúng ta có thể sử dụng khai báo hàm
Nó trông như thế này
________số 8
Từ khóa function showMessage() { let message = "Hello, I'm JavaScript!"; // local variable alert( message ); } showMessage(); // Hello, I'm JavaScript! alert( message ); // <-- Error! The variable is local to the function3 đi trước, sau đó đến tên của hàm, sau đó là danh sách các tham số giữa các dấu ngoặc đơn (được phân tách bằng dấu phẩy, để trống trong ví dụ trên, chúng ta sẽ xem các ví dụ sau) và cuối cùng là mã của hàm, cũng được đặt tên
0
Chức năng mới của chúng tôi có thể được gọi bằng tên của nó. function showMessage() { let message = "Hello, I'm JavaScript!"; // local variable alert( message ); } showMessage(); // Hello, I'm JavaScript! alert( message ); // <-- Error! The variable is local to the function4
Ví dụ
2
Cuộc gọi function showMessage() { let message = "Hello, I'm JavaScript!"; // local variable alert( message ); } showMessage(); // Hello, I'm JavaScript! alert( message ); // <-- Error! The variable is local to the function4 thực thi mã của chức năng. Ở đây chúng ta sẽ thấy thông báo hai lần
Ví dụ này thể hiện rõ ràng một trong những mục đích chính của hàm. để tránh sao chép mã
Nếu chúng tôi cần thay đổi thông báo hoặc cách hiển thị thông báo, chỉ cần sửa đổi mã ở một nơi là đủ. chức năng xuất ra nó
Biến cục bộ
Một biến được khai báo bên trong một hàm chỉ hiển thị bên trong hàm đó
Ví dụ
function showMessage() { let message = "Hello, I'm JavaScript!"; // local variable alert( message ); } showMessage(); // Hello, I'm JavaScript! alert( message ); // <-- Error! The variable is local to the function
biến bên ngoài
Một chức năng cũng có thể truy cập vào một biến bên ngoài, ví dụ
5
Hàm có toàn quyền truy cập vào biến bên ngoài. Nó cũng có thể sửa đổi nó
Ví dụ
6
Biến bên ngoài chỉ được sử dụng nếu không có biến cục bộ
Nếu một biến cùng tên được khai báo bên trong hàm thì nó sẽ che khuất biến bên ngoài. Chẳng hạn, trong mã bên dưới, hàm sử dụng function showMessage() { let message = "Hello, I'm JavaScript!"; // local variable alert( message ); } showMessage(); // Hello, I'm JavaScript! alert( message ); // <-- Error! The variable is local to the function6 cục bộ. Cái bên ngoài bị bỏ qua
8
biến toàn cầu
Các biến được khai báo bên ngoài bất kỳ chức năng nào, chẳng hạn như bên ngoài function showMessage() { let message = "Hello, I'm JavaScript!"; // local variable alert( message ); } showMessage(); // Hello, I'm JavaScript! alert( message ); // <-- Error! The variable is local to the function6 trong đoạn mã trên, được gọi là toàn cục
Các biến toàn cục có thể nhìn thấy từ bất kỳ chức năng nào (trừ khi bị che khuất bởi người dân địa phương)
Đó là một cách thực hành tốt để giảm thiểu việc sử dụng các biến toàn cầu. Mã hiện đại có ít hoặc không có toàn cầu. Hầu hết các biến nằm trong các hàm của chúng. Tuy nhiên, đôi khi, chúng có thể hữu ích để lưu trữ dữ liệu cấp dự án
Thông số
Chúng ta có thể truyền dữ liệu tùy ý cho các hàm bằng cách sử dụng các tham số
Trong ví dụ bên dưới, hàm có hai tham số. function showMessage() { let message = "Hello, I'm JavaScript!"; // local variable alert( message ); } showMessage(); // Hello, I'm JavaScript! alert( message ); // <-- Error! The variable is local to the function8 và function showMessage() { let message = "Hello, I'm JavaScript!"; // local variable alert( message ); } showMessage(); // Hello, I'm JavaScript! alert( message ); // <-- Error! The variable is local to the function9
Click the following button to call the function
Use different text in write method and then try...
2Khi hàm được gọi ở các dòng 50 và 51, các giá trị đã cho sẽ được sao chép vào các biến cục bộ function showMessage() { let message = "Hello, I'm JavaScript!"; // local variable alert( message ); } showMessage(); // Hello, I'm JavaScript! alert( message ); // <-- Error! The variable is local to the function8 và function showMessage() { let message = "Hello, I'm JavaScript!"; // local variable alert( message ); } showMessage(); // Hello, I'm JavaScript! alert( message ); // <-- Error! The variable is local to the function9. Sau đó, chức năng sử dụng chúng
Đây là một ví dụ nữa. chúng ta có một biến function showMessage() { let message = "Hello, I'm JavaScript!"; // local variable alert( message ); } showMessage(); // Hello, I'm JavaScript! alert( message ); // <-- Error! The variable is local to the function8 và truyền nó cho hàm. Xin lưu ý. chức năng thay đổi function showMessage() { let message = "Hello, I'm JavaScript!"; // local variable alert( message ); } showMessage(); // Hello, I'm JavaScript! alert( message ); // <-- Error! The variable is local to the function8, nhưng sự thay đổi không được nhìn thấy bên ngoài, bởi vì một chức năng luôn nhận được một bản sao của giá trị
Click the following button to call the function
Use different text in write method and then try...
9Khi một giá trị được truyền dưới dạng tham số hàm, nó còn được gọi là đối số
Nói cách khác, để đặt các điều khoản này thẳng
- Tham số là biến được liệt kê bên trong dấu ngoặc đơn trong phần khai báo hàm (đó là thuật ngữ thời gian khai báo)
- Đối số là giá trị được truyền cho hàm khi nó được gọi (đó là thuật ngữ thời gian gọi)
Chúng tôi khai báo các hàm liệt kê các tham số của chúng, sau đó gọi chúng là các đối số truyền
Trong ví dụ trên, người ta có thể nói. "hàm 56 được khai báo với hai tham số, sau đó được gọi với hai đối số. function showMessage() { let message = "Hello, I'm JavaScript!"; // local variable alert( message ); } showMessage(); // Hello, I'm JavaScript! alert( message ); // <-- Error! The variable is local to the function8 và 58"
Giá trị mặc định
Nếu một hàm được gọi, nhưng không cung cấp đối số, thì giá trị tương ứng sẽ trở thành 59
Chẳng hạn, hàm 60 đã nói ở trên có thể được gọi bằng một đối số duy nhất
Click the following button to call the function
Use different parameters inside the function and then try...
5Đó không phải là lỗi. Một cuộc gọi như vậy sẽ xuất ra 61. Vì giá trị của function showMessage() { let message = "Hello, I'm JavaScript!"; // local variable alert( message ); } showMessage(); // Hello, I'm JavaScript! alert( message ); // <-- Error! The variable is local to the function9 không được chuyển, nó sẽ trở thành 59
Chúng ta có thể chỉ định cái gọi là giá trị “mặc định” (để sử dụng nếu bị bỏ qua) cho một tham số trong khai báo hàm, sử dụng 64
00
Lúc này nếu không truyền tham số function showMessage() { let message = "Hello, I'm JavaScript!"; // local variable alert( message ); } showMessage(); // Hello, I'm JavaScript! alert( message ); // <-- Error! The variable is local to the function9 thì nó sẽ nhận giá trị là 66
Giá trị mặc định cũng nhảy vào nếu tham số tồn tại, nhưng hoàn toàn bằng 59, như thế này
01
Ở đây 66 là một chuỗi, nhưng nó có thể là một biểu thức phức tạp hơn, chỉ được đánh giá và gán nếu thiếu tham số. Vì vậy, điều này cũng có thể
02
Đánh giá các tham số mặc định
Trong JavaScript, một tham số mặc định được đánh giá mỗi khi hàm được gọi mà không có tham số tương ứng
Trong ví dụ trên, 69 hoàn toàn không được gọi nếu tham số function showMessage() { let message = "Hello, I'm JavaScript!"; // local variable alert( message ); } showMessage(); // Hello, I'm JavaScript! alert( message ); // <-- Error! The variable is local to the function9 được cung cấp
Mặt khác, nó được gọi độc lập mỗi khi thiếu function showMessage() { let message = "Hello, I'm JavaScript!"; // local variable alert( message ); } showMessage(); // Hello, I'm JavaScript! alert( message ); // <-- Error! The variable is local to the function9
Tham số mặc định trong mã JavaScript cũ
Vài năm trước, JavaScript không hỗ trợ cú pháp cho các tham số mặc định. Vì vậy, mọi người đã sử dụng những cách khác để chỉ định chúng
Ngày nay, chúng ta có thể bắt gặp chúng trong các chữ viết cũ
Ví dụ: kiểm tra rõ ràng cho 59
03
…Hoặc sử dụng toán tử 83
04
Thông số mặc định thay thế
Đôi khi, việc gán các giá trị mặc định cho các tham số ở giai đoạn sau sau khi khai báo hàm là hợp lý
Chúng ta có thể kiểm tra xem tham số có được truyền vào trong quá trình thực thi hàm hay không bằng cách so sánh nó với 59
05
…Hoặc chúng ta có thể sử dụng toán tử 83
06
Các công cụ JavaScript hiện đại hỗ trợ toán tử kết hợp nullish 86, sẽ tốt hơn khi hầu hết các giá trị giả, chẳng hạn như 87, nên được coi là "bình thường"
07
Trả về một giá trị
Kết quả là một hàm có thể trả lại một giá trị vào mã gọi
Ví dụ đơn giản nhất sẽ là một hàm tính tổng hai giá trị
08
Chỉ thị 88 có thể ở bất kỳ vị trí nào của chức năng. Khi thực thi đạt đến mức đó, hàm sẽ dừng và giá trị được trả về mã gọi (được gán cho 89 ở trên)
Có thể có nhiều lần xuất hiện của 88 trong một chức năng. Ví dụ
09
Có thể sử dụng 88 mà không cần giá trị. Điều đó khiến chức năng thoát ngay lập tức
Ví dụ
20
Trong đoạn mã trên, nếu
Click the following button to call the function
Use different text in write method and then try...
22 trả vềClick the following button to call the function
Use different text in write method and then try...
23, thìClick the following button to call the function
Use different text in write method and then try...
24 sẽ không tiếp tục vớiClick the following button to call the function
Use different text in write method and then try...
25Hàm có giá trị trống 88 hoặc không có giá trị trả về 59
Nếu một hàm không trả về giá trị, nó giống như khi nó trả về 59
21
Một 88 trống cũng giống như
Click the following button to call the function
Use different text in write method and then try...
9022
Không bao giờ thêm một dòng mới giữa 88 và giá trị
Đối với một biểu thức dài trong 88, có thể bạn nên đặt nó trên một dòng riêng, như thế này
23
Điều đó không hiệu quả, bởi vì JavaScript giả định một dấu chấm phẩy sau 88. Điều đó sẽ hoạt động giống như
24
Vì vậy, nó thực sự trở thành một khoản hoàn trả trống
Nếu chúng ta muốn biểu thức được trả về ngắt dòng trên nhiều dòng, chúng ta nên bắt đầu nó ở cùng một dòng với 88. Hoặc ít nhất là đặt dấu ngoặc đơn mở ở đó như sau
25
Và nó sẽ hoạt động đúng như chúng ta mong đợi
Đặt tên cho một chức năng
Chức năng là hành động. Vì vậy, tên của họ thường là một động từ. Nó phải ngắn gọn, càng chính xác càng tốt và mô tả những gì chức năng làm, để ai đó đọc mã sẽ nhận được dấu hiệu về những gì chức năng làm
Đó là một thực tế phổ biến để bắt đầu một chức năng với tiền tố bằng lời mô tả một cách mơ hồ hành động. Phải có một thỏa thuận trong nhóm về ý nghĩa của các tiền tố
Chẳng hạn, các hàm bắt đầu bằng
Click the following button to call the function
Use different text in write method and then try...
95 thường hiển thị nội dung nào đóHàm bắt đầu bằng…
-
Click the following button to call the function
Use different text in write method and then try...
96 – trả về một giá trị, -
Click the following button to call the function
Use different text in write method and then try...
97 – tính toán gì đó, -
Click the following button to call the function
Use different text in write method and then try...
98 – tạo ra thứ gì đó, -
Click the following button to call the function
Use different text in write method and then try...
99 – kiểm tra thứ gì đó và trả về giá trị boolean, v.v.
Ví dụ về những cái tên như vậy
26
Với các tiền tố sẵn có, chỉ cần nhìn lướt qua tên hàm là bạn có thể hiểu loại công việc của nó và loại giá trị mà nó trả về
Một chức năng – một hành động
Một chức năng nên thực hiện chính xác những gì được đề xuất bởi tên của nó, không hơn
Hai hành động độc lập thường xứng đáng với hai hàm, ngay cả khi chúng thường được gọi cùng nhau (trong trường hợp đó, chúng ta có thể tạo hàm thứ 3 gọi hai hàm đó)
Một vài ví dụ về việc phá vỡ quy tắc này
-
Click the following button to call the function
Use different parameters inside the function and then try...
50 – sẽ rất tệ nếu nó hiển thịClick the following button to call the function
Use different text in write method and then try...
25 cùng với tuổi (chỉ nên lấy) -
Click the following button to call the function
Use different parameters inside the function and then try...
52 – sẽ rất tệ nếu nó sửa đổi tài liệu, thêm biểu mẫu vào tài liệu (chỉ nên tạo và trả lại) -
Click the following button to call the function
Use different parameters inside the function and then try...
53 – sẽ rất tệ nếu nó hiển thị thông báoClick the following button to call the function
Use different parameters inside the function and then try...
54 (chỉ nên thực hiện kiểm tra và trả về kết quả)
Những ví dụ này giả định ý nghĩa phổ biến của tiền tố. Bạn và nhóm của bạn có thể tự do đồng ý về các ý nghĩa khác, nhưng thường thì chúng không khác nhau nhiều. Trong bất kỳ trường hợp nào, bạn nên hiểu rõ tiền tố nghĩa là gì, chức năng tiền tố có thể và không thể làm gì. Tất cả các hàm có tiền tố giống nhau phải tuân theo các quy tắc. Và nhóm nên chia sẻ kiến thức
Tên chức năng siêu ngắn
Các chức năng được sử dụng rất thường xuyên đôi khi có tên siêu ngắn
Ví dụ: khung công tác jQuery định nghĩa một hàm với
Click the following button to call the function
Use different parameters inside the function and then try...
55. Thư viện Lodash có chức năng cốt lõi tên làClick the following button to call the function
Use different parameters inside the function and then try...
56Đây là những trường hợp ngoại lệ. Nói chung tên chức năng phải ngắn gọn và mô tả
Chức năng == Nhận xét
Các chức năng phải ngắn gọn và thực hiện chính xác một việc. Nếu thứ đó lớn, có lẽ nên chia chức năng thành một vài chức năng nhỏ hơn. Đôi khi tuân theo quy tắc này có thể không dễ dàng, nhưng đó chắc chắn là một điều tốt
Một chức năng riêng biệt không chỉ dễ kiểm tra và gỡ lỗi hơn – chính sự tồn tại của nó là một nhận xét tuyệt vời
Chẳng hạn, so sánh hai hàm
Click the following button to call the function
Use different parameters inside the function and then try...
57 bên dưới. Mỗi cái xuất ra các số nguyên tố lên tớiClick the following button to call the function
Use different parameters inside the function and then try...
58Biến thể đầu tiên sử dụng nhãn
27
Biến thể thứ hai sử dụng hàm bổ sung
Click the following button to call the function
Use different parameters inside the function and then try...
59 để kiểm tra tính nguyên tố28
Biến thể thứ hai dễ hiểu hơn phải không? . Đôi khi mọi người coi mã như vậy là tự mô tả
Vì vậy, các chức năng có thể được tạo ngay cả khi chúng tôi không có ý định sử dụng lại chúng. Họ cấu trúc mã và làm cho mã có thể đọc được
Tóm lược
Một khai báo chức năng trông như thế này
29
- Các giá trị được chuyển đến một hàm dưới dạng các tham số được sao chép vào các biến cục bộ của nó
- Một chức năng có thể truy cập các biến bên ngoài. Nhưng nó chỉ hoạt động từ trong ra ngoài. Mã bên ngoài chức năng không nhìn thấy các biến cục bộ của nó
- Một hàm có thể trả về một giá trị. Nếu không, thì kết quả của nó là 59
Để làm cho mã rõ ràng và dễ hiểu, bạn nên sử dụng chủ yếu các biến cục bộ và tham số trong hàm, không phải các biến bên ngoài
Việc hiểu một hàm nhận tham số, làm việc với chúng và trả về kết quả luôn dễ dàng hơn một hàm không nhận tham số, nhưng sửa đổi các biến bên ngoài như một tác dụng phụ
đặt tên hàm
- Một cái tên nên mô tả rõ ràng những gì chức năng làm. Khi chúng ta thấy một lời gọi hàm trong mã, một cái tên hay sẽ ngay lập tức cho chúng ta hiểu nó làm gì và trả về
- Một chức năng là một hành động, vì vậy tên chức năng thường bằng lời nói
- Có nhiều tiền tố chức năng nổi tiếng như 002, 003, 004, 005, v.v. Sử dụng chúng để gợi ý những gì một chức năng làm
Hàm là khối xây dựng chính của tập lệnh. Bây giờ chúng tôi đã đề cập đến những điều cơ bản, vì vậy chúng tôi thực sự có thể bắt đầu tạo và sử dụng chúng. Nhưng đó mới chỉ là khởi đầu của con đường. Chúng tôi sẽ quay lại với chúng nhiều lần, đi sâu hơn vào các tính năng nâng cao của chúng