Hàm JavaScript

Hàm JavaScript được thiết kế để thực thi các đoạn mã cụ thể.

Hàm JavaScript sẽ được thực thi khi mã nào đó gọi nó.

mẫu

function myFunction(p1, p2) {
    return p1 * p2;              // Hàm này trả về tích của p1 và p2
}

Thử nghiệm trực tiếp

Cú pháp hàm JavaScript

Hàm JavaScript được thực thi thông qua function được định nghĩa bằng từ khóa, sau đó làTên hàmvà dấu ngoặc ()。

Tên hàm có thể chứa chữ cái, số, dấu gạch dưới và dấu đô la (các quy tắc giống như tên biến).

Dấu ngoặc tròn có thể bao gồm các 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 trong dấu ngoặc花括号:{}

function name(Tham số 1, Tham số 2, Tham số 3) {
    Là mã cần thực thi
}

Tham số hàm (Function parameters)Là tên được liệt kê trong định nghĩa hàm.

Tham số hàm (Function arguments)Là giá trị thực tế được hàm nhận khi gọi hàm:Giá trị。

Trong hàm, tham số là biến cục bộ.

Trong các ngôn ngữ lập trình khác, hàm gần giống với chương trình (Procedure) hoặc hàm con (Subroutine).

Gọi hàm

Mã trong hàm sẽ được thực thi khi hàm được gọi bởi mã khác:

  • Khi sự kiện xảy ra (khi người dùng nhấn nút)
  • Khi mã JavaScript được gọi
  • tự động (tự gọi)

Bạn sẽ học thêm về việc gọi hàm trong hướng dẫn này.

hàm trả về

Khi JavaScript đến return câu lệnh, hàm sẽ dừng thực thi.

Nếu hàm được gọi bởi một câu lệnh, JavaScript sẽ "trở lại" mã nguồn sau câu lệnh gọi hàm.

Hàm thường sẽ tính toánGiá trị trả vềGiá trị trả về này sẽ được trả lại cho người gọi:

mẫu

Tính tích của hai số và trả về kết quả:

var x = myFunction(7, 8);        // Gọi hàm, giá trị trả về được gán cho x
function myFunction(a, b) {
    return a * b;                // Hàm trả về tích của a và b
}

Kết quả của x sẽ là:

56

Thử nghiệm trực tiếp

Tại sao sử dụng hàm?

Bạn có thể tái sử dụng mã nguồn: chỉ cần định nghĩa mã một lần, bạn có thể sử dụng nó nhiều lần.

Bạn có thể gọi hàm nhiều lần với các tham số khác nhau để nhận được kết quả khác nhau.

mẫu

Chuyển đổi từ độ Fahrenheit sang độ Celsius:

function toCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius(77);

Thử nghiệm trực tiếp

biểu thức () gọi hàm

Dùng ví dụ trên,toCelsius tham chiếu là đối tượng hàm, trong khi toCelsius() tham chiếu là kết quả của hàm.

mẫu

Truy cập vào hàm không có () sẽ trả về định nghĩa của hàm:

function toCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius;

Thử nghiệm trực tiếp

Hàm làm giá trị biến

Cách sử dụng hàm tương tự như biến, trong tất cả các công thức, gán giá trị và tính toán.

mẫu

Sử dụng biến để lưu trữ giá trị của hàm:

var x = toCelsius(77);
var text = "Nhiệt độ là " + x + " độ C";

Bạn có thể sử dụng hàm như một giá trị biến trực tiếp:

var text = "Nhiệt độ là " + toCelsius(77) + " độ C";

Thử nghiệm trực tiếp

Bạn sẽ học thêm về hàm trong hướng dẫn này.

biến cục bộ

Các biến được khai báo trong hàm JavaScript sẽ trở thành thuộc tính của hàmbiến cục bộ。

biến cục bộ chỉ có thể truy cập trong hàm.

mẫu

// Mã ở đây không thể sử dụng carName
function myFunction() {
    var carName = "Volvo";
    // Mã ở đây có thể sử dụng carName
}
// Mã ở đây không thể sử dụng carName

Thử nghiệm trực tiếp

Do biến cục bộ chỉ có thể được nhận diện bởi hàm của nó, vì vậy bạn có thể sử dụng tên biến giống nhau trong các hàm khác.

Biến cục bộ được tạo ra khi hàm bắt đầu và bị xóa khi hàm hoàn thành.

sách giáo khoa

thông tin thêm về Hàm JavaScriptĐể biết thêm về

Tóm tắt hàm ECMAScript
Giải thích khái niệm hàm, cách ECMAScript khai báo và gọi hàm, và cách hàm trả về giá trị.
Đối tượng arguments ECMAScript
Giới thiệu cách sử dụng đối tượng này, sau đó giải thích cách sử dụng thuộc tính length để đo số lượng tham số của hàm và mô phỏng tải lại hàm.
Đối tượng Function ECMAScript (hạng)
Bài này giải thích cách tạo hàm bằng lớp Function và sau đó giới thiệu các thuộc tính và phương thức của đối tượng Function.
Bí ẩn closure ECMAScript
Bài này giải thích khái niệm closure và cho bạn thấy hai ví dụ đơn giản và phức tạp.