Hướng dẫn javascript info arrow functions - chức năng mũi tên thông tin javascript

Có một cú pháp rất đơn giản và ngắn gọn để tạo các chức năng, mà thường tốt hơn các biểu thức chức năng.

Nó có tên là các chức năng của Mũi tên, vì nó trông như thế này:

let func = (arg1, arg2, ..., argN) => expression;

Điều này tạo ra một hàm

let func = function(arg1, arg2, ..., argN) {
  return expression;
};

let func = function(arg1, arg2, ..., argN) {
  return expression;
};

let func = function(arg1, arg2, ..., argN) {
  return expression;
};

Nói cách khác, nó là phiên bản ngắn hơn của:

let func = function(arg1, arg2, ..., argN) {
  return expression;
};

Hãy cùng xem một ví dụ cụ thể:

let sum = (a, b) => a + b;

/* This arrow function is a shorter form of:

let sum = function(a, b) {
  return a + b;
};
*/

alert( sum(1, 2) ); // 3

Như bạn có thể thấy,

let func = function(arg1, arg2, ..., argN) {
  return expression;
};

let func = function(arg1, arg2, ..., argN) {
  return expression;
};

let func = function(arg1, arg2, ..., argN) {
  return expression;
};

let func = function(arg1, arg2, ..., argN) {
  return expression;
};

• Nếu chúng ta chỉ có một đối số, thì dấu ngoặc đơn xung quanh các tham số có thể được bỏ qua, làm cho điều đó thậm chí còn ngắn hơn.

  Ví dụ:

  let double = n => n * 2;
  // roughly the same as: let double = function(n) { return n * 2 }
  
  alert( double(3) ); // 6

• Nếu không có đối số, dấu ngoặc đơn trống, nhưng chúng phải có mặt:

  let sayHi = () => alert("Hello!");
  
  sayHi();

Các hàm mũi tên có thể được sử dụng theo cách tương tự như các biểu thức chức năng.

Chẳng hạn, để tự động tạo một hàm:

let age = prompt("What is your age?", 18);

let welcome = (age < 18) ?
  () => alert('Hello!') :
  () => alert("Greetings!");

welcome();

Các chức năng mũi tên có thể xuất hiện không quen thuộc và lúc đầu không thể đọc được lắm, nhưng điều đó nhanh chóng thay đổi khi mắt quen với cấu trúc.

Chúng rất thuận tiện cho các hành động một dòng đơn giản, khi chúng tôi quá lười biếng để viết nhiều từ.

Chức năng mũi tên đa dòng

Các chức năng mũi tên mà chúng tôi đã thấy cho đến nay rất đơn giản. Họ đã lấy các đối số từ bên trái của

let sum = (a, b) => a + b;

/* This arrow function is a shorter form of:

let sum = function(a, b) {
  return a + b;
};
*/

alert( sum(1, 2) ); // 3

Đôi khi chúng ta cần một chức năng phức tạp hơn, với nhiều biểu thức và câu lệnh. Trong trường hợp đó, chúng ta có thể gửi chúng trong niềng răng xoăn. Sự khác biệt chính là niềng răng xoăn yêu cầu

let sum = (a, b) => a + b;

/* This arrow function is a shorter form of:

let sum = function(a, b) {
  return a + b;
};
*/

alert( sum(1, 2) ); // 3

Như thế này:

let sum = (a, b) => {  // the curly brace opens a multiline function
  let result = a + b;
  return result; // if we use curly braces, then we need an explicit "return"
};

alert( sum(1, 2) ); // 3

Nhiều hơn nữa sẽ đến

Ở đây chúng tôi ca ngợi các chức năng mũi tên cho sự ngắn gọn. Nhưng đó không phải là tất cả!

Các chức năng mũi tên có các tính năng thú vị khác.

Để nghiên cứu chúng chuyên sâu, trước tiên chúng ta cần tìm hiểu một số khía cạnh khác của JavaScript, vì vậy chúng tôi sẽ quay lại các chức năng mũi tên sau này trong các chức năng mũi tên được xem xét lại.

Hiện tại, chúng tôi đã có thể sử dụng các chức năng mũi tên cho các hành động và gọi lại một dòng.

Bản tóm tắt

Các chức năng mũi tên rất tiện cho các hành động đơn giản, đặc biệt là đối với một lớp lót. Họ có hai hương vị:

