Thực đơn
trang chủChương trình

Cách gọi hàm trong js. Thoát hàm và kết quả của nó. Nạp chồng hàm trong JavaScript

Chức năng

Một hàm là một khối Mã chương trình trong JavaScript, được xác định một lần và có thể được thực thi hoặc gọi nhiều lần. Có thể bạn đã quen với khái niệm hàm dưới một tên khác, chẳng hạn như chương trình con hoặc thủ tục. Hàm có thể có tham số: Định nghĩa hàm có thể bao gồm danh sách các mã định danh, được gọi là tham số và đóng vai trò như các biến cục bộ trong phần nội dung của hàm.

Khi gọi hàm, chúng có thể được truyền các giá trị hoặc đối số tương ứng với tham số của chúng. Các hàm thường sử dụng các đối số của chúng để tính giá trị trả về, là giá trị của biểu thức gọi hàm. Ngoài các đối số, khi bất kỳ hàm nào được gọi, nó sẽ được truyền thêm một giá trị xác định ngữ cảnh của lệnh gọi - giá trị trong từ khóa this.

Các hàm trong JavaScript là các đối tượng và có thể được sử dụng theo nhiều cách khác nhau. Ví dụ, các hàm có thể được gán cho các biến và được truyền cho các hàm khác. Vì hàm là đối tượng nên bạn có thể gán giá trị cho thuộc tính của chúng và thậm chí gọi các phương thức của chúng.

JavaScript cho phép các định nghĩa hàm được lồng trong các hàm khác và các hàm như vậy sẽ có quyền truy cập vào tất cả các biến có trong phạm vi định nghĩa.

Xác định hàm

Định nghĩa hàm bắt đầu bằng từ khóa hàm, theo sau là các thành phần sau:

Một mã định danh chỉ định tên của hàm

Tên là một phần bắt buộc của câu lệnh khai báo hàm: nó sẽ được sử dụng để tạo một biến mới mà đối tượng sẽ được gán. tính năng mới. Trong các biểu thức định nghĩa hàm, tên có thể không có: nếu có, tên sẽ chỉ đề cập đến đối tượng hàm trong chính phần thân của hàm.

Đôi dấu ngoặc đơn xung quanh danh sách không hoặc nhiều số nhận dạng, được phân tách bằng dấu phẩy

Các mã định danh này sẽ xác định tên của các tham số hàm và có thể được sử dụng làm biến cục bộ trong thân hàm.

Một cặp dấu ngoặc nhọn có 0 hoặc nhiều lệnh JavaScript bên trong

Các lệnh này tạo nên phần thân của hàm: chúng được thực thi mỗi khi hàm được gọi.

Ví dụ sau đây cho thấy một số định nghĩa hàm ở dạng câu lệnh và biểu thức. Lưu ý rằng các định nghĩa hàm dưới dạng biểu thức chỉ hữu ích nếu chúng là một phần của các biểu thức lớn hơn, chẳng hạn như lệnh gán hoặc lệnh gọi hàm, thực hiện điều gì đó với hàm mới được khai báo:

// In tên và giá trị của tất cả các thuộc tính của đối tượng obj function printprops(obj) ( for(var p in obj) console.log(p + ": " + obj[p] + "\n"); ) // Tính khoảng cách giữa các điểm (x1,y1) và (x2,y2) hàm distance(x1, y1, x2, y2) ( var dx = x2 - x1; var dy = y2 - y1; return Math.sqrt(dx *dx + dy*dy ) // Hàm đệ quy(gọi chính nó), tính hàm giai thừa giai thừa(x) ( if (x

Lưu ý rằng trong các biểu thức định nghĩa hàm, tên hàm có thể không xuất hiện. Câu lệnh khai báo hàm thực sự khai báo một biến và gán cho nó một đối tượng hàm.

Mặt khác, một biểu thức định nghĩa hàm không khai báo một biến. Tuy nhiên, trong các biểu thức định nghĩa, có thể chỉ định tên của hàm, như trong hàm giai thừa ở trên, có thể được yêu cầu trong phần nội dung của hàm để gọi chính nó. Nếu biểu thức định nghĩa hàm bao gồm một tên, Tên sẽ đề cập đến một đối tượng hàm trong phạm vi của hàm đó. Trong thực tế, tên hàm trở thành một biến cục bộ, chỉ có thể truy cập được trong thân hàm. Trong hầu hết các trường hợp, tên hàm không cần phải được chỉ định trong biểu thức định nghĩa, làm cho các định nghĩa trở nên gọn gàng hơn.

Lưu ý rằng hầu hết (nhưng không phải tất cả) các hàm trong ví dụ đều chứa câu lệnh return. Câu lệnh return kết thúc hàm và trả về giá trị biểu thức của nó (nếu được chỉ định) cho chương trình gọi. Nếu không có biểu thức nào trong câu lệnh return, nó sẽ trả về không xác định. Nếu không có câu lệnh return trong hàm, trình thông dịch sẽ chỉ thực thi tất cả các câu lệnh trong thân hàm và trả về phần không xác định cho chương trình gọi.

Hầu hết các hàm trong ví dụ đều đánh giá một giá trị nào đó và sử dụng câu lệnh return để trả về giá trị đó cho chương trình gọi. Hàm printprops() hơi khác một chút theo nghĩa này: công việc của nó là in tên các thuộc tính của một đối tượng. Nó không cần trả về bất kỳ giá trị nào nên không có câu lệnh return trong hàm. Hàm printprops() sẽ luôn trả về giá trị không xác định. (Các hàm không có giá trị trả về đôi khi được gọi là thủ tục.)

Chức năng gọi

Mã chương trình tạo nên phần thân của hàm được thực thi không phải tại thời điểm hàm được xác định mà tại thời điểm nó được gọi. Các cuộc gọi hàm được thực hiện bằng cách sử dụng biểu thức cuộc gọi. Biểu thức cuộc gọi bao gồm một biểu thức gọi hàm trả về một đối tượng hàm, theo sau là dấu ngoặc đơn có danh sách 0 hoặc nhiều biểu thức đối số được phân tách bằng dấu phẩy bên trong.

Nếu biểu thức gọi hàm là biểu thức gọi thuộc tính - nếu hàm là thuộc tính đối tượng hoặc phần tử mảng (nghĩa là một phương thức) - thì biểu thức gọi là biểu thức gọi phương thức. Đoạn mã sau đây hiển thị một số ví dụ về các biểu thức gọi hàm phổ biến:

Printprops((x:4, tuổi: 24)); var d = khoảng cách(1,1,5,6); var f = giai thừa(5) / giai thừa(12); f = hình vuông(5);

Khi một hàm được gọi, tất cả các biểu thức đối số (được chỉ định giữa các dấu ngoặc đơn) đều được đánh giá và các giá trị kết quả được sử dụng làm đối số cho hàm. Các giá trị này được gán cho các tham số có tên được liệt kê trong định nghĩa hàm. Trong phần thân hàm, các biểu thức gọi tham số trả về giá trị của các đối số tương ứng.

Khi một hàm bình thường được gọi, giá trị trả về của hàm sẽ trở thành giá trị của biểu thức gọi. Nếu một hàm trả về sau khi trình thông dịch đã kết thúc, hàm không xác định sẽ được trả về. Nếu một hàm trả về do câu lệnh return, giá trị của biểu thức theo sau câu lệnh return sẽ được trả về hoặc không xác định nếu câu lệnh return không có biểu thức.

Một phương thức không là gì ngoài một hàm được lưu trữ như một thuộc tính của một đối tượng. Nếu bạn có hàm func và một đối tượng obj, thì bạn có thể định nghĩa một phương thức trên obj được gọi là phương thức như dưới đây:

// Định nghĩa một đối tượng và hàm đơn giản var obj = (); function func(a, b) ( return a+b;) // Thêm một phương thức vào đối tượng obj obj.method = func; // Bây giờ bạn có thể gọi phương thức này var result = obj.method(4, 5);

Thông thường, khi gọi các phương thức, hình thức truy cập thuộc tính bằng toán tử dấu chấm được sử dụng, nhưng bạn cũng có thể sử dụng hình thức truy cập thuộc tính bằng dấu ngoặc vuông. Ví dụ: cả hai biểu thức sau đây đều là biểu thức gọi phương thức:

Kết quả = obj.method(4, 5); kết quả = obj["phương thức"](4, 5);

