Hàm JavaScript

Các hàm JavaScript có khả năng không chỉ đơn thuần là bao gồm một loạt các mã trong khi chờ lệnh thực thi. Các hàm đã phát triển theo thời gian dẫn đến các định nghĩa, phương thức thực hiện và cú pháp mới. Bài đăng này sẽ đề cập đến một số vai trò hiện tại mà các hàm JavaScript đã chơi.

Biết các cách khác nhau để thể hiện và xác định hàm mở ra khả năng thực hiện logic theo cách tối ưu hơn trong JavaScript. Ngoài ra, bạn có thể trả lời các câu hỏi phỏng vấn dễ dàng hơn.

Biểu thức chức năng

Khi bạn chỉ cần nêu một chức năng với chức năng từ khóa, tham số tùy chọn và thân mã, đó là một chức năng tờ khai.

Đặt khai báo đó trong một biểu thức JavaScript (như trong một biểu thức gán hoặc số học), nó trở thành một biểu thức chức năng biểu hiện.

// Hàm khai báo hàm function_name () ; // Biểu thức hàm var function_name = function () ; 

Tất cả các khai báo JavaScript được nâng lên (di chuyển lên trong phạm vi) trong quá trình đánh giá. Do đó, viết một lệnh gọi hàm trước khi khai báo hàm là được (vì khai báo sẽ được chuyển lên bằng mọi cách).

function_name (); // chức năng gọi [WORKS] function function_name () ; 

Tuy nhiên, các biểu thức hàm không được nâng lên vì các hàm trở thành một phần của biểu thức và không phải là khai báo độc lập.

function_name (); // gọi hàm [WON'T WORK] var function_name = function () ; 

Biểu hiện chức năng được gọi ngay lập tức (IIFE)

Đó là một biểu thức hàm, mã được thực thi ngay lập tức (chỉ một lần khi nó được đánh giá). Bạn có thể tạo một cái bằng cách thêm () (cú pháp được sử dụng để gọi hàm) ngay sau biểu thức hàm. Họ có thể ẩn danh (không có tên để gọi nó).

Dưới đây là hai cú pháp phổ biến nhất để tạo IIFE:

