Hàm mũi tên trong JavaScript

Trong hướng dẫn này, bạn sẽ tìm hiểu về hàm mũi tên của JavaScript với sự trợ giúp của các ví dụ.

Hàm mũi tên là một trong những tính năng được giới thiệu trong phiên bản JavaScript ES6. Nó cho phép bạn tạo các hàm một cách gọn gàng hơn so với các hàm thông thường. Ví dụ,
chức năng này

 // function expression let x = function(x, y) ( return x * y; )

có thể được viết như

 // using arrow functions let x = (x, y) => x * y;

sử dụng hàm mũi tên.

Cú pháp hàm mũi tên

Cú pháp của hàm mũi tên là:

 let myFunction = (arg1, arg2,… argN) => ( statement(s) )

Đây,

  • myFunction là tên của hàm
  • arg1, arg2,… argN là các đối số của hàm
  • statement(s) là cơ quan chức năng

Nếu phần nội dung có một câu lệnh hoặc biểu thức, bạn có thể viết hàm mũi tên dưới dạng:

 let myFunction = (arg1, arg2,… argN) => expression

Ví dụ 1: Hàm mũi tên không có đối số

Nếu một hàm không nhận bất kỳ đối số nào, thì bạn nên sử dụng dấu ngoặc đơn trống. Ví dụ,

 let greet = () => console.log('Hello'); greet(); // Hello

Ví dụ 2: Hàm mũi tên với một đối số

Nếu một hàm chỉ có một đối số, bạn có thể bỏ qua dấu ngoặc đơn. Ví dụ,

 let greet = x => console.log(x); greet('Hello'); // Hello

Ví dụ 3: Hàm mũi tên như một biểu thức

Bạn cũng có thể tự động tạo một hàm và sử dụng nó như một biểu thức. Ví dụ,

 let age = 5; let welcome = (age console.log('Baby') : () => console.log('Adult'); welcome(); // Baby

Ví dụ 4: Hàm mũi tên nhiều dòng

Nếu một thân hàm có nhiều câu lệnh, bạn cần đặt chúng bên trong dấu ngoặc nhọn (). Ví dụ,

 let sum = (a, b) => ( let result = a + b; return result; ) let result1 = sum(5,7); console.log(result1); // 12

điều này với Hàm mũi tên

Bên trong một hàm thông thường, từ khóa này đề cập đến hàm mà nó được gọi.

Tuy nhiên, thiskhông được liên kết với các chức năng mũi tên. Hàm mũi tên không có riêng của nó this. Vì vậy, bất cứ khi nào bạn gọi this, nó đề cập đến phạm vi cha của nó. Ví dụ,

Bên trong một chức năng thông thường

 function Person() ( this.name = 'Jack', this.age = 25, this.sayName = function () ( // this is accessible console.log(this.age); function innerFunc() ( // this refers to the global object console.log(this.age); console.log(this); ) innerFunc(); ) ) let x = new Person(); x.sayName();

Đầu ra

 25 Cửa sổ không xác định ()

Ở đây, this.agebên trong this.sayName()có thể truy cập được vì this.sayName()là phương thức của một đối tượng.

Tuy nhiên, innerFunc()là một hàm bình thường và this.agekhông thể truy cập được vì thistham chiếu đến đối tượng toàn cục (đối tượng Window trong trình duyệt). Do đó, this.agebên trong innerFunc()hàm cung cấp undefined.

Bên trong một hàm mũi tên

 function Person() ( this.name = 'Jack', this.age = 25, this.sayName = function () ( console.log(this.age); let innerFunc = () => ( console.log(this.age); ) innerFunc(); ) ) const x = new Person(); x.sayName();

Đầu ra

 25 25

Ở đây, innerFunc()hàm được định nghĩa bằng cách sử dụng hàm mũi tên. Và bên trong hàm mũi tên, thisđề cập đến phạm vi của cha mẹ. Do đó, this.agecho 25 .

Đối số Ràng buộc

Các hàm thông thường có các đối số ràng buộc. Đó là lý do tại sao khi bạn truyền các đối số cho một hàm thông thường, bạn có thể truy cập chúng bằng argumentstừ khóa. Ví dụ,

 let x = function () ( console.log(arguments); ) x(4,6,7); // Arguments (4, 6, 7)

Hàm mũi tên không có ràng buộc đối số.

Khi bạn cố gắng truy cập một đối số bằng cách sử dụng hàm mũi tên, nó sẽ báo lỗi. Ví dụ,

 let x = () => ( console.log(arguments); ) x(4,6,7); // ReferenceError: Can't find variable: arguments

Để giải quyết vấn đề này, bạn có thể sử dụng cú pháp lây lan. Ví dụ,

 let x = (… n) => ( console.log(n); ) x(4,6,7); // (4, 6, 7)

Hàm mũi tên với lời hứa và lời gọi lại

Các hàm mũi tên cung cấp cú pháp tốt hơn để viết lời hứa và lệnh gọi lại. Ví dụ,

 // ES5 asyncFunction().then(function() ( return asyncFunction1(); )).then(function() ( return asyncFunction2(); )).then(function() ( finish; ));

có thể được viết như

 // ES6 asyncFunction() .then(() => asyncFunction1()) .then(() => asyncFunction2()) .then(() => finish);

Những điều bạn nên tránh với các hàm mũi tên

1. Bạn không nên sử dụng các hàm mũi tên để tạo các phương thức bên trong các đối tượng.

 let person = ( name: 'Jack', age: 25, sayName: () => ( // this refers to the global… // console.log(this.age); ) ) person.sayName(); // undefined

2. Bạn không thể sử dụng một hàm mũi tên như một hàm tạo . Ví dụ,

 let Foo = () => (); let foo = new Foo(); // TypeError: Foo is not a constructor

Lưu ý : Các hàm mũi tên đã được giới thiệu trong ES6 . Một số trình duyệt có thể không hỗ trợ việc sử dụng các chức năng mũi tên. Truy cập hỗ trợ Hàm mũi tên trong JavaScript để tìm hiểu thêm.

thú vị bài viết...