Các đối số và giá trị trả về của lệnh gọi phương thức được xử lý theo cách giống hệt như lệnh gọi hàm thông thường. Tuy nhiên, cuộc gọi phương thức có một điều sự khác biệt quan trọng: bối cảnh cuộc gọi. Một biểu thức truy cập thuộc tính bao gồm hai phần: một đối tượng (trong trong trường hợp này obj) và tên thuộc tính (phương thức). Trong các biểu thức gọi phương thức như vậy, obj trở thành ngữ cảnh gọi và phần thân hàm có thể tham chiếu đối tượng đó bằng từ khóa this. Ví dụ:

Var obj = ( x: 0, y: 0, // Cộng phương thức: function(a, b) ( this.x = a; this.y = b; ), // Phương thức khác tính tổng: function() ( return this .x + this.y ) ); // Gọi các phương thức obj.add(15, 4); console.log(obj.sum()); // 19

Các phương thức và từ khóa this là trọng tâm của mô hình lập trình hướng đối tượng. Bất kỳ hàm nào được sử dụng làm phương thức đều thực sự nhận được một đối số ngầm định - đối tượng mà hàm đó được gọi. Thông thường, các phương thức thực hiện một số thao tác trên một đối tượng và cú pháp gọi phương thức phản ánh rõ ràng thực tế là hàm đó hoạt động trên đối tượng.

Xin lưu ý: đây là từ khóa, không phải tên biến hoặc thuộc tính. Cú pháp JavaScript không cho phép gán giá trị cho phần tử này.

Đối số và tham số của hàm

Trong JavaScript, các định nghĩa hàm không chỉ định loại tham số và lệnh gọi hàm không thực hiện bất kỳ việc kiểm tra kiểu nào đối với các giá trị đối số được truyền. Trên thực tế, JavaScript thậm chí không kiểm tra số lượng đối số khi gọi hàm. Các phần phụ bên dưới mô tả điều gì sẽ xảy ra nếu số lượng đối số trong lệnh gọi hàm nhỏ hơn hoặc số lượng nhiều hơn các tham số đã khai báo. Chúng cũng trình bày cách bạn có thể kiểm tra rõ ràng các loại đối số của hàm nếu bạn cần đảm bảo rằng hàm đó không được gọi với các đối số không hợp lệ.

Đối số tùy chọn

Khi số lượng đối số trong lệnh gọi hàm nhỏ hơn số lượng tham số được khai báo, các đối số bị thiếu sẽ được đặt thành không xác định. Việc viết hàm thường thuận tiện sao cho một số đối số là tùy chọn và có thể được bỏ qua khi gọi hàm. Trong trường hợp này, mong muốn cung cấp khả năng gán các giá trị mặc định hợp lý hợp lý cho các tham số có thể bị bỏ qua. Ví dụ:

// Thêm vô số tên của // thuộc tính của đối tượng obj vào mảng arr và trả về nó. Nếu đối số // arr không được thông qua, hãy tạo và trả về một mảng mới hàm getPropertyNames(obj, /* tùy chọn */ arr) ( if (arr === und xác định) arr = ; // Nếu mảng không được xác định, hãy tạo một thuộc tính for( var mới trong obj) arr.push(property); return arr; // Hàm này có thể được gọi với 1 hoặc 2 đối số: var a = getPropertyNames((x:1, y:1)); // Lấy các thuộc tính của đối tượng trong một mảng mới getPropertyNames((z:5),a); // thêm các thuộc tính của đối tượng mới vào mảng này console.log(a); // ["XYZ"]

Lưu ý rằng khi khai báo hàm, các đối số tùy chọn phải hoàn thành danh sách đối số thì mới có thể bỏ qua. Lập trình viên sẽ viết lệnh gọi đến hàm của bạn sẽ không thể truyền đối số thứ hai và đồng thời bỏ qua đối số thứ nhất: anh ta sẽ buộc phải chuyển rõ ràng giá trị không xác định trong đối số đầu tiên. Cũng lưu ý chú thích /* tùy chọn */ trong định nghĩa hàm, trong đó nhấn mạnh thực tế rằng tham số là tùy chọn.

Danh sách đối số có độ dài thay đổi

Nếu số lượng đối số trong lệnh gọi hàm vượt quá số lượng tên tham số thì hàm đó không thể truy cập trực tiếp vào các giá trị chưa được đặt tên. Giải pháp cho vấn đề này được cung cấp bởi đối tượng Arguments. Trong nội dung hàm, mã định danh đối số đề cập đến đối tượng Đối số có trong lệnh gọi. Đối tượng Arguments là một đối tượng giống như mảng cho phép các giá trị được truyền cho một hàm được truy xuất bằng số thay vì tên của chúng.

Giả sử rằng hàm func đã được xác định và yêu cầu một đối số x. Nếu bạn gọi hàm này bằng hai đối số, đối số đầu tiên sẽ có sẵn bên trong hàm bằng tên của tham số x hoặc dưới dạng đối số. Đối số thứ hai sẽ chỉ có sẵn dưới dạng đối số. Ngoài ra, giống như mảng thực, các đối số có thuộc tính độ dài chỉ định số phần tử mà nó chứa. Nghĩa là, trong phần thân của hàm có tên func có hai đối số, đối số.length có giá trị 2.

Đối tượng Arguments có thể được sử dụng nhiều nhất các mục đích khác nhau. Ví dụ sau đây cho thấy cách sử dụng nó để kiểm tra xem một hàm có được gọi với số lượng đối số chính xác hay không, điều mà JavaScript sẽ không làm được cho bạn:

Hàm func(x, y, z) ( // Đầu tiên kiểm tra xem số lượng đối số có được truyền đúng hay không if (arguments.length != 3) ( Throw new Error("Func được gọi bằng " + đối số.length + " đối số và bắt buộc 3."); ) // Và bây giờ chính mã hàm...)

Lưu ý rằng thường không cần thiết phải kiểm tra số lượng đối số, như trong ví dụ này. Hành vi mặc định của trình thông dịch JavaScript phù hợp với hầu hết các trường hợp: các đối số bị thiếu được thay thế bằng giá trị không xác định và các đối số bổ sung sẽ bị bỏ qua.

Đối tượng Arguments minh họa một tính năng quan trọng của hàm JavaScript: chúng có thể được viết để nhận bất kỳ số lượng đối số nào. Hàm sau đây nhận bất kỳ số lượng đối số nào và trả về giá trị của đối số lớn nhất (hàm Math.max() tích hợp hoạt động tương tự):

Hàm maxNumber() ( var m = Number.NEGATIVE_INFINITY; // Lặp qua tất cả các đối số, tìm và // lưu trữ đối số lớn nhất for(var i = 0; i m) m = đối số[i]; // Return giá trị cao nhất trả lại m; ) var lớn nhất = maxNumber(1, 10, 100, 2, 3, 1000, 4, 5, 10000, 6); // 10000

Các hàm như thế này có thể nhận số lượng đối số tùy ý được gọi là hàm biến đổi, hàm phân thức biến đổi hoặc hàm varargs. Thuật ngữ này nảy sinh cùng với sự ra đời của ngôn ngữ lập trình C.

Lưu ý rằng không được phép gọi các hàm variadic với danh sách đối số trống. Sẽ hoàn toàn hợp lý khi sử dụng đối tượng đối số khi viết một hàm yêu cầu một số lượng cố định các đối số được đặt tên bắt buộc, theo sau là một số lượng đối số không được đặt tên tùy ý.

Đừng quên rằng đối số thực tế không phải là một mảng - đó là đối tượng Đối số. Mỗi đối tượng Arguments có các phần tử mảng được đánh số và thuộc tính độ dài, nhưng về mặt kỹ thuật không phải là một mảng. Tốt hơn nên coi nó như một đối tượng có một số thuộc tính được đánh số.

Ngoài các phần tử mảng của nó, đối tượng Arguments còn xác định các thuộc tính của callee và caller. Việc cố gắng thay đổi giá trị của các thuộc tính này trong chế độ nghiêm ngặt của ECMAScript 5 đảm bảo sẽ tạo ra ngoại lệ TypeError. Tuy nhiên, ở chế độ lỏng lẻo, tiêu chuẩn ECMAScript nêu rõ rằng thuộc tính callee đề cập đến tệp thực thi trong khoảnh khắc này chức năng. Thuộc tính người gọi không phải là thuộc tính tiêu chuẩn, nhưng nó có trong nhiều triển khai và đề cập đến hàm được gọi là hàm hiện tại.

Thuộc tính người gọi có thể được sử dụng để truy cập vào ngăn xếp cuộc gọi và thuộc tính callee đặc biệt hữu ích để gọi đệ quy các hàm chưa được đặt tên:

Biến giai thừa = hàm(x) ( if (x

Thuộc tính và phương thức của hàm

Chúng ta đã thấy rằng các hàm có thể được sử dụng làm giá trị trong các chương trình JavaScript. Toán tử typeof trả về chuỗi "hàm" cho các hàm, nhưng hàm thực sự là một loại đối tượng đặc biệt trong JavaScript. Và vì hàm là đối tượng nên chúng 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. Thậm chí còn có hàm tạo Function() để tạo các đối tượng hàm mới. Các phần phụ sau đây mô tả các thuộc tính và phương thức của hàm.

thuộc tính chiều dài

Trong nội dung hàm, thuộc tính đối số.length chỉ định số lượng đối số được truyền cho hàm. Tuy nhiên, thuộc tính độ dài của hàm lại có ý nghĩa khác. Thuộc tính chỉ đọc này trả về số lượng đối số mà hàm mong đợi nhận được - số lượng tham số đã khai báo.

Đoạn mã sau định nghĩa một hàm có tên check() nhận một mảng đối số từ một hàm khác. Nó so sánh thuộc tính đối số.length (số lượng đối số thực sự được truyền) với thuộc tính đối số.callee.length (số lượng đối số dự kiến) để xác định xem hàm có được truyền nhiều đối số như mong đợi hay không. Nếu các giá trị không khớp, một ngoại lệ sẽ được đưa ra. Tiếp theo hàm check() là hàm kiểm tra, func(), minh họa cách sử dụng hàm check():

// Hàm này sử dụng đối số.callee, vì vậy nó // sẽ không hoạt động ở chế độ nghiêm ngặt function check(args) ( var Real = args.length; // Số lượng đối số thực tế var mong đợi = args.callee.length; // Dự kiến số đối số if (thực tế !== dự kiến) // Nếu chúng không khớp, một ngoại lệ sẽ được đưa ra ném Lỗi mới("mong đợi: " + dự kiến ​​+ "; đã nhận " + thực tế ) function func(x, y, z) ( // Kiểm tra số lượng đối số dự kiến ​​và thực tế đã vượt qua check(arguments); // Bây giờ thực hiện phần còn lại của hàm return x + y + z;

thuộc tính nguyên mẫu

Mọi hàm đều có một thuộc tính nguyên mẫu đề cập đến một đối tượng được gọi là đối tượng nguyên mẫu. Mỗi hàm có đối tượng nguyên mẫu riêng. Khi một hàm được sử dụng làm hàm tạo, đối tượng mới được tạo sẽ kế thừa các thuộc tính của đối tượng nguyên mẫu đó.

Nguyên mẫu và thuộc tính nguyên mẫu đã được thảo luận trong bài viết trước.

phương thức call() và apply()

Các phương thức call() và apply() cho phép bạn gọi một hàm một cách gián tiếp, như thể nó là một phương thức trên một số đối tượng khác. Đối số đầu tiên cho cả hai phương thức call() và apply() là đối tượng mà hàm được gọi trên đó; đối số này chỉ định ngữ cảnh của lệnh gọi và trở thành giá trị của từ khóa this trong nội dung hàm. Để gọi func() (không có đối số) làm phương thức của obj, bạn có thể sử dụng bất kỳ phương thức call() hoặc apply() nào:

Func.call(obj); func.apply(obj);

Cả hai cách gọi nó đều tương đương với đoạn mã sau (giả sử obj không có thuộc tính có tên m):

Obj.m = func; // Tạm thời biến func thành một phương thức obj obj.m(); // Gọi nó mà không cần đối số. xóaobj.m; // Loại bỏ phương thức tạm thời.

Trong chế độ nghiêm ngặt của ECMAScript 5, đối số đầu tiên của phương thức call() và apply() trở thành giá trị của this, ngay cả khi đó là giá trị đơn giản, null hoặc không xác định. Trong ECMAScript 3 và ở chế độ lỏng lẻo, các giá trị null và không xác định được thay thế bằng đối tượng chung và giá trị đơn giản được thay thế bằng đối tượng trình bao bọc tương ứng.

Tất cả các đối số khác cho phương thức call() theo sau đối số đầu tiên chỉ định bối cảnh gọi sẽ được chuyển đến hàm được gọi. Phương thức apply() hoạt động giống như phương thức call(), ngoại trừ việc các đối số của hàm được truyền dưới dạng một mảng. Nếu một hàm có khả năng xử lý số lượng đối số tùy ý, thì phương thức apply() có thể được sử dụng để gọi hàm đó trong ngữ cảnh của một mảng có độ dài tùy ý.

Ví dụ sau đây chứng minh công dụng thực tế phương thức call():

// Dưới đây là hai hàm hiển thị các thuộc tính và // giá trị thuộc tính của một đối tượng tùy ý. Phương thức // các màn hình được truyền dưới dạng đối số func function print1(func, obj) ( for (n in obj) func(n +": " + obj[n]); ) function print2(func, objDevice, obj) ( for ( n in obj) func.call(objDevice, n +": " + obj[n] ) var obj = (x:5, y:10); print2(document.write, document, obj); // Hoạt động chính xác print2(console.log, console, obj); print1(document.write, obj); // Một ngoại lệ gọi bất hợp pháp sẽ xảy ra vì print1(console.log, obj); // không thể gọi các phương thức này nếu không có đối tượng ngữ cảnh

phương thức liên kết ()

Phương thức bind() lần đầu tiên xuất hiện trong ECMAScript 5 nhưng rất dễ bắt chước trong ECMAScript 3. Như tên gọi của nó, mục đích chính của phương thức bind() là liên kết một hàm với một đối tượng. Nếu bạn gọi phương thức bind() của func và truyền cho nó một đối tượng obj, nó sẽ trả về một hàm mới. Gọi một hàm mới (như một hàm bình thường) sẽ thực hiện cuộc gọi chức năng ban đầu func như một phương thức của đối tượng obj. Mọi đối số được truyền cho hàm mới sẽ được chuyển đến hàm ban đầu. Ví dụ:

// Hàm liên kết hàm func(y) ( return this.x + y; ) var obj = (x:1); // Đối tượng cần liên kết với var g = func.bind(obj); // Gọi g(x) sẽ gọi obj.func(x)

Kiểu liên kết này rất dễ triển khai trong ECMAScript 3, như minh họa bên dưới:

// Trả về một hàm gọi func như một phương thức của đối tượng obj // và truyền cho nó tất cả các đối số của nó function bind(func, obj) ( if (func.bind) return func.bind(obj); // Sử dụng phương thức liên kết if có sẵn khác return function() ( // Nếu không thì liên kết như bên dưới return func.apply(obj, đối số); )

Phương thức bind() trong ECMAScript 5 không chỉ liên kết một hàm với một đối tượng. Nó cũng thực hiện truyền một phần: ngoài giá trị this, tất cả các đối số được truyền cho phương thức bind() sau đối số đầu tiên của nó sẽ bị ràng buộc. Ứng dụng một phần là một kỹ thuật phổ biến trong lập trình chức năng và đôi khi được gọi là cà ri.

Hãy bắt đầu với thực tế là ngôn ngữ JavaScript hỗ trợ khái niệm OOP (đối tượng lập trình định hướng). Khái niệm này là có những phần tử như đối tượng và những đối tượng này có nhiều thuộc tính và phương thức (hàm) khác nhau cho phép bạn thao tác với chúng.

Hàm là một khối mã riêng biệt bao gồm một hoặc nhiều nhà khai thác hơn. Nó có tên riêng (duy nhất) và có thể lấy thông số khác nhau, tùy thuộc vào việc nó có thể thực hiện thao tác này hay thao tác khác.

Một phương thức cũng là một hàm, nhưng nó đã thuộc về một lớp hoặc đối tượng nào đó.

Để gọi một phương thức, trước tiên bạn phải viết tên đối tượng, sau đó viết tên phương thức cách nhau bằng dấu chấm. Ngoại lệ đối với quy tắc này là khi gọi các phương thức notification(), confirm(), và nhắc() của đối tượng window. Chúng có thể được gọi mà không cần chỉ định tên đối tượng. Chúng ta đã làm quen với các phương pháp này trong bài viết này.

Ngoài ra, trong các bài viết trước chúng ta đã được giới thiệu về phương thức xuất document.write(), thuộc về đối tượng document.

Vì vậy, trong lập trình có một cơ hội rất quan trọng, đó là bạn có thể tạo ra các hàm của riêng mình.

Cú pháp hàm trông như thế này:


Ví dụ: hãy tạo chức năng đơn giản, thao tác này sẽ thêm văn bản được truyền vào đoạn văn và xuất ra. Và nó cũng sẽ làm cho nó được in đậm và in nghiêng.

Hàm writeText(text)( //Thêm văn bản vào đoạn văn và hiển thị nó document.write("

"+văn bản+"

"); ) //Gọi hàm vừa tạo writeText("Xin chào!");

Lưu tài liệu và mở nó trong trình duyệt.


Bình luận! Khi khai báo một hàm, dù có bao nhiêu toán tử cũng phải có dấu ngoặc nhọn.

Tại sao cần có các hàm trong lập trình?

Ưu điểm chính của việc sử dụng chức năng này là giảm kích thước mã nguồn kịch bản.

Giả sử chúng ta cần lặp lại ba mảng một chiều. Như chúng ta đã biết từ bài viết này: , mảng được lặp bằng vòng lặp. Nếu không có chức năng này, mã cho tập lệnh này sẽ trông như thế này:

//khai báo 3 mảng var Array1 = ; var Array2 = ["b", 5, 9.2, "h", 8, 2]; var Array2 = ; for(var i = 0; i< arr1.length; i++){ document.write("

Phần tử mảng arr1, có chỉ số " + i + " bằng: "+ arr1[i] +"

"); ) for(var i = 0; i< arr2.length; i++){ document.write("

Phần tử mảng arr2, có chỉ số " + i + " bằng: "+ arr2[i] +"

"); ) for(var i = 0; i< arr3.length; i++){ document.write("

Phần tử mảng arr3, có chỉ số " + i + " bằng: "+ arr3[i] +"

"); }

Vì vậy, để không phải viết vòng lặp của riêng mình cho từng mảng, tốt hơn hết bạn nên sử dụng một hàm trong đó chúng ta truyền mảng đó và nó sẽ hiển thị tất cả các phần tử của nó trên màn hình. Bằng cách này, trước tiên, chúng tôi giảm kích thước mã và thứ hai, chúng tôi loại bỏ việc lặp lại mã.

Hàm printArr(arr)( for(var i = 0; i< arr.length; i++){ document.write("

Phần tử mảng có chỉ số " + i + " bằng: "+ arr[i] +"

"); ) ) //khai báo ba mảng var arr1 = ; var arr2 = ["b", 5, 9.2, "h", 8, 2]; var arr2 = ; //Gọi hàm đã tạo để lặp qua từng mảng printArr(arr1); printArr(arr2); printArr(arr3);

Thông số chức năng

Một hàm có thể nhận bất kỳ số lượng tham số nào, từ một đến vô cùng. Hoặc, nó có thể hoàn toàn không có tham số.

Hãy tạo một hàm không tham số sẽ chỉ in cụm từ "Xin chào thế giới" cổ điển ra màn hình.

Hàm helloWorld())( document.write("Hello World"); ) //Gọi hàm không có tham số, helloWorld helloWorld();

Bất kỳ tham số hàm nào cũng có thể có giá trị mặc định riêng. Điều này có nghĩa là nếu chúng ta không truyền bất kỳ giá trị nào khi gọi hàm thông số này, thì nó sử dụng giá trị mặc định của nó.

Ví dụ: hãy tạo một hàm cộng hai số đã truyền. Nếu chúng ta chỉ truyền một số thì theo mặc định, số thứ hai sẽ là 4.

Hàm summa(number1, number2 = 4)( document.write("

Tổng của các số " + number1 + "(Tham số đầu tiên) và " + number2 + "(Tham số thứ hai) bằng: " + (number1 + number2) + "

"); ) //Gọi một hàm, theo mặc định, sẽ đưa ra kết quả của việc cộng số đã truyền, với số 4. summa(5); // Kết quả: 9 //Nếu chúng ta cũng cung cấp tham số thứ hai, thì hàm sẽ đưa ra kết quả của việc cộng các số từ cả hai tham số .summa(5, 20); // Kết quả: 25);

Cũng có thể bên trong một hàm người ta có thể gọi một hàm khác hiện có.

Ví dụ: hãy gọi hàm đầu tiên mà chúng ta đã tạo, writeText(), bên trong hàm summa() trước đó. Chúng ta sẽ chuyển kết quả của việc cộng số vào hàm writeText(). Trong trường hợp này, mã cho hàm summa() sẽ như sau:

Hàm summa(number1, number2 = 4)( writeText(number1 + number2); ) //Gọi hàm summa summa(5); // Kết quả: 9 summa(5, 20); // Kết quả: 25

Hàm trả về một giá trị nào đó

Cho đến nay chúng ta đã viết được các hàm hiển thị kết quả ra màn hình ngay lập tức.

Bây giờ hãy học cách viết một hàm trả về một kết quả nào đó. Chúng ta có thể thêm kết quả này vào một số biến và làm việc với nó hơn nữa.

Để hiểu rõ hơn những gì chúng ta đang nói đến, hãy nhớ các phương thức như nhắc() và confirm(). Các phương thức này thực sự trả về giá trị nhận được từ người dùng, thay vì hiển thị nó.

Ví dụ: hãy tạo hàm riêng để trả về phần tử cuối cùng của mảng được truyền dưới dạng tham số.

Function LastElement(arr)( //Trả về phần tử cuối cùng của mảng đã truyền return arr; ) //Khai báo mảng var otherArr = ["iphone", "asus", 2000, 9.8, "twix"]; //Gọi hàm LastElement đã tạo và truyền mảng đã tạo dưới dạng tham số otherArr var LastEl = LastElement(otherArr); //Hiển thị phần tử cuối cùng của mảng notification(lastEl);

Kết quả chúng ta sẽ nhận được từ 'twix', vì từ này là phần tử cuối cùng của mảng otherArr.

Phương thức Alert() không trả về bất cứ thứ gì. Nghĩa là, nếu chúng ta cố gắng hiển thị một biến có kiểu chứa kết quả của việc gọi phương thức notification(), chúng ta sẽ thấy giá trị unexpected . Điều này cũng giống như việc cố gắng hiển thị giá trị của một biến trống.

Ví dụ: hãy lấy kết quả cuộc gọi cuối Alert() từ ví dụ trước, hãy đặt nó vào biến resAlert và sử dụng hàm writeText mà chúng tôi đã tạo để cố gắng hiển thị kết quả.

//Hiển thị phần tử cuối cùng nhận được của mảng var resAlert = notification(lastEl); thử nghiệm var; writeText(resAlert); // không xác định writeText(test); //không xác định

Như bạn có thể thấy, trong cả hai trường hợp, chúng tôi đều nhận được giá trị không xác định.

Biến toàn cục và cục bộ

Biến toàn cục là những biến được khai báo bên ngoài hàm. Nghĩa là, tất cả các biến không được khai báo bên trong hàm đều là biến toàn cục. Chúng hiển thị (hợp lệ) trong suốt tài liệu.

Biến cục bộ là những biến được khai báo trong chính hàm đó. Và chúng chỉ có giá trị trong một chức năng nhất định. Ngoài nó, các biến cục bộ sẽ không còn hoạt động.

Các biến cục bộ và toàn cục không liên quan đến nhau theo bất kỳ cách nào.


Trong ví dụ từ hình ảnh, nếu chúng ta cố in nội dung của biến x, chúng ta sẽ nhận được thông báo không xác định vì chúng ta quên gọi hàm other().

Vì vậy, để những thay đổi được thực hiện bên trong hàm có thể hoạt động thì cần phải gọi hàm này.

Chúng ta gọi hàm other() và nếu bây giờ chúng ta cố gắng hiển thị giá trị của biến x thì kết quả là số 4.

Để truy cập một biến toàn cục từ bên trong một hàm, bạn không cần phải làm gì cả, bạn chỉ cần sử dụng nó. Những thay đổi được thực hiện đối với các biến toàn cục sẽ hiển thị bên ngoài hàm.

Var x = 8; hàm tăng() ( x++; ) //Gọi hàm tăng() tăng(); cảnh báo(x); //Kết quả: 9

Nếu không muốn biến toàn cục thay đổi, chúng ta phải khai báo một biến cục bộ (có thể có cùng tên với biến toàn cục) và mọi hành động sẽ được thực hiện trên đó.

Var g = 100; function func())( var g = 14; g *= 2; // Điều này giống với g = g * 2 notification(g); // Kết quả: 28 ) // Gọi hàm. chức năng(); cảnh báo(g);//Kết quả: 100

Vậy thôi các bạn độc giả thân mến, bây giờ các bạn đã biết hàm là gì, cách tạo hàm của riêng mình, cách gọi hàm và tồn tại những loại hàm nào. Bạn cũng đã tìm hiểu biến toàn cục và biến cục bộ là gì.

Như tôi đã viết ở đầu bài viết, hàm là thành phần rất quan trọng, vì vậy bạn nên hiểu rõ về chúng.

Nhiệm vụ
  • Tạo một hàm lấy hai số làm tham số và trả về kết quả của phép nhân các số đó.
  • In kết quả.

    • Bài viết đang được phát triển!

    Một bài viết trong đó chúng ta sẽ xem xét hàm là gì, cũng như phiên bản truyền thống (cổ điển) để làm việc với nó. Ngoài ra, chúng ta sẽ phân tích xem đối số (tham số) của hàm và toán tử trả về là gì.

    Chức năng là gì?

    Hàm là một tập hợp các lệnh có thể được đặt tên và sau đó được truy cập bằng tên đó từ bất kỳ đâu trong chương trình.

    Một ví dụ cổ điển về việc sử dụng hàm. Trang web có Mã JavaScript, một số đoạn trong đó được lặp lại nhiều lần. Để tránh điều này, bạn có thể định dạng đoạn này dưới dạng một hàm, sau đó gọi nó ở những vị trí cần thiết trong mã bằng cách sử dụng tên của hàm này. Gọi hàm này có nghĩa là thực hiện các hướng dẫn có trong nó.

    Làm cách nào để tổ chức thực hiện một số tác vụ trong JavaScript bằng các hàm? Để làm điều này bạn thường làm điều này:

    • chia nhiệm vụ thành các phần cấu thành của nó (nhiệm vụ con);
    • nhiệm vụ con được chính thức hóa thông qua các chức năng;
    • phát triển mã chính bằng cách sử dụng lệnh gọi đến các hàm đã tạo.

    Kết quả là, một chương trình như vậy trở nên có cấu trúc hơn. Việc thực hiện các thay đổi khác nhau và thêm các tính năng mới sẽ dễ dàng hơn.

    Khai báo và gọi hàm

    Các thao tác với một hàm trong JavaScript có thể được chia thành 2 bước:

    • khai báo (tạo) một hàm.
    • gọi (thực thi) chức năng này.

    Khai báo hàm. Tạo một hàm trong JavaScript bắt đầu bằng việc viết từ khóa hàm, sau đó là tên hàm, sau đó các tham số được liệt kê trong dấu ngoặc đơn x, nếu cần, theo sau là các hướng dẫn được đặt trong dấu ngoặc nhọn.

    // khai báo hàm someName function someName() ( Alert("Bạn đã gọi hàm someName!"); ) JavaScript - Cú pháp khai báo hàm

    Các hàm loại này trong JavaScript được gọi là các câu lệnh khai báo hàm. Ngoài loại này, JavaScript còn phân biệt giữa biểu thức định nghĩa hàm và hàm biểu thức hàm mũi tên.

    Tên hàm được tạo theo các quy tắc giống như tên biến. Những thứ kia. nó có thể chứa các chữ cái, số (0-9), dấu "$" và "_". Chỉ nên sử dụng các chữ cái trong bảng chữ cái tiếng Anh (a-z, A-Z) làm chữ cái. Tên hàm cũng giống như tên biến, không thể bắt đầu bằng số.

    Một hàm có thể có nhiều tham số như mong muốn hoặc không có tham số nào cả. Dấu ngoặc đơn được bao gồm trong mọi trường hợp. Nếu có nhiều tham số thì chúng phải được phân tách bằng dấu phẩy. Các tham số chức năng được truy cập theo tên của chúng.

    Một tập lệnh được đặt trong dấu ngoặc nhọn là mã hàm sẽ được thực thi khi nó được gọi.

    Lời gọi hàm. Bản thân hàm được khai báo sẽ không được thực thi. Để chạy nó, nó phải được gọi. Một hàm được gọi bằng cách chỉ định tên của nó và hai dấu ngoặc đơn. Đối số được chỉ định bên trong dấu ngoặc đơn nếu cần thiết.

    // gọi hàm trong ví dụ trước someName(); JavaScript - Cú pháp gọi hàm

    Hàm có phải là đối tượng trong JavaScript không?

    Các hàm trong JavaScript là các đối tượng. Trong JavaScript, mọi thứ đều là đối tượng ngoại trừ sáu kiểu dữ liệu nguyên thủy. Và nếu hàm là một đối tượng thì tham chiếu đến nó có thể được lưu trữ trong một biến.

    // khai báo hàm someName function someName() ( Alert("Bạn đã gọi hàm someName!"); ) var reference = someName;

    Sau này, bạn có thể gọi hàm như thế này:

    Thẩm quyền giải quyết();

    Tham số và đối số của hàm

    Đối số của hàm là các giá trị được truyền cho một hàm khi nó được gọi. Các đối số được phân tách với nhau bằng dấu phẩy.

    // gọi hàm sayWelcome truyền hai đối số cho nó sayWelcome("Ivan", "Ivanov"); // một lệnh gọi khác đến hàm sayWelcome với hai đối số sayWelcome("Petr", "Petrov");

    Tham số hàm là một trong những cách trong JavaScript mà bạn có thể truy cập các đối số trong hàm. Các tham số của hàm ở giai đoạn khai báo được mô tả trong ngoặc đơn.

    Nói cách khác, tham số hàm là các biến cục bộ được tạo tự động khi hàm được khởi chạy. Các tham số nhận dưới dạng giá trị mà các đối số tương ứng được truyền cho hàm trong quá trình gọi của nó. Bạn chỉ có thể truy cập các tham số bên trong hàm này; bên ngoài hàm này chúng không tồn tại.

    // khai báo hàm sayWelcome, có hai tham số function sayWelcome (userFirstName, userLastName) ( // một lệnh hiển thị giá trị của tham số “userFirstName” và “userLastName” lên console console.log("Welcome, " + userLastName + " " + userFirstName ; )

    Trong JavaScript, khi gọi một hàm, số lượng đối số không nhất thiết phải giống với số lượng tham số. Các tham số không được đặt thành giá trị khi được gọi sẽ bằng unfined .

    Ví dụ: hãy gọi hàm từ ví dụ trên mà không chỉ định một hoặc hai tham số:

    // gọi hàm sayWelcome và truyền một đối số cho nó sayWelcome("Peter"); // Chào mừng, chưa xác định Peter // gọi hàm sayWelcome mà không truyền bất kỳ đối số nào cho nó sayWelcome(); // Chào mừng, không xác định không xác định

    Một ví dụ về hàm sẽ chỉ xuất các đối số được truyền cho nó tới bảng điều khiển trình duyệt:

    // khai báo hàm function outParam(param1, param2, param3) ( console.log(param1 + "; " + param2 + "; " + param3); ) // gọi tới hàm outParam truyền nó số lượng khác nhau tham số đầu raParam("Mưa","Tuyết","Sương mù"); // Cơn mưa; Tuyết; Đầu ra sương mùParam(17); // 17; không xác định; đầu ra không xác địnhParam(24,33); // 24; 33; đầu ra không xác địnhParam(); // không xác định; không xác định; không xác định

    Một cách khác để truy cập các đối số trong hàm là sử dụng đối tượng đối số đặc biệt. Các đối số được truy cập thông qua các đối số giống như các phần tử của một mảng thông thường, tức là. bằng số serial của chúng. Do đó, đối số - sẽ cho phép bạn lấy đối số đầu tiên, đối số - đối số thứ hai, v.v.

    // khai báo hàm tổng hàm sum(num1, num2) ( /* num1 hoặc đối số – lấy giá trị của đối số 1 num2 hoặc đối số – lấy giá trị của đối số 2 */ var sum1 = num1 + num2, sum2 = đối số + đối số; return "Tổng, thu được theo phương pháp thứ 1 bằng " + sum1 + "; tổng thu được theo phương pháp thứ 2 là " + sum2 ) /* xuất kết quả của hàm sum ra console 7 - đối số đầu tiên (nó có thể được truy cập bằng tên num1 hoặc sử dụng đối số) 4 - đối số thứ hai (có thể truy cập bằng tên num2 hoặc sử dụng đối số) */ console.log(sum(7,4));

    Sự khác biệt chính giữa các phương thức này là phương thức đầu tiên cho phép bạn chỉ truy cập những đối số đã được đặt tên ở giai đoạn khai báo hàm. Phương thức thứ hai cho phép bạn lấy giá trị của bất kỳ đối số nào, ngay cả khi nó không có tên (theo số sê-ri). Đây là một cơ hội Ngôn ngữ JavaScript cho phép bạn tạo các chức năng linh hoạt phổ quát.

    Ngoài việc nhận đối số, đối tượng đối số còn cho bạn biết số lượng đối số. Điều này được thực hiện bằng cách sử dụng thuộc tính length.

    Bạn có thể lặp lại các đối số được truyền cho hàm, chẳng hạn như sử dụng vòng lặp for hoặc cho...của .

    // khai báo hàm tổng hàm sum() ( var i = 0; console.log("Xuất ra tất cả các đối số bằng vòng lặp for"); for (i; i< arguments.length; i++) { console.log(i + 1 + " аргумент равен " + arguments[i]); } console.log("Вывод всех аргументов с помощью цикла for...of"); for (arg of arguments) { console.log(arg); } } // вызов функции sum sum(7, 4, 3, 1);

    Một hàm hiển thị trên bảng điều khiển tất cả các đối số được truyền cho nó và số của chúng:

    // khai báo hàm function myFunction () ( var i; console.log("Số tham số được truyền = " + đối số.length); // hãy xem qua tất cả các tham số bằng vòng lặp for for (i = 0; i< arguments.length; i++) { console.log(i + " параметр = " + arguments[i]); } } // вызовы функции myFunction myFunction(3, 7, 27, "JavaScript"); myFunction(); myFunction("Яблоки", "Груши", "Апельсины");

    Một hàm thực hiện phép cộng tất cả các đối số được truyền cho nó (không xác định trước số lượng của chúng):

    // khai báo hàm var myCalc = function() ( // hãy xem qua tất cả các tham số bằng vòng lặp for var i, sum = 0; for (i = 0; i lt; đối số.length; i++) ( sum += đối số [i] ; ) // trả về tổng dưới dạng kết quả return sum ) // lệnh gọi hàm (xuất ra console) console.log(myCalc(4, 20, 17, -6));

    Kết quả là, bằng cách sử dụng đối tượng đối số, bạn có thể triển khai các thao tác sau trong thân hàm:

    • kiểm tra số lượng đối số được thông qua;
    • xử lý bất kỳ số lượng tham số.

    Ngoài chính hàm đó, các hàm khác nằm trong đó cũng có quyền truy cập vào các đối số được truyền cho nó ở giai đoạn gọi.

    Hàm mainF(p1, p2) ( hàm childF() ( console.log("p1 = " + p1 + "; p2 = " + p2); ) childF(); ) mainF(3, 5); // p1 = 3; p2 = 5 mainF(4, 7); // p1 = 4; p2 = 7

    Thiết lập mặc định

    Bắt đầu với ECMAScript 2015 (6), tham số hàm có thể được đặt thành giá trị mặc định.

    Ví dụ: hãy đặt tham số "color" thành giá trị mặc định của nó, bằng "#009688":

    Hàm setBGColor(color = "#009688") ( document.body.style.backgroundColor = color; ) setBGColor(); // màu nền sẽ là #009688 setBGColor("red"); // màu nền sẽ là màu đỏ

    Trước ECMAScript 2015, bạn có thể đặt tham số về giá trị mặc định, chẳng hạn như sau:

    Hàm setBGColor(color) ( color = color !== không xác định ? color: "#009688"; // đặt màu thành giá trị mặc định của "#009688" document.body.style.backgroundColor = color; )

    Các thông số còn lại

    Nếu khi gọi một hàm, bạn truyền nhiều đối số cho nó hơn số tham số mà nó có, thì bạn có thể lấy các tham số còn lại bằng cách sử dụng cái gọi là các tham số còn lại (các tham số còn lại). Cơ hội này xuất hiện bằng ngôn ngữ bắt đầu bằng ECMAScript 2015.

    // ...nums - các tham số còn lại, có thể được truy cập trong trường hợp này bằng tên nums function doMath(mathAction, ...nums) ( var result = 0; nums.forEach(function(value) ( ​​​​switch ( mathAction) ( case "sum": result += value; break; result = 0; ) return result; ) console.log(doMath("sum", 3, 4, 21, -4)); // 24 (3 + 4 + 21 + (-4)) console.log(doMath("sumSquare", 1, 4)); // 17 (1^2 + 4^2) console.log(doMath("sumCube", 3, 2, 4)); // 99 (3^3 + 2^3 + 4^3)

    tuyên bố trở lại

    Câu lệnh return nhằm mục đích trả về một giá trị hoặc kết quả của việc đánh giá một biểu thức chức năng hiện tại. Giá trị hoặc biểu thức phải được phân tách khỏi kết quả trả về bằng dấu cách. Ngoài ra, câu lệnh return dừng việc thực thi hàm, tức là. tất cả các hướng dẫn sau nó sẽ không được thực thi.

    Một hàm trong JavaScript luôn trả về một kết quả, bất kể câu lệnh return có được sử dụng hay không.

    // hàm trả về kết quả hàm sayWelcome (userFirstName, userLastName) ( if ((!userFirstName) || (!userLastName)) return "Chào mừng, người dùng ẩn danh"; nếu không thì trả về "Chào mừng, " + userLastName + " " + userFirstName ; ) // khai báo biến người var người; // gán kết quả của hàm sayWelcome cho biến người who = sayWelcome("Ivan","Ivanov"); // in giá trị của biến ra console console.log(person); // Lệnh sẽ xuất ra bảng điều khiển kết quả của hàm sayWelcome console.log(sayWelcome("Petr","Petrov")); // Lệnh sẽ xuất ra bảng điều khiển kết quả của hàm sayWelcome console.log(sayWelcome("Sidorov")); JavaScript - Hàm kiểm tra tham số

    Một hàm trong JavaScript luôn trả về một kết quả do quá trình thực thi của nó, ngay cả khi nó không được xác định rõ ràng bằng câu lệnh return. Kết quả này không được xác định.

    // 1. hàm không trả về bất kỳ kết quả nào hàm sayWelcome (userFirstName, userLastName) ( console.log("Welcome, " + userLastName + " " + userFirstName); ) // hãy thử lấy kết quả từ một hàm trả về không trả lại bất cứ thứ gì console .log(sayWelcome("Ivan", "Ivanov")); // 2. hàm chứa câu lệnh return không có giá trị hàm sayDay (day) ( day = "Today," + day; return; // lệnh này sẽ không được thực thi vì nó xuất hiện sau câu lệnh return console.log(day) ; ) // hãy thử lấy kết quả từ một hàm chứa câu lệnh return không có giá trị console.log(sayDay("February 21, 2016")); JavaScript - Nhận giá trị từ một hàm không trả về gì

    Kết quả tương tự sẽ thu được nếu câu lệnh return không chỉ định giá trị trả về.

    Nạp chồng hàm trong JavaScript

    Nạp chồng hàm trong lập trình là khả năng khai báo nhiều hàm với cùng tên trong một phạm vi. Các hàm như vậy khác nhau về loại và số lượng đối số. Mỗi chức năng có logic chương trình riêng. Nạp chồng hàm được sử dụng để có thể thực hiện các hành động tương tự bằng cách sử dụng một tên hàm duy nhất.

    Ngôn ngữ JavaScript không hỗ trợ nạp chồng hàm giống như cách nó được triển khai, chẳng hạn như trong C ngôn ngữ tương tự. Những thứ kia. Trong JavaScript, bạn không thể tạo nhiều hàm có cùng tên trong cùng một phạm vi.

    Chức năng tương tự có thể được triển khai trong JavaScript bằng các bước sau:

    • Để kiểm tra xem một đối số có được truyền hay không, hãy sử dụng điều kiện kiểm tra giá trị của nó cho unfined .
    • Để kiểm tra số lượng đối số được truyền cho một hàm, hãy sử dụng thuộc tính độ dài đối số của đối tượng.
    • Để tìm ra loại giá trị đối số được truyền, hãy sử dụng toán tử typeof hoặc instanceof.
    • Để làm việc với số lượng đối số thay đổi, hãy sử dụng đối tượng đối số.
    • Bắt đầu với ECMAScript6, bạn có thể chỉ định các giá trị mặc định cho các đối số.

    Ví dụ: hãy tạo một hàm có thể được gọi bằng một hoặc hai đối số:

    //khai báo hàm đổi màu lý lịch phần tử hàm setBgColor(bgColor,elements) ( //nếu tham số phần tử không được chỉ định khi gọi if (elements=== unfined) ( //sau đó đặt giá trị của nó thành "div" Elements = "div"; ) //lấy tất cả Elements Elements = $(elements); // Lặp qua tất cả các phần tử và đặt chúng thành màu nền được chỉ định Elements.each(function())( $(this).css("background-color",bgColor); )) / *Gọi hàm setBgColor, chỉ định một tham số. Bởi vì 2 không được chỉ định thì hàm này sẽ thay đổi màu nền của tất cả các phần tử div.*/ setBgColor("green"); /*Gọi hàm setBgColor, chỉ định 2 tham số. Bởi vì 2 tham số được chỉ định, sau đó Chức năng này sẽ chỉ thay đổi màu nền của các thành phần nút.*/ setBgColor("#ff0000","button");

    Hãy thực hiện một số thay đổi đối với đoạn mã trên. Cụ thể, chúng tôi chỉ định giá trị mặc định cho tham số thứ hai:

    // khai báo hàm thay đổi màu nền của các phần tử // tham số phần tử có giá trị "div" theo mặc định hàm setBgColor(bgColor,elements = "div") ( //lấy tất cả các phần tử Elements = $(elements); // lặp lại tất cả các phần tử và đặt chúng thành các phần tử màu nền được chỉ định.each(function())( $(this).css("background-color",bgColor); ) ) //gọi hàm setBgColor, chỉ định một tham số setBgColor("xanh" ); //gọi hàm setBgColor, chỉ định 2 tham số setBgColor("#ff0000","button");

    Một ví dụ về cách trong JavaScript bạn có thể triển khai hàm "quá tải" để tính toán số lượng calo mà một người cần mỗi ngày:

    // mô tả hàm function countCal(sex, chiều cao) ( // tham số: sex (sex) và chiều cao (height) var result; if ((sex === 0) || (sex === "man") ) ( result = (height - 100) * 20; ) else if ((sex === 1) || (sex === "phụ nữ")) ( result = (height - 105) * 19; ) if (kết quả ) ( // đối số - mức độ hoạt động if (đối số) ( result *= đối số; ) console.log("Lượng kcal cho cuộc sống bình thường: " + result) else ( console.log("Tham số không chính xác"); ) ) / * gọi một hàm và truyền 2 đối số cho nó (1 - "man", nó có thể được truy cập bằng tên sex và các đối số; 2 - giá trị 185, nó có thể được truy cập bằng tên sex và các đối số) */ countCal(" đàn ông”, 185); /* gọi một hàm và truyền 3 tham số cho nó, mặc dù chỉ có 2 tham số trong mô tả hàm (trong trường hợp này, bạn chỉ có thể lấy giá trị của tham số thứ 3 làm đối số) */ countCal(0, 185, 2);

    đệ quy

    Đệ quy là lệnh gọi đến chính nó trong phần thân của một hàm nào đó.

    Một hàm thường được gọi tùy thuộc vào cách nó được khai báo theo tên hoặc theo một biến chứa tham chiếu đến hàm.

    Hàm Fact(n) ( if (n === 1) ( return 1; ) return Fact(n-1) * n; ) console.log(fact(5)); // 120

    Bạn có thể gọi một hàm bên trong phần thân của nó không chỉ bằng tên mà còn bằng cách sử dụng thuộc tính callee của đối tượng đối số. Nhưng tài sản này Tốt nhất là không nên sử dụng nó, bởi vì... nó đã lỗi thời. Ngoài ra, ở chế độ nghiêm ngặt, nó hoàn toàn không hoạt động.

    Chức năng tích hợp (tiêu chuẩn) là gì?

    JavaScript có một tập hợp rất lớn các hàm tích hợp (tiêu chuẩn). Các chức năng này đã được mô tả trong chính công cụ trình duyệt. Hầu như tất cả chúng đều là phương thức của đối tượng này hay đối tượng khác.

    Ví dụ: để gọi cảnh báo hàm (phương thức) tích hợp, nó không cần phải khai báo trước. Nó đã được mô tả trong trình duyệt. Phương thức cảnh báo được gọi bằng cách chỉ định tên, dấu ngoặc đơn và đối số bên trong chúng. Phương pháp nàyđược thiết kế để hiển thị một thông báo trên màn hình dưới dạng hộp thoại. Tin nhắn văn bảnđược lấy từ giá trị tham số của hàm này.

    // gọi hàm cảnh báo notification("Some text"); JavaScript - Gọi hàm cảnh báo

    9 câu trả lời

    Có một số cách để xử lý các sự kiện bằng HTML/DOM. Không có cách nào thực sự đúng hay sai, nhưng những cách khác hữu ích trong các tình huống khác nhau.

    1: Định nghĩa nó trong HTML:

    2: Thêm nó vào thuộc tính DOM của sự kiện trong Javascript:

    //- Sử dụng con trỏ hàm: document.getElementById("clickMe").onclick = doFunction; //- Sử dụng hàm ẩn danh: document.getElementById("clickMe").onclick = function () ( Alert("hello!"); );

    3: Và thêm chức năng vào trình xử lý sự kiện bằng Javascript:

    Var el = document.getElementById("clickMe"); if (el.addEventListener) el.addEventListener("click", doFunction, false); khác nếu (el.attachEvent) el.attachEvent("onclick", doFunction);

    Cả hai phương thức thứ hai và thứ ba đều cho phép các hàm nội tuyến/ẩn danh và cả hai đều phải được khai báo sau khi phần tử được phân tích cú pháp khỏi tài liệu. Phương thức đầu tiên không phải là XHTML hợp lệ vì thuộc tính onclick không được chỉ định trong đặc tả XHTML.

    Phương thức thứ nhất và thứ hai loại trừ lẫn nhau, nghĩa là sử dụng một (phương thức thứ hai) sẽ ghi đè lên phương thức kia (phương thức thứ nhất). Phương thức thứ ba sẽ cho phép bạn kết nối bao nhiêu hàm tùy thích với cùng một trình xử lý sự kiện, ngay cả khi phương thức thứ nhất hoặc thứ hai được sử dụng.

    Rất có thể sự cố nằm ở đâu đó trong hàm CapaChart() của bạn. Sau khi truy cập liên kết của bạn và chạy tập lệnh, hàm Dung lượngChart() sẽ chạy và hai cửa sổ bật lên mở ra (một trong số chúng được đóng theo tập lệnh). Nếu bạn có dòng sau:

    Dung lượngWindow.document.write(s);

    Thay vào đó hãy thử điều này:

    Dung lượngWindow.document.open("text/html"); Dung lượngWindow.document.write(s); Dung lượngWindow.document.close();

    THAY ĐỔI
    Khi tôi nhìn thấy mã của bạn, tôi nghĩ bạn đang viết nó dành riêng cho IE. Như đã đề cập, bạn sẽ cần thay thế các tham chiếu đến document.all bằng document.getElementById . Tuy nhiên, sau đó bạn vẫn sẽ phải sửa tập lệnh, vì vậy tôi khuyên bạn nên để nó hoạt động ít nhất trong IE, vì bất kỳ lỗi nào bạn mắc phải khi thay đổi mã để hoạt động trên nhiều trình duyệt có thể gây ra nhiều nhầm lẫn hơn. Sau khi nó hoạt động trong IE, bạn sẽ dễ dàng biết liệu nó có hoạt động trong các trình duyệt khác hay không trong khi bạn cập nhật mã.

    Tôi muốn nói rằng sẽ tốt hơn nếu thêm javascript theo cách không phô trương ...

    nếu bạn đang sử dụng jQuery, bạn có thể làm điều gì đó như:

    $(document).ready(function())( $("#MyButton").click(function())(CapacityChart(); ) ));

    HTML của bạn và cách bạn gọi hàm từ nút có vẻ chính xác.

    Vấn đề nằm ở hàm Dung lượng. Tôi gặp lỗi này trong bảng điều khiển của mình trên Firefox 3.5: "document.all không được xác định" trên dòng 759 của bentelcorp.js.

    Có vẻ như document.all chỉ dành cho IE và một cách không chuẩn mực Truy cập DOM. Nếu bạn sử dụng document.getElementById() thì nó sẽ hoạt động. Ví dụ: document.getElementById("RUnits").value thay vì document.all.Capacity.RUnits.value

    Một trong những vấn đề chính bạn gặp phải là khi bạn sử dụng tính năng đánh hơi trình duyệt mà không có lý do chính đáng:

    If(navigator.appName == "Netscape") ( vesdiameter = document.forms["Volume"].elements["VesDiameter"].value; // nhiều thứ khác được cắt bớt ) else ( vesdiameter = eval(document.all.Volume. VesDiameter.value); // nhiều thứ khác được cắt bớt )

    Tôi đang sử dụng Chrome nên navigator.appName sẽ không phải là Netscape . Chrome có hỗ trợ document.all không? Có thể, nhưng rồi lại có thể không. Còn các trình duyệt khác thì sao?

    Phiên bản mã trong phân nhánh Netscape sẽ hoạt động trên bất kỳ trình duyệt nào từ Netscape Navigator 2 kể từ năm 1996, vì vậy có lẽ bạn chỉ nên giữ nguyên mã đó... ngoại trừ việc nó sẽ không hoạt động (hoặc không được đảm bảo hoạt động) bởi vì bạn đã không chỉ định thuộc tính tênđối với các phần tử đầu vào, vì vậy chúng sẽ không được thêm vào mảng phần tử của biểu mẫu dưới dạng các phần tử được đặt tên:

    Hoặc đặt tên cho chúng và sử dụng mảng phần tử hoặc (tốt hơn) sử dụng

    Var vesdiameter = document.getElementById("VesDiameter").value;

    điều này sẽ hiệu quả với tất cả mọi người trình duyệt hiện đại- không cần phân nhánh. Để đảm bảo an toàn, hãy thay thế điều này bằng cách đánh hơi phiên bản trình duyệt lớn hơn hoặc bằng 4, bằng cách kiểm tra hỗ trợ getElementById:

    If (document.getElementById) ( // NB: không có dấu ngoặc; chúng tôi đang kiểm tra sự tồn tại của phương thức, không thực thi nó // làm nội dung... )

    Có thể bạn cũng muốn xác thực thông tin đầu vào của mình; cái gì đó như

    Var vesdiameter = parsFloat(document.getElementById("VesDiameter").value); if (isNaN(vesdiameter)) ( Alert("Đường kính phải là số"); return; )

    Cập nhật lần cuối: 09/04/2018

    Hàm là một tập hợp các hướng dẫn thực hiện Hành động cụ thể hoặc tính toán một giá trị cụ thể.

    Cú pháp định nghĩa hàm:

    Hàm function_name([parameter [, ...]])( // Hướng dẫn )

    Định nghĩa hàm bắt đầu bằng từ khóa function, theo sau là tên của hàm. Tên hàm tuân theo các quy tắc giống như tên biến: nó chỉ có thể chứa số, chữ cái, dấu gạch dưới và ký tự đô la ($) và phải bắt đầu bằng một chữ cái, dấu gạch dưới hoặc đô la.

    Sau tên hàm, các tham số được liệt kê trong ngoặc đơn. Ngay cả khi một hàm không có tham số thì nó chỉ chứa các dấu ngoặc đơn trống. Sau đó, trong dấu ngoặc nhọn là phần thân hàm chứa một tập hợp các lệnh.

    Hãy xác định hàm đơn giản nhất:

    Hàm display())( document.write("function in JavaScript"); )

    Hàm này được gọi là hiển thị(). Nó không chấp nhận bất kỳ tham số nào và tất cả những gì nó làm là viết một chuỗi lên trang web.

    Tuy nhiên định nghĩa đơn giản Tính năng này vẫn chưa đủ để nó hoạt động. Bạn vẫn cần gọi cho cô ấy:

    hàm display())( document.write("hàm trong JavaScript"); ) display();

    Không cần thiết phải đặt tên cụ thể cho các chức năng. Bạn có thể sử dụng các chức năng ẩn danh:

    Var display = function())( // định nghĩa hàm document.write("function in JavaScript"); ) display();

    Những gì chúng ta đang làm thực chất là xác định một biến hiển thị và gán cho nó một tham chiếu hàm. Và sau đó bằng tên hàm biến gọi điện.

    Chúng ta cũng có thể gán động các hàm cho một biến:

    Hàm goodMorning())( document.write("Chào buổi sáng"); ) function goodEvening())( document.write("Chào buổi tối"); ) var message = goodMorning; tin nhắn(); // Tin nhắn chào buổi sáng = goodEvening; tin nhắn(); // Buổi tối vui vẻ

    Thông số chức năng

    Hãy xem xét việc truyền tham số:

    Hàm display(x)( // định nghĩa hàm var z = x * x; document.write(x + " bình phương bằng " + z); ) display(5); // gọi hàm

    Hàm hiển thị có một tham số - x. Do đó, khi gọi một hàm, chúng ta có thể truyền một giá trị cho nó, ví dụ như số 5, như trong trường hợp này.

    Nếu một hàm nhận nhiều tham số, thì bằng cách sử dụng toán tử trải... chúng ta có thể truyền một tập hợp các giá trị cho các tham số này từ một mảng:

    Hàm sum(a, b, c)( let d = a + b + c; console.log(d); ) sum(1, 2, 3); hãy để số = ; tổng (...số);

    Trong trường hợp thứ hai, các số từ mảng nums được truyền vào hàm. Nhưng để truyền không chỉ một mảng dưới dạng một giá trị mà còn truyền các số từ mảng này, toán tử trải (dấu chấm lửng...) được sử dụng.

    Thông số tùy chọn

    Một hàm có thể nhận nhiều tham số, nhưng một số hoặc tất cả các tham số có thể là tùy chọn. Nếu không có giá trị nào được truyền cho tham số, chúng sẽ mặc định là "không xác định".

    Hàm display(x, y)( if(y === unfined) y = 5; if(x === unfined) x = 8; let z = x * y; console.log(z); ) display() ; // 40 hiển thị(6); // 30 hiển thị(6, 4) // 24

    Ở đây chức năng hiển thị có hai tham số. Khi gọi một hàm, chúng ta có thể kiểm tra giá trị của chúng. Tuy nhiên, khi gọi một hàm, không nhất thiết phải truyền giá trị cho các tham số này. Để kiểm tra sự hiện diện của các giá trị tham số, sử dụng so sánh với giá trị không xác định.

    Có một cách khác để xác định giá trị mặc định cho tham số:

    Hàm display(x = 5, y = 10)( let z = x * y; console.log(z); ) display(); // 50 hiển thị(6); // 60 hiển thị(6, 4) // 24

    Nếu không có giá trị nào được truyền cho tham số x và y thì chúng sẽ thu được lần lượt là giá trị của số 5 và 10. Phương pháp này ngắn gọn và trực quan hơn so với việc so sánh với phương pháp không xác định.

    Trong trường hợp này, giá trị mặc định của tham số có thể được suy ra, biểu thị biểu thức:

    Hàm display(x = 5, y = 10 + x)( let z = x * y; console.log(z); ) display(); // 75 hiển thị(6); // 96 hiển thị(6, 4) // 24

    Trong trường hợp này, giá trị của tham số y phụ thuộc vào giá trị của x.

    Nếu cần, chúng ta có thể lấy tất cả các tham số được truyền thông qua mảng đối số có thể truy cập toàn cục:

    Hàm display())( var z = 1; for(var i=0; i