(chức năng tùy chọn_feft_name () // body ()); 

và

(chức năng tùy chọn_feft_name () // body) (); 

Dấu ngoặc quanh khai báo hàm chuyển đổi nó thành biểu thức và sau đó thêm () sau khi nó gọi hàm. Bạn có thể sử dụng các cách khác để tạo IIFE miễn là bạn thêm () sau một biểu thức hàm (như bên dưới), nhưng các phương thức ưa thích là hai phương thức trên.

// Một số cách để tạo IIFE! Function () / * '* * / (); + hàm () / * Nhìn * / (); hàm mới () / * Nhìn * /; 

IIFE là lý tưởng để viết mã chỉ cần thực thi một lần, không gian tên, tạo các bao đóng, tạo các biến riêng tư và hơn thế nữa. Dưới đây là một ví dụ về việc sử dụng IIFE.

var page_lingu = (function () var lang; // Code để lấy ngôn ngữ của trang return lang;) (); 

Mã để có được ngôn ngữ của trang chỉ thực hiện một lần (tốt nhất là sau khi tải trang). Kết quả được lưu trữ trong page_lingu để sử dụng sau.

Phương pháp

Khi một hàm là thuộc tính của đối tượng, nó được gọi là phương thức. Vì một hàm cũng là một đối tượng, nên một hàm bên trong một hàm khác cũng là một phương thức. Dưới đây là một ví dụ cho một phương thức bên trong đối tượng.

var calc = add: function (a, b) return a + b, sub: function (a, b) return a-b console.log (calc.add (1,2)); // 3 console.log (calc.sub (80,2)); // 78 

Các thêm vào và phụ chức năng là phương pháp của calc vật.

Bây giờ cho một chức năng trong ví dụ chức năng:

hàm add (a) return function (b) return a + b; console.log (add (1) (2)); // Kết quả là 3 

Hàm ẩn danh được trả về là một phương thức của hàm thêm vào.

Lưu ý: Vì tham số (một) của chức năng thêm vào trong ví dụ trên có sẵn cho hàm gọi sau, loại quy trình này được gọi là cà ri.

Người xây dựng

Khi bạn thêm Mới từ khóa trước một hàm và gọi nó, nó trở thành một hàm tạo tạo các thể hiện. Dưới đây là một ví dụ trong đó các hàm tạo được sử dụng để tạo các thể hiện của Trái cây và các giá trị được thêm vào mỗi Trái câytài sản của.

hàm Fruit () tên var, họ; // Tên khoa học & họ this.getName = function () return name;; this .setName = function (value) name = value; this .getF Family = function () return Family;; this .setF Family = function (value) family = value;  var apple = new Fruit (); apple.setName ("Malus domestica"); apple.setF Family ("Rosaceae"); var cam = trái cây mới (); cam.setName ("Citrus à ??  ?? â ?? sinensis "); cam.setF Family (" Rutaceae "); console.log (cam.getName ()); //" Citrus à ??  ?? â ?? sinensis "console.log (apple.getName ()); //" Malus domestica "console.log (cam.getF Family ()); //" Rutaceae " 

Hàm mũi tên (Tiêu chuẩn ES6) [Chỉ có trong Firefox]

Một định nghĩa hàm mới từ ES6 Standard cung cấp một cú pháp ngắn hơn cho biểu thức hàm. Cú pháp là

() => / * cơ thể * / 

Hàm mẫu này:

var sing = function () console.log ('hát'); 

giống như:

var sing = () => console.log ('hát hát'); 

Các hàm mũi tên là ẩn danh và không có hàm riêng điều này giá trị, điều này bên trong nó sẽ giống như điều này trong mã kèm theo. Ngoài ra, bạn không thể thay đổi nó thành một hàm tạo với Mới từ khóa.

Chúng rất hữu ích khi bạn muốn điều này bên trong một hàm giống như bên ngoài và cú pháp ngắn hơn của nó tạo mã cho hàm ghi trong hàm ngắn gọn (như bên dưới)

setInterval (function () console.log ('message'), 1000); 

vào

setInterval (() => console.log ('tin nhắn'), 1000); 

Các hàm tạo (Tiêu chuẩn ES6) [Chỉ có trong Firefox]

Một định nghĩa chức năng mới khác từ ES6 Standard là Chức năng tạo. Các chức năng tạo có khả năng tạm dừng và tiếp tục thực hiện. Cú pháp của nó là:

hàm * function_name ()  

hoặc là

hàm * function_name ()  

Các hàm tạo tạo các vòng lặp. Trình vòng lặp kế tiếp Phương thức sau đó được sử dụng để thực thi mã bên trong hàm tạo cho đến khi năng suất từ khóa đạt được. Sau đó, giá trị lặp được xác định bởi năng suất từ khóa được trả về bởi hàm tạo và việc thực thi bị dừng lại.

Hàm tạo lại thực thi khi kế tiếp phương thức được gọi cho đến tiếp theo năng suất từ khóa đạt được. Một khi tất cả năng suất biểu thức được thực thi, trả về giá trị mang lại chưa xác định.

Dưới đây là một ví dụ đơn giản:

hàm * Generator_func (tính) for (var i = 0; i 
Đây là một ví dụ khác:
 
hàm * RandomIncrement (i) suất i + 3; năng suất i + 5; năng suất i + 10; năng suất i + 6;  var itr = RandomIncrement (4); console.log (itr.next (). value); // 7 console.log (itr.next (). Value); // 9 console.log (itr.next (). Value); // 14 
 
Cũng có một năng suất * biểu thức chuyển giá trị này sang hàm tạo khác
 
chức năng * trái cây (trái cây) năng suất * rau (trái cây); năng suất "Nho";  chức năng * rau (trái cây) năng suất trái cây + "và rau bina"; năng suất trái cây + "và bông cải xanh"; năng suất trái cây + "và dưa chuột";  var itr = trái cây ("Apple"); console.log (itr.next (). value); // "Apple và Spinach" console.log (itr.next (). Value); // "Apple và Broccoli" console.log (itr.next (). Value); // "Apple và dưa chuột" console.log (itr.next (). Value); // "Nho" console.log (itr.next (). Value); //chưa xác định 
 
Các hàm của trình tạo rất hữu ích nếu bạn muốn lần lượt đi qua các giá trị tại điểm ưa thích của bạn trong mã bằng cách tạm dừng nó, thay vì đi một vòng như trong việc lặp qua một mảng.
 
Phần kết luận
 
Tôi đã bao gồm một danh sách các tài liệu tham khảo bên dưới, nơi bạn sẽ tìm thấy các liên kết đến các tài liệu tham khảo và bài viết chuyên sâu về các chủ đề khác nhau. Cả hai chức năng tiêu chuẩn ES6 sẽ chỉ hoạt động trong Firefox tại thời điểm này.
 
Tài liệu tham khảo
 
Ngôn ngữ ECMAScript: Chức năng và Lớp học
 
Biểu hiện chức năng được gọi ngay lập tức (IIFE)
 
Khái niệm cơ bản về máy phát điện ES6
 
Chức năng mũi tên
 
Chức năng - Mạng lưới nhà phát triển Mozilla