1. Không có niềng răng xoăn:

   let sum = (a, b) => a + b;
   
   /* This arrow function is a shorter form of:
   
   let sum = function(a, b) {
     return a + b;
   };
   */
   
   alert( sum(1, 2) ); // 3

   2 - Phía bên phải là một biểu thức: Hàm đánh giá nó và trả về kết quả. Dấu ngoặc đơn có thể được bỏ qua, nếu chỉ có một đối số duy nhất, ví dụ:

   let sum = (a, b) => a + b;
   
   /* This arrow function is a shorter form of:
   
   let sum = function(a, b) {
     return a + b;
   };
   */
   
   alert( sum(1, 2) ); // 3

   3.
2. Với niềng răng xoăn:

   let sum = (a, b) => a + b;
   
   /* This arrow function is a shorter form of:
   
   let sum = function(a, b) {
     return a + b;
   };
   */
   
   alert( sum(1, 2) ); // 3

   4 - Cấu trúc cho phép chúng tôi viết nhiều câu lệnh bên trong hàm, nhưng chúng tôi cần một

   let sum = (a, b) => a + b;
   
   /* This arrow function is a shorter form of:
   
   let sum = function(a, b) {
     return a + b;
   };
   */
   
   alert( sum(1, 2) ); // 3

   1 rõ ràng để trả về một cái gì đó.

Hãy để lại các chức năng mũi tên.

Các chức năng mũi tên không chỉ là một tốc ký của người Viking để viết những thứ nhỏ. Họ có một số tính năng rất cụ thể và hữu ích.

JavaScript có đầy đủ các tình huống mà chúng ta cần viết một chức năng nhỏ mà LỚN thực hiện ở một nơi khác.

Ví dụ:

• let sum = (a, b) => a + b;
  
  /* This arrow function is a shorter form of:
  
  let sum = function(a, b) {
    return a + b;
  };
  */
  
  alert( sum(1, 2) ); // 3

  6 -

  let func = function(arg1, arg2, ..., argN) {
    return expression;
  };

  3 được thực hiện bởi

  let sum = (a, b) => a + b;
  
  /* This arrow function is a shorter form of:
  
  let sum = function(a, b) {
    return a + b;
  };
  */
  
  alert( sum(1, 2) ); // 3

  8 cho mỗi mục mảng.

• let sum = (a, b) => a + b;
  
  /* This arrow function is a shorter form of:
  
  let sum = function(a, b) {
    return a + b;
  };
  */
  
  alert( sum(1, 2) ); // 3

  9-

  let func = function(arg1, arg2, ..., argN) {
    return expression;
  };

  3 được thực hiện bởi bộ lập lịch tích hợp.
• …có nhiều.

Nó trong chính tinh thần của JavaScript để tạo ra một chức năng và vượt qua nó ở đâu đó.

Và trong các chức năng như vậy, chúng tôi thường không muốn rời khỏi bối cảnh hiện tại. Đó là nơi mà các chức năng mũi tên có ích.

Các chức năng mũi tên không có "điều này"

Như chúng ta nhớ từ các phương thức đối tượng chương, "Điều này", các hàm mũi tên không có

let double = n => n * 2;
// roughly the same as: let double = function(n) { return n * 2 }

alert( double(3) ); // 6

let double = n => n * 2;
// roughly the same as: let double = function(n) { return n * 2 }

alert( double(3) ); // 6

Chẳng hạn, chúng ta có thể sử dụng nó để lặp lại bên trong một phương thức đối tượng:

let group = {
  title: "Our Group",
  students: ["John", "Pete", "Alice"],

  showList() {
    this.students.forEach(
      student => alert(this.title + ': ' + student)
    );
  }
};

group.showList();

Ở đây trong

let sum = (a, b) => a + b;

/* This arrow function is a shorter form of:

let sum = function(a, b) {
  return a + b;
};
*/

alert( sum(1, 2) ); // 3

let double = n => n * 2;
// roughly the same as: let double = function(n) { return n * 2 }

alert( double(3) ); // 6

let double = n => n * 2;
// roughly the same as: let double = function(n) { return n * 2 }

alert( double(3) ); // 6

let double = n => n * 2;
// roughly the same as: let double = function(n) { return n * 2 }

alert( double(3) ); // 6

Nếu chúng ta sử dụng chức năng thường xuyên của người Viking, sẽ có một lỗi:

let func = function(arg1, arg2, ..., argN) {
  return expression;
};

Lỗi xảy ra do

let sum = (a, b) => a + b;

/* This arrow function is a shorter form of:

let sum = function(a, b) {
  return a + b;
};
*/

alert( sum(1, 2) ); // 3

let double = n => n * 2;
// roughly the same as: let double = function(n) { return n * 2 }

alert( double(3) ); // 6

let double = n => n * 2;
// roughly the same as: let double = function(n) { return n * 2 }

alert( double(3) ); // 6

