Hàm JavaScript được xác định bằng từ khóa
const myFunction = function [] {
statements
}
17, theo sau là tên, theo sau là dấu ngoặc đơn []Tên hàm có thể chứa các chữ cái, chữ số, dấu gạch dưới và ký hiệu đô la [quy tắc giống như biến]
Dấu ngoặc đơn có thể bao gồm các tên tham số được phân tách bằng dấu phẩy.
[tham số1, tham số2,. ]
Mã được thực thi bởi hàm, được đặt bên trong dấu ngoặc nhọn. {}
tên hàm[tham số1, tham số2, tham số3] {
// mã sẽ được thực thi
}
Các tham số của hàm được liệt kê bên trong cặp ngoặc đơn [] trong phần định nghĩa hàm
Đối số của hàm là các giá trị mà hàm nhận được khi nó được gọi
Bên trong hàm, các đối số [các tham số] hoạt động như các biến cục bộ
Gọi hàm
Đoạn mã bên trong hàm sẽ thực thi khi "cái gì đó" triệu gọi [gọi] hàm
- Khi một sự kiện xảy ra [khi người dùng nhấp vào nút]
- Khi nó được gọi [được gọi] từ mã JavaScript
- Tự động [tự gọi]
Bạn sẽ học được nhiều hơn về lời gọi hàm sau trong hướng dẫn này
Hàm trả về
Khi JavaScript đạt đến câu lệnh
const myFunction = function [] {
statements
}
18, hàm sẽ ngừng thực thiNếu hàm được gọi từ một câu lệnh, JavaScript sẽ "quay lại" để thực thi mã sau câu lệnh được gọi
Các hàm thường tính toán giá trị trả về. Giá trị trả về được "trả lại" cho "người gọi"
Ví dụ
Tính tích của hai số và trả về kết quả
cho x = myFunction[4, 3];
function myFunction[a, b] {
return a * b;
}
Kết quả trong x sẽ là
Tự mình thử »Tại sao chức năng?
Bạn có thể sử dụng lại mã. Xác định mã một lần và sử dụng nó nhiều lần
Bạn có thể sử dụng cùng một mã nhiều lần với các đối số khác nhau để tạo ra các kết quả khác nhau
Ví dụ
Đổi độ F sang độ C
function toC[fahrenheit] {
return [5/9] * [fahrenheit-32];
}
document.getElementById["demo"].innerHTML = toCelsius[77];
Toán tử [] gọi hàm
Sử dụng ví dụ trên,
const myFunction = function [] {
statements
}
19 đề cập đến đối tượng chức năng và const myFunction = function [] {
statements
}
20 đề cập đến kết quả chức năngTruy cập một hàm không có [] sẽ trả về đối tượng hàm thay vì kết quả hàm
Ví dụ
function toC[fahrenheit] {
return [5/9] * [fahrenheit-32];
}
document.getElementById["demo"].innerHTML = toCelsius;
Các hàm được sử dụng làm giá trị biến
Các hàm có thể được sử dụng giống như cách bạn sử dụng các biến, trong tất cả các loại công thức, bài tập và phép tính
Ví dụ
Thay vì sử dụng một biến để lưu trữ giá trị trả về của một hàm
let x = toCelsius[77];
let text = "Nhiệt độ là " + x + " Độ C";
Bạn có thể sử dụng hàm trực tiếp, dưới dạng giá trị biến
let text = "Nhiệt độ là " + toC[77] + " Độ C";
Tự mình thử »Bạn sẽ học được nhiều hơn về các chức năng sau trong hướng dẫn này
Biến cục bộ
Các biến được khai báo trong hàm JavaScript, trở thành ĐỊA PHƯƠNG cho hàm
Các biến cục bộ chỉ có thể được truy cập từ bên trong hàm
Ví dụ
// mã ở đây KHÔNG thể sử dụng carName
function myFunction[] {
let carName = "Volvo";
// mã ở đây CÓ THỂ sử dụng carName
}
// mã ở đây KHÔNG thể sử dụng carName
Tự mình thử »Vì các biến cục bộ chỉ được nhận dạng bên trong các hàm của chúng, các biến có cùng tên có thể được sử dụng trong các hàm khác nhau
Nói chung, một hàm là một "chương trình con" có thể được gọi bằng mã bên ngoài [hoặc bên trong trong trường hợp đệ quy] cho hàm. Giống như chính chương trình, một hàm bao gồm một chuỗi các câu lệnh được gọi là thân hàm. Các giá trị có thể được chuyển đến một hàm và hàm sẽ trả về một giá trị
Trong JavaScript, hàm là đối tượng hạng nhất, bởi vì chúng có thể có các thuộc tính và phương thức giống như bất kỳ đối tượng nào khác. Điều phân biệt chúng với các đối tượng khác là các hàm có thể được gọi. Tóm lại, chúng là
const myFunction = function [] {
statements
}
0 đối tượngĐể biết thêm ví dụ và giải thích, hãy xem hướng dẫn JavaScript về hàm
Sự miêu tả
Mỗi chức năng trong JavaScript là một đối tượng
const myFunction = function [] {
statements
}
0. Xem const myFunction = function [] {
statements
}
0 để biết thông tin về các thuộc tính và phương thức của đối tượng const myFunction = function [] {
statements
}
0Để trả về một giá trị khác với giá trị mặc định, một hàm phải có câu lệnh
const myFunction = function [] {
statements
}
4 chỉ định giá trị sẽ trả về. Hàm không có câu lệnh trả về sẽ trả về giá trị mặc định. Trong trường hợp hàm tạo được gọi với từ khóa const myFunction = function [] {
statements
}
5, giá trị mặc định là giá trị của tham số const myFunction = function [] {
statements
}
6 của nó. Đối với tất cả các hàm khác, giá trị trả về mặc định là const myFunction = function [] {
statements
}
7Tham số của lệnh gọi hàm là đối số của hàm. Các đối số có thể được truyền theo giá trị [trong trường hợp giá trị nguyên thủy] hoặc theo tham chiếu [trong trường hợp đối tượng]. Điều này có nghĩa là nếu một hàm gán lại một tham số kiểu nguyên thủy, giá trị sẽ không thay đổi bên ngoài hàm. Trong trường hợp tham số kiểu đối tượng, nếu thuộc tính của nó bị thay đổi thì sự thay đổi đó sẽ tác động ra bên ngoài chức năng. Xem ví dụ sau
________số 8
Từ khóa
const myFunction = function [] {
statements
}
6 không tham chiếu đến hàm hiện đang thực thi, vì vậy bạn phải tham chiếu đến các đối tượng const myFunction = function [] {
statements
}
0 theo tên, ngay cả trong thân hàmĐịnh nghĩa hàm
Có một số cách để xác định chức năng
Khai báo hàm
Có một cú pháp đặc biệt để khai báo hàm [xem câu lệnh hàm để biết chi tiết]
const myFunction = function [] {
statements
}
1const myFunction = function [] {
statements
}
20Tên chức năng
const myFunction = function [] {
statements
}
21Tên của một đối số được truyền cho hàm
const myFunction = function [] {
statements
}
22Các câu lệnh bao gồm phần thân của hàm
Biểu thức hàm
Một biểu thức hàm tương tự và có cùng cú pháp với một khai báo hàm [xem biểu thức hàm để biết chi tiết]. Biểu thức hàm có thể là một phần của biểu thức lớn hơn. Người ta có thể định nghĩa các biểu thức hàm "được đặt tên" [ví dụ: trong đó tên của biểu thức có thể được sử dụng trong ngăn xếp cuộc gọi] hoặc các biểu thức hàm "ẩn danh". Các biểu thức hàm không được đưa vào phần đầu của phạm vi, do đó chúng không thể được sử dụng trước khi chúng xuất hiện trong mã
const myFunction = function [] {
statements
}
5const myFunction = function [] {
statements
}
20Tên chức năng. Có thể được bỏ qua, trong trường hợp đó, chức năng được gọi là chức năng ẩn danh
const myFunction = function [] {
statements
}
21Tên của một đối số được truyền cho hàm
const myFunction = function [] {
statements
}
22Các câu lệnh bao gồm phần thân của hàm
Dưới đây là một ví dụ về biểu thức hàm ẩn danh [không sử dụng
const myFunction = function [] {
statements
}
20]const myFunction = function [] {
statements
}
Cũng có thể cung cấp tên bên trong định nghĩa để tạo biểu thức hàm được đặt tên
const myFunction = function [] {
statements
}
2Một trong những lợi ích của việc tạo biểu thức hàm được đặt tên là trong trường hợp chúng ta gặp lỗi, dấu vết ngăn xếp sẽ chứa tên của hàm, giúp dễ dàng tìm ra nguồn gốc của lỗi hơn
Như chúng ta có thể thấy, cả hai ví dụ đều không bắt đầu bằng từ khóa
const myFunction = function [] {
statements
}
27. Các câu lệnh liên quan đến các hàm không bắt đầu bằng const myFunction = function [] {
statements
}
27 là các biểu thức hàmKhi các chức năng chỉ được sử dụng một lần, một mẫu phổ biến là IIFE [Biểu thức chức năng được gọi ngay lập tức]
const myFunction = function [] {
statements
}
4IIFE là các biểu thức hàm được gọi ngay khi hàm được khai báo
Khai báo hàm tạo [hàm*]
Có một cú pháp đặc biệt để khai báo hàm tạo [xem
const myFunction = function [] {
statements
}
29 để biết chi tiết]const myFunction = function [] {
statements
}
6const myFunction = function [] {
statements
}
20Tên chức năng
const myFunction = function [] {
statements
}
21Tên của một đối số được truyền cho hàm
const myFunction = function [] {
statements
}
22Các câu lệnh bao gồm phần thân của hàm
Biểu thức hàm tạo [hàm*]
Biểu thức hàm tạo tương tự và có cùng cú pháp với khai báo hàm tạo [xem
const myFunction = function [] {
statements
}
43 để biết chi tiết]const myFunction = function [] {
statements
}
1const myFunction = function [] {
statements
}
20Tên chức năng. Có thể được bỏ qua, trong trường hợp đó, chức năng được gọi là chức năng ẩn danh
const myFunction = function [] {
statements
}
21Tên của một đối số được truyền cho hàm
const myFunction = function [] {
statements
}
22Các câu lệnh bao gồm phần thân của hàm
Biểu thức hàm mũi tên [=>]
Biểu thức hàm mũi tên có cú pháp ngắn hơn và liên kết từ vựng với giá trị
const myFunction = function [] {
statements
}
6 của nó [xem các hàm mũi tên để biết chi tiết]const myFunction = function [] {
statements
}
6const myFunction = function [] {
statements
}
21Tên của một đối số. Đối số không cần được chỉ định bằng
const myFunction = function [] {
statements
}
49. Đối với chính xác một đối số, dấu ngoặc đơn là không bắt buộc. [như const myFunction = function [] {
statements
}
60]const myFunction = function [] {
statements
}
22 hoặc const myFunction = function [] {
statements
}
62Nhiều câu lệnh cần được đặt trong ngoặc đơn. Một biểu thức duy nhất không yêu cầu dấu ngoặc. Biểu thức cũng là giá trị trả về ngầm định của hàm
Hàm tạo chức năng
Ghi chú. Không nên sử dụng hàm tạo
const myFunction = function [] {
statements
}
0 để tạo các hàm vì nó cần phần thân hàm dưới dạng một chuỗi, điều này có thể ngăn cản một số tối ưu hóa công cụ JS và cũng có thể gây ra các vấn đề khácNhư tất cả các đối tượng khác, đối tượng
const myFunction = function [] {
statements
}
0 có thể được tạo bằng toán tử const myFunction = function [] {
statements
}
5const myFunction = function [] {
statements
}
5const myFunction = function [] {
statements
}
66Không hoặc nhiều tên được hàm sử dụng làm tham số chính thức. Mỗi cái phải là một mã định danh JavaScript thích hợp
const myFunction = function [] {
statements
}
67Một chuỗi chứa các câu lệnh JavaScript bao gồm thân hàm
Gọi hàm tạo
const myFunction = function [] {
statements
}
0 dưới dạng hàm [không sử dụng toán tử const myFunction = function [] {
statements
}
5] có tác dụng tương tự như gọi nó dưới dạng hàm tạoHàm tạo GeneratorFunction
Ghi chú.
const myFunction = function [] {
statements
}
10 không phải là một đối tượng toàn cầu, nhưng có thể được lấy từ thể hiện của hàm tạo [xem const myFunction = function [] {
statements
}
10 để biết thêm chi tiết]Ghi chú. Không nên sử dụng hàm tạo
const myFunction = function [] {
statements
}
10 để tạo các hàm vì nó cần phần thân hàm dưới dạng một chuỗi, điều này có thể ngăn cản một số tối ưu hóa công cụ JS và cũng có thể gây ra các sự cố khácNhư tất cả các đối tượng khác, đối tượng
const myFunction = function [] {
statements
}
10 có thể được tạo bằng toán tử const myFunction = function [] {
statements
}
5const myFunction = function [] {
statements
}
10const myFunction = function [] {
statements
}
66Không hoặc nhiều tên được hàm sử dụng làm tên đối số chính thức. Mỗi chuỗi phải là một chuỗi tuân thủ các quy tắc dành cho mã định danh JavaScript hợp lệ hoặc danh sách các chuỗi đó được phân tách bằng dấu phẩy;
const myFunction = function [] {
statements
}
67Một chuỗi chứa các câu lệnh JavaScript bao gồm định nghĩa hàm
Gọi hàm tạo
const myFunction = function [] {
statements
}
10 dưới dạng hàm [không sử dụng toán tử const myFunction = function [] {
statements
}
5] có tác dụng tương tự như gọi nó dưới dạng hàm tạotham số chức năng
thông số mặc định
Các tham số chức năng mặc định cho phép các tham số chính thức được khởi tạo với các giá trị mặc định nếu không có giá trị nào hoặc
const myFunction = function [] {
statements
}
7 được truyền. Để biết thêm chi tiết, xem tham số mặc địnhThông số nghỉ ngơi
Cú pháp tham số còn lại cho phép biểu diễn một số lượng đối số không xác định dưới dạng một mảng. Để biết thêm chi tiết, xem phần còn lại tham số
Đối tượng đối số
Bạn có thể tham khảo đối số của hàm bên trong hàm bằng cách sử dụng đối tượng
const myFunction = function [] {
statements
}
63. Xem lập luậnconst myFunction = function [] {
statements
}
63Một đối tượng dạng mảng chứa các đối số được truyền cho hàm hiện đang thực thi
const myFunction = function [] {
statements
}
65Chức năng hiện đang thực hiện
const myFunction = function [] {
statements
}
66Số đối số truyền vào hàm
Định nghĩa hàm phương thức
Hàm getter và setter
Bạn có thể định nghĩa getters [phương thức truy cập] và setters [phương thức biến đổi] trên bất kỳ đối tượng tích hợp sẵn tiêu chuẩn nào hoặc đối tượng do người dùng xác định hỗ trợ thêm các thuộc tính mới. Cú pháp xác định getters và setters sử dụng cú pháp ký tự đối tượng
đượcLiên kết một thuộc tính đối tượng với một hàm sẽ được gọi khi thuộc tính đó được tra cứu
bộLiên kết thuộc tính đối tượng với hàm sẽ được gọi khi có nỗ lực đặt thuộc tính đó
Cú pháp định nghĩa phương thức
Theo nghĩa đen của đối tượng, bạn có thể xác định các phương thức riêng theo cú pháp ngắn hơn, tương tự như getters và setters. Xem định nghĩa phương pháp để biết thêm thông tin
const myFunction = function [] {
statements
}
11Xây dựng vs. tuyên bố vs. sự biểu lộ
So sánh sau
Một hàm được xác định với hàm tạo
const myFunction = function [] {
statements
}
0 được gán cho biến const myFunction = function [] {
statements
}
68const myFunction = function [] {
statements
}
12Một khai báo hàm của một hàm có tên là
const myFunction = function [] {
statements
}
68const myFunction = function [] {
statements
}
13Biểu thức hàm của hàm ẩn danh được gán cho biến
const myFunction = function [] {
statements
}
68const myFunction = function [] {
statements
}
14Biểu thức hàm của hàm có tên
const myFunction = function [] {
statements
}
51 được gán cho biến const myFunction = function [] {
statements
}
68const myFunction = function [] {
statements
}
15sự khác biệt
Tất cả đều làm gần giống nhau, với một vài khác biệt nhỏ
Có sự khác biệt giữa tên hàm và biến mà hàm được gán. Tên hàm không thể thay đổi, trong khi biến mà hàm được gán có thể được gán lại. Tên hàm chỉ có thể được sử dụng trong phần thân của hàm. Cố gắng sử dụng nó bên ngoài nội dung của hàm sẽ dẫn đến lỗi [hoặc nhận giá trị khác, nếu cùng tên được khai báo ở nơi khác]. Ví dụ
const myFunction = function [] {
statements
}
16Tên hàm cũng xuất hiện khi hàm được tuần tự hóa thông qua phương thức
const myFunction = function [] {
statements
}
53 của nóMặt khác, biến mà hàm được gán chỉ bị giới hạn bởi phạm vi của nó, được đảm bảo bao gồm phạm vi mà hàm được khai báo
Như ví dụ về
const myFunction = function [] {
statements
}
54 cho thấy, tên hàm có thể khác với biến mà hàm được gán. Họ không có quan hệ gì với nhau. Một khai báo hàm cũng tạo ra một biến có cùng tên với tên hàm. Do đó, không giống như các hàm được xác định bởi các biểu thức hàm, các hàm được xác định bởi các khai báo hàm có thể được truy cập bằng tên của chúng trong phạm vi mà chúng được xác định, cũng như trong phần thân của chính chúng.Một hàm được xác định bởi
const myFunction = function [] {
statements
}
55 sẽ tự động lắp ráp nguồn của nó, có thể quan sát được khi bạn tuần tự hóa nó. Ví dụ, const myFunction = function [] {
statements
}
56 choconst myFunction = function [] {
statements
}
17Đây là nguồn thực tế được sử dụng để biên dịch chức năng. Tuy nhiên, mặc dù hàm tạo
const myFunction = function [] {
statements
}
57 sẽ tạo hàm có tên const myFunction = function [] {
statements
}
58, nhưng tên này không được thêm vào phạm vi của phần thân. Cơ thể chỉ có quyền truy cập vào các biến toàn cầu. Ví dụ: sau đây sẽ dẫn đến lỗiconst myFunction = function [] {
statements
}
18Không giống như các hàm được xác định bởi các biểu thức hàm hoặc bởi hàm tạo
const myFunction = function [] {
statements
}
0, một hàm được xác định bởi một khai báo hàm có thể được sử dụng trước chính khai báo hàm đó. Ví dụconst myFunction = function [] {
statements
}
19Một hàm được xác định bởi một biểu thức hàm hoặc bởi một khai báo hàm kế thừa phạm vi hiện tại. Đó là, chức năng tạo thành một bao đóng. Mặt khác, một hàm được xác định bởi hàm tạo
const myFunction = function [] {
statements
}
0 không kế thừa bất kỳ phạm vi nào ngoài phạm vi toàn cục [mà tất cả các hàm đều kế thừa]const myFunction = function [] {
statements
}
50Các hàm được xác định bởi biểu thức hàm và khai báo hàm chỉ được phân tích cú pháp một lần, trong khi các hàm được xác định bởi hàm tạo
const myFunction = function [] {
statements
}
0 thì không. Nghĩa là, chuỗi thân hàm được chuyển đến hàm tạo const myFunction = function [] {
statements
}
0 phải được phân tích cú pháp mỗi khi hàm tạo được gọi. Mặc dù một biểu thức hàm tạo một bao đóng mỗi lần, thân hàm không được phân tích lại, vì vậy các biểu thức hàm vẫn nhanh hơn const myFunction = function [] {
statements
}
103. Do đó, hàm tạo const myFunction = function [] {
statements
}
0 thường nên tránh bất cứ khi nào có thểTuy nhiên, cần lưu ý rằng các biểu thức hàm và khai báo hàm được lồng trong hàm được tạo bằng cách phân tích cú pháp chuỗi của hàm tạo
const myFunction = function [] {
statements
}
57 không được phân tích cú pháp nhiều lần. Ví dụconst myFunction = function [] {
statements
}
51Một khai báo hàm rất dễ dàng [và thường vô tình] biến thành một biểu thức hàm. Một khai báo hàm không còn là một khi nó hoặc
- trở thành một phần của biểu thức
- không còn là "phần tử nguồn" của hàm hoặc chính tập lệnh. "Phần tử nguồn" là một câu lệnh không được lồng trong tập lệnh hoặc phần thân hàm
const myFunction = function [] {
statements
}
52ví dụ
const myFunction = function [] {
statements
}
53Chức năng cấp khối
Ở chế độ nghiêm ngặt, bắt đầu từ ES2015, các chức năng bên trong các khối hiện nằm trong phạm vi của khối đó. Trước ES2015, các chức năng cấp khối bị cấm ở chế độ nghiêm ngặt
const myFunction = function [] {
statements
}
54Hàm cấp khối trong mã không nghiêm ngặt
Trong một từ. Đừng
Trong mã không nghiêm ngặt, các khai báo hàm bên trong các khối hoạt động kỳ lạ. Ví dụ
const myFunction = function [] {
statements
}
55ES2015 nói rằng nếu
const myFunction = function [] {
statements
}
106 là sai, thì const myFunction = function [] {
statements
}
107 sẽ không bao giờ được xác định, vì khối không bao giờ thực thi. Tuy nhiên, đó là một phần mới của tiêu chuẩn. Trong lịch sử, điều này không được chỉ định và một số trình duyệt sẽ xác định const myFunction = function [] {
statements
}
107 liệu khối có được thực thi hay khôngỞ chế độ nghiêm ngặt, tất cả các trình duyệt hỗ trợ ES2015 đều xử lý theo cùng một cách.
const myFunction = function [] {
statements
}
107 chỉ được xác định nếu const myFunction = function [] {
statements
}
106 là đúng và chỉ tồn tại trong phạm vi đó của khối const myFunction = function [] {
statements
}
111Một cách an toàn hơn để xác định các hàm theo điều kiện là gán một biểu thức hàm cho một biến
const myFunction = function [] {
statements
}
56ví dụ
Trả về một số được định dạng
Hàm sau đây trả về một chuỗi chứa biểu diễn được định dạng của một số được đệm bằng các số 0 ở đầu
const myFunction = function [] {
statements
}
57Các câu lệnh sau đây gọi hàm padZeros
const myFunction = function [] {
statements
}
58Xác định xem một chức năng tồn tại
Bạn có thể xác định xem một hàm có tồn tại hay không bằng cách sử dụng toán tử
const myFunction = function [] {
statements
}
112. Trong ví dụ sau, một thử nghiệm được thực hiện để xác định xem đối tượng const myFunction = function [] {
statements
}
113 có một thuộc tính gọi là const myFunction = function [] {
statements
}
114 là một hàm hay không. Nếu vậy, nó được sử dụng; const myFunction = function [] {
statements
}
59Lưu ý rằng trong thử nghiệm
const myFunction = function [] {
statements
}
111, tham chiếu đến const myFunction = function [] {
statements
}
114 được sử dụng—không có dấu ngoặc "[]" sau tên hàm nên hàm thực tế không được gọi