Định nghĩa hàm JavaScript
Các hàm JavaScript được định nghĩa với
functiontừ khóa.
Bạn có thể sử dụng khai báo hàm hoặc biểu thức hàm .
Khai báo hàm
Trước đó trong hướng dẫn này, bạn đã biết rằng các hàm được khai báo với cú pháp sau:
function functionName(parameters) {
// code to be executed
}
Các hàm đã khai báo không được thực thi ngay lập tức. Chúng được "lưu để sử dụng sau này", và sẽ được thực thi sau, khi chúng được gọi (được gọi khi).
Thí dụ
function myFunction(a, b) {
return a * b;
}
Dấu chấm phẩy được sử dụng để phân tách các câu lệnh JavaScript thực thi.
Vì một khai báo hàm không phải là một câu lệnh thực thi, nên thông thường sẽ không kết thúc nó bằng dấu chấm phẩy.
Biểu thức hàm
Một hàm JavaScript cũng có thể được định nghĩa bằng cách sử dụng một biểu thức .
Một biểu thức hàm có thể được lưu trữ trong một biến:
Thí dụ
const x = function (a, b) {return a * b};
Sau khi một biểu thức hàm đã được lưu trữ trong một biến, biến đó có thể được sử dụng như một hàm:
Thí dụ
const x = function (a, b) {return a * b};
let z = x(4, 3);
Hàm trên thực chất là một hàm ẩn danh (một hàm không có tên).
Các hàm được lưu trữ trong biến không cần tên hàm. Chúng luôn được gọi (gọi) bằng cách sử dụng tên biến.
Hàm trên kết thúc bằng dấu chấm phẩy vì nó là một phần của câu lệnh thực thi.
Hàm () Constructor
Như bạn đã thấy trong các ví dụ trước, các hàm JavaScript được định nghĩa với functiontừ khóa.
Các hàm cũng có thể được định nghĩa bằng một phương thức khởi tạo hàm JavaScript tích hợp được gọi là
Function().
Thí dụ
const myFunction = new Function("a", "b", "return a * b");
let x = myFunction(4, 3);
Bạn thực sự không phải sử dụng hàm tạo hàm. Ví dụ trên cũng giống như cách viết:
Thí dụ
const myFunction = function (a, b) {return a * b};
let x = myFunction(4, 3);
Hầu hết thời gian, bạn có thể tránh sử dụng newtừ khóa trong JavaScript.
Chức năng nâng
Trước đó trong hướng dẫn này, bạn đã học về "lưu trữ" ( JavaScript Hoisting ).
Hoisting là hành vi mặc định của JavaScript để di chuyển các khai báo lên đầu phạm vi hiện tại.
Hoisting áp dụng cho khai báo biến và khai báo hàm.
Do đó, các hàm JavaScript có thể được gọi trước khi chúng được khai báo:
myFunction(5);
function myFunction(y) {
return y * y;
}
Các hàm được xác định bằng cách sử dụng một biểu thức không được nâng lên.
Các chức năng tự gọi
Biểu thức hàm có thể được thực hiện "tự gọi".
Một biểu thức tự gọi được gọi (bắt đầu) tự động mà không cần gọi.
Biểu thức hàm sẽ tự động thực thi nếu biểu thức được theo sau bởi ().
Bạn không thể tự gọi một khai báo hàm.
Bạn phải thêm dấu ngoặc đơn xung quanh hàm để chỉ ra rằng nó là một biểu thức hàm:
Thí dụ
(function () {
let x = "Hello!!"; // I will invoke myself
})();
Hàm trên thực chất là một hàm tự gọi ẩn danh (hàm không có tên).
Các chức năng có thể được sử dụng làm giá trị
Các hàm JavaScript có thể được sử dụng như các giá trị:
Thí dụ
function myFunction(a, b) {
return a * b;
}
let x = myFunction(4, 3);
Các hàm JavaScript có thể được sử dụng trong các biểu thức:
Thí dụ
function myFunction(a, b) {
return a * b;
}
let x = myFunction(4, 3) * 2;
Chức năng là Đối tượng
Toán tử typeoftrong JavaScript trả về "hàm" cho các hàm.
Tuy nhiên, các hàm JavaScript tốt nhất có thể được mô tả dưới dạng các đối tượng.
Các hàm JavaScript có cả thuộc tính và phương thức .
Thuộc arguments.lengthtính trả về số lượng đối số nhận được khi hàm được gọi:
Thí dụ
function myFunction(a, b) {
return arguments.length;
}
Phương toString()thức trả về hàm dưới dạng một chuỗi:
Thí dụ
function myFunction(a, b) {
return a * b;
}
let text = myFunction.toString();
Một hàm được định nghĩa là thuộc tính của một đối tượng, được gọi là một phương thức của đối tượng.
Một hàm được thiết kế để tạo các đối tượng mới, được gọi là hàm tạo đối tượng.
Hàm mũi tên
Hàm mũi tên cho phép viết một cú pháp ngắn gọn để viết biểu thức hàm.
Bạn không cần functiontừ khóa, returntừ khóa và
dấu ngoặc nhọn .
Thí dụ
// ES5
var x = function(x, y) {
return x * y;
}
// ES6
const x = (x, y) => x * y;
Các hàm mũi tên không có hàm riêng của chúng this. Chúng không phù hợp để xác định các phương thức đối tượng .
Các chức năng mũi tên không được kéo lên. Chúng phải được xác định trước khi sử dụng.
Sử dụng const
an toàn hơn sử dụng var, bởi vì biểu thức hàm luôn có giá trị không đổi.
Bạn chỉ có thể bỏ qua returntừ khóa và dấu ngoặc nhọn nếu hàm là một câu lệnh duy nhất. Bởi vì điều này, có thể là một thói quen tốt để luôn giữ chúng:
Thí dụ
const x = (x, y) => { return x * y };
Các chức năng mũi tên không được hỗ trợ trong IE11 hoặc phiên bản cũ hơn.