Điều đó không ảnh hưởng đến các chức năng mũi tên, bởi vì họ chỉ không có

let double = n => n * 2;
// roughly the same as: let double = function(n) { return n * 2 }

alert( double(3) ); // 6

Các chức năng mũi tên có thể chạy với

let sayHi = () => alert("Hello!");

sayHi();

Không có

let double = n => n * 2;
// roughly the same as: let double = function(n) { return n * 2 }

alert( double(3) ); // 6

let sayHi = () => alert("Hello!");

sayHi();

Hàm mũi tên vs liên kết

Có một sự khác biệt tinh tế giữa hàm mũi tên

let sum = (a, b) => a + b;

/* This arrow function is a shorter form of:

let sum = function(a, b) {
  return a + b;
};
*/

alert( sum(1, 2) ); // 3

let sayHi = () => alert("Hello!");

sayHi();

• let sayHi = () => alert("Hello!");
  
  sayHi();

  5 tạo ra một phiên bản ràng buộc trên mạng của chức năng.
• Mũi tên

  let sum = (a, b) => a + b;
  
  /* This arrow function is a shorter form of:
  
  let sum = function(a, b) {
    return a + b;
  };
  */
  
  alert( sum(1, 2) ); // 3

  0 không tạo ra bất kỳ ràng buộc nào. Hàm đơn giản là không có

  let double = n => n * 2;
  // roughly the same as: let double = function(n) { return n * 2 }
  
  alert( double(3) ); // 6

  1. Việc tra cứu

  let double = n => n * 2;
  // roughly the same as: let double = function(n) { return n * 2 }
  
  alert( double(3) ); // 6

  1 được thực hiện chính xác giống như một tìm kiếm biến thường xuyên: trong môi trường từ vựng bên ngoài.

Mũi tên không có đối số ”

Các hàm mũi tên cũng không có biến

let age = prompt("What is your age?", 18);

let welcome = (age < 18) ?
  () => alert('Hello!') :
  () => alert("Greetings!");

welcome();

Điều đó tuyệt vời cho các nhà trang trí, khi chúng ta cần chuyển tiếp một cuộc gọi với

let double = n => n * 2;
// roughly the same as: let double = function(n) { return n * 2 }

alert( double(3) ); // 6

let age = prompt("What is your age?", 18);

let welcome = (age < 18) ?
  () => alert('Hello!') :
  () => alert("Greetings!");

welcome();

Chẳng hạn,

let age = prompt("What is your age?", 18);

let welcome = (age < 18) ?
  () => alert('Hello!') :
  () => alert("Greetings!");

welcome();

let age = prompt("What is your age?", 18);

let welcome = (age < 18) ?
  () => alert('Hello!') :
  () => alert("Greetings!");

welcome();

let func = function(arg1, arg2, ..., argN) {
  return expression;
};

Điều tương tự mà không có chức năng mũi tên sẽ giống như:

let func = function(arg1, arg2, ..., argN) {
  return expression;
};

Ở đây chúng tôi phải tạo các biến bổ sung

let age = prompt("What is your age?", 18);

let welcome = (age < 18) ?
  () => alert('Hello!') :
  () => alert("Greetings!");

welcome();

let age = prompt("What is your age?", 18);

let welcome = (age < 18) ?
  () => alert('Hello!') :
  () => alert("Greetings!");

welcome();

let age = prompt("What is your age?", 18);

let welcome = (age < 18) ?
  () => alert('Hello!') :
  () => alert("Greetings!");

welcome();

Bản tóm tắt

Hàm mũi tên:

• Không có

  let double = n => n * 2;
  // roughly the same as: let double = function(n) { return n * 2 }
  
  alert( double(3) ); // 6

  1
• Không có

  let age = prompt("What is your age?", 18);
  
  let welcome = (age < 18) ?
    () => alert('Hello!') :
    () => alert("Greetings!");
  
  welcome();

  0
• Có thể được gọi với

  let sayHi = () => alert("Hello!");
  
  sayHi();

  1
• Họ cũng không có

  let sum = (a, b) => {  // the curly brace opens a multiline function
    let result = a + b;
    return result; // if we use curly braces, then we need an explicit "return"
  };
  
  alert( sum(1, 2) ); // 3

  1, nhưng chúng tôi đã nghiên cứu nó. Chúng tôi sẽ trong chương trình thừa kế của lớp chương

Điều đó bởi vì chúng có nghĩa là cho các đoạn mã ngắn không có bối cảnh riêng của họ, mà là hoạt động trong bản hiện tại. Và họ thực sự tỏa sáng trong trường hợp sử dụng đó.