Các hàm là một phần thiết yếu của JavaScript mà bạn cần sử dụng để viết mã có thể tái sử dụng. Hai loại hàm chính là hàm thông thường và hàm mũi tên, và có nhiều cách để định nghĩa chúng.
Mặc dù chúng đáp ứng các nhu cầu tương tự, nhưng chúng có một số điểm khác biệt quan trọng có thể ảnh hưởng cơ bản đến cách bạn sử dụng chúng trong mã của mình. Tìm hiểu tất cả về một số khác biệt giữa hàm mũi tên và hàm thông thường.
1. Sự khác biệt về cú pháp
Cú pháp bạn chọn khi phát triển các hàm JavaScript có tác động lớn đến mức độ đơn giản để đọc và hiểu mã của bạn. Cú pháp của hàm thông thường và hàm mũi tên khác nhau đáng kể, ảnh hưởng đến cách bạn viết và sử dụng chúng.
Các hàm mũi tên JavaScript sử dụng cấu trúc ngôn ngữ nhỏ hơn dễ hiểu hơn. Bạn có thể sử dụng chúng để tạo các hàm bằng cách kết hợp chúng thành một biểu thức hoặc câu lệnh duy nhất.
const add = (a, b) => a + b;
Trong ví dụ này, các thêm vào chức năng chấp nhận hai đầu vào, Một Và b, và trả về tổng số của họ. Các => sign định nghĩa đây là một hàm mũi tên.
Mặt khác, việc xác định một hàm thông thường yêu cầu sử dụng hàm chức năng từ khóa, với cú pháp dài dòng hơn, như trong ví dụ này:
function add(a, b) {
return a + b;
}
Trong ví dụ này, các chức năng từ khóa định nghĩa một hàm thông thường cũng sử dụng dấu ngoặc nhọn và trở lại tuyên bố.
Các hàm thông thường hữu ích hơn cho cú pháp phức tạp yêu cầu nhiều câu lệnh hoặc biểu thức. Ngược lại, các hàm mũi tên sử dụng cú pháp ngắn gọn hơn có thể làm cho mã của bạn dễ đọc và dễ hiểu hơn.
2. Phạm vi khác biệt
Thuật ngữ “phạm vi” mô tả cách truy cập các biến nội bộ và chức năng của hàm. Trong JavaScript, bạn xác định và truy cập các biến cũng như hàm trong toàn bộ mã của mình bằng cách sử dụng phạm vi. Phạm vi riêng biệt của chúng có thể tác động đáng kể đến cách bạn viết và sử dụng các hàm thông thường và mũi tên của JavaScript.
Trong phạm vi, cách các chức năng mũi tên xử lý cái này từ khóa khác đáng kể so với cách hoạt động của các chức năng bình thường. Các hàm thông thường xác định cái này từ khóa chính họ; do đó, nó có thể thay đổi tùy thuộc vào ngữ cảnh mà bạn gọi hàm.
Mặt khác, do không quy định cụ thể cái này từ khóa, chức năng mũi tên sử dụng giống nhau cái này như phạm vi tĩnh bao quanh chúng.
Để thấy sự khác biệt, hãy xem ví dụ sau. Giả sử bạn có một người đối tượng với một tên thuộc tính và một phương thức gọi là sayName() ghi nhật ký tên của người đó bằng một hàm thông thường:
const person = {
name: 'John,'
sayName: function() {
console.log(this.name);
}
};
person.sayName();
Ở đây, hàm sayName() thông thường là một phương thức của đối tượng người và cái này từ khóa bên trong chức năng đó đề cập đến đối tượng người đó.
Bây giờ chúng ta hãy thử điều tương tự với chức năng mũi tên:
const person = {
name: 'John',
sayName: () => {
console.log(this.name);
}
};
person.sayName();
Bởi vì chức năng mũi tên được sử dụng trong sayName() phương pháp không xác định riêng của mình cái này từ khóa, nó sử dụng cái này của phạm vi tĩnh bao quanh nó. Trong trường hợp này, đó là phạm vi toàn cục của thể hiện.
Kết quả là, khi bạn gọi người.sayName()bạn lấy không xác định còn hơn là “John.” Điều này có thể ảnh hưởng đáng kể đến cách bạn viết và sử dụng các hàm trong mã của mình.
3. Các trường hợp sử dụng và các phương pháp hay nhất
Các chức năng thông thường phù hợp hơn cho các chức năng yêu cầu riêng của họ cái này từ khóa, chẳng hạn như các phương thức trong một đối tượng.
Các hàm mũi tên phù hợp hơn cho lập trình chức năng và gọi lại không yêu cầu cái này từ khóa.
4. Sự khác biệt về ràng buộc chức năng
Liên kết chức năng là thuật ngữ được sử dụng để mô tả mối quan hệ giữa cái này từ khóa và chức năng trong mã của bạn. Các biến thể trong liên kết hàm giữa các hàm mũi tên và các hàm thông thường có thể tác động mạnh đến cách bạn xây dựng và sử dụng các hàm mũi tên.
Sử dụng cái này từ khóa làm cho nó trở thành duy nhất trong các hàm thông thường và liên kết với các đối tượng khác nhau dựa trên phương thức được sử dụng để gọi hàm. Liên kết chức năng là một trong những điểm khác biệt quan trọng nhất giữa chức năng thông thường và chức năng mũi tên.
Ngược lại, các chức năng mũi tên không có cái này từ khóa; đúng hơn, họ lấy nó từ các phạm vi xung quanh.
Hãy xem một ví dụ để hiểu thêm về sự khác biệt này. Giả sử bạn có một người đối tượng với một tên trường và một phương thức gọi là sayName() sử dụng một chức năng thông thường để ghi lại tên của người đó:
const person = {
name: 'John',
sayName: function() {
console.log(this.name);
}
};
const anotherPerson = {
name: 'Jane'
};
person.sayName.call(anotherPerson);
Trong ví dụ này, bạn gọi đối tượng người sayName() phương pháp với giá trị người khác sử dụng gọi() phương pháp. Bởi vì điều này, các sayName() phương pháp, cái nàytừ khóa được liên kết với người khác đối tượng và nó ghi nhật ký “Jane” còn hơn là “John.”
Bây giờ chúng ta hãy sử dụng điều tương tự với chức năng mũi tên:
const person = {
name: 'John',
sayName: () => {
console.log(this.name);
}
};
const anotherPerson = {
name: 'Jane'
};
person.sayName.call(anotherPerson);
Kể từ khi sayName() kỹ thuật không có từ khóa riêng, bạn đang sử dụng hàm mũi tên bên trong nó trong ví dụ này. Trong trường hợp này, arrow function kế thừa các thuộc tính của phạm vi xung quanh, đó là phạm vi toàn cục.
Điều này có nghĩa là khi bạn chạy person.sayName.call(anotherPerson)hàm mũi tên cái này từ khóa vẫn là đối tượng toàn cầu và không xác định chiếm vị trí của Jane trong nhật ký.
Nếu bạn cần liên kết một chức năng với một cụ thể cái này giá trị, một chức năng thông thường có thể thích hợp hơn. Tuy nhiên, nếu bạn không cần liên kết một hàm với một hàm cụ thể cái này giá trị, một hàm mũi tên có thể ngắn hơn và dễ hiểu hơn.
5. Trả lại ngầm định
Hàm mũi tên có tính năng trả về ngầm định. Nếu thân hàm bao gồm một biểu thức duy nhất, thì các hàm sẽ trả về biểu thức đó.
Như một ví dụ:
const double = (x) => x * 2;
Hàm mũi tên này trả về giá trị gấp đôi từ một tham số. Bạn không cần phải sử dụng một cách rõ ràng trở lại từ khóa vì thân hàm chỉ có một biểu thức.
6. Sự khác biệt về khả năng tương thích
Sự khác biệt về khả năng tương thích đề cập đến các chức năng mũi tên được thêm vào ECMAScript 6, có thể không hoạt động với các trình duyệt hoặc môi trường cũ hơn. Mặt khác, các chức năng thông thường đã xuất hiện từ đầu JavaScript và được hỗ trợ rộng rãi.
Dưới đây là minh họa về chức năng mũi tên có thể không hoạt động trong các điều kiện được thiết lập nhiều hơn:
const add = (a, b) => a + b;
Sau đây là một hàm thông thường có thể so sánh được nên hoạt động trong hầu hết các tình huống:
function add(a, b) {
return a + b;
}
Sử dụng các hàm thông thường thay vì các hàm mũi tên khi nhắm mục tiêu các môi trường cũ hơn để đảm bảo khả năng tương thích. Tuy nhiên, các hàm mũi tên có thể cung cấp một cú pháp dễ hiểu hơn và cô đọng hơn khi làm việc với các trình duyệt và môi trường hiện đại.
Lựa chọn giữa Hàm mũi tên và Hàm thông thường trong JavaScript
Trong JavaScript, mũi tên và các hàm thông thường có các tính năng và ứng dụng riêng biệt. Hàm mũi tên có cú pháp đơn giản, kế thừa cái này thuật ngữ từ khóa khỏi ngữ cảnh sử dụng của chúng trong khi các chức năng thông thường dễ thích ứng hơn và có thể xử lý các tình huống phức tạp hơn.
Điều quan trọng là phải biết chúng khác nhau như thế nào và cách sử dụng chúng theo yêu cầu của mã của bạn. Khi chọn loại chức năng để sử dụng, bạn cũng nên xem xét sự khác biệt về khả năng tương thích.
Cuối cùng, mũi tên của JavaScript và các hàm thông thường là những công cụ mạnh mẽ giúp bạn viết mã sạch hơn và hiệu quả hơn.
