Hôm nay,Thế giới JS share vs ae về một hàm ngắn gọn thường được dùng rất nhiều trong js mà bạn cần phải biết. Hàm trong bất kỳ ngôn ngữ lập trình nào là khối code cơ bản để tạo và kết hợp các phần code có liên quan. Mọi ngôn ngữ lập trình đều cung cấp một số kiểu dữ liệu nhất định để cho bất kỳ hàm nào. Cú pháp hàm mũi tên là một trong những cú pháp được sử dụng nhiều nhất và hiệu quả nhất để tạo một hàm trong JavaScript.
1.Cách tạo hàm mũi tên:
Để viết hàm mũi tên, chỉ cần tạo bất kỳ biến nào, nó có thể là const, let hoặc var nhưng luôn luôn ưu tiên với const để tránh các vấn đề không cần thiết. Và sau đó gán mã hàm cho biến đó. Vì vậy, từ bây giờ, bạn có thể gọi hàm đó bằng cách viết dấu ngoặc đơn trước biến đó. Với cú pháp hàm mũi tên, chúng ta coi hàm là một đối tượng và gán định nghĩa cho một biến nào đó. Sau đây là cú pháp của hàm mũi tên:
// https://vpsus.vn/
// https://www.facebook.com/groups/893052378563701
// https://twitter.com/thegioijs
const myFunction = (param1, param2,
.... paramN) => { // function code }
const myFunction = (param) => { // function code }
or
const myFunction = param => { // function code }
const myFunction = param => { return param*param }
or
const myFunction = param => param*param
Chúng ta có thể bỏ qua dấu ngoặc {} khi chỉ có một câu lệnh và javascript coi câu lệnh đó là giá trị trả về, cũng không cần viết dấu ngoặc đơn () khi chỉ có một tham số. Hàm mũi tên không được chứa dấu ngắt dòng giữa (params) và mũi tên =>, Ngoài ra, không được có bất kỳ khoảng trắng nào giữa các ký tự = và >.
Ví dụ 1: Trong ví dụ này, chúng ta sẽ tạo chương trình để cộng hai số trước bằng hàm bình thường và sau đó sử dụng hàm mũi tên.
Sử dụng hàm bình thường:
<!--
// https://vpsus.vn/
// https://www.facebook.com/groups/893052378563701
// https://twitter.com/thegioijs
-->
script>
function myFunction(){
let a = 5, b = 4;
return a+b;
}
console.log(myFunction());
</script>
Sử dụng hàm mũi tên:
<!--
// https://vpsus.vn/
// https://www.facebook.com/groups/893052378563701
// https://twitter.com/thegioijs
-->
<script>
const myFunction = () =>{
let a = 5, b = 4;
return a+b;
}
console.log(myFunction());
</script>
Đầu ra:
9
Giải thích: Trong hàm mũi tên, chúng ta không viết từ khóa hàm, vì vậy cần phải gán nó cho một loại biến nào đó như ở đây chúng ta đã gán cho một biến hằng có tên là myFunction.
Ví dụ 2: Trong ví dụ này, chúng ta sẽ tạo hàm của các biểu thức đơn bằng cách sử dụng từng hàm bình thường và hàm mũi tên.
Sử dụng hàm bình thường:
<!--
// https://vpsus.vn/
// https://www.facebook.com/groups/893052378563701
// https://twitter.com/thegioijs
-->
<script>
function myFunction(num){
return num*num;
}
console.log(myFunction(4));
</script>
Sử dụng hàm mũi tên:
<!--
// https://vpsus.vn/
// https://www.facebook.com/groups/893052378563701
// https://twitter.com/thegioijs
-->
<script>
const myFunction = num => num*num;
// Equivalent to const myFunction = (num) =>{ return num*num; }
console.log(myFunction(4));
</script>
Đầu ra:
16
Giải thích: Khi chúng ta chỉ có một biểu thức trả về trong hàm, cú pháp mũi tên cung cấp một cách viết dễ dàng hơn. Chúng ta có thể bỏ dấu ngoặc đơn của tham số và cả câu lệnh trả về cùng với dấu ngoặc nhọn của khối mã.
Hạn chế của các hàm mũi tên: Trước đây chúng ta đã thấy chúng ta có thể tạo một hàm bằng cú pháp mũi tên dễ dàng như thế nào, bây giờ cũng là lúc xem xét một số hạn chế vì chúng sẽ không hoạt động tương tự như các hàm bình thường trong một số trường hợp.
Không ràng buộc từ khóa này: Nó không thể được sử dụng như một phương thức vì không có ràng buộc từ khóa này. Hàm mũi tên chứa từ vựng this thay vì của chính chúng. Giá trị của điều này sẽ dựa trên phạm vi mà chúng được xác định. Vì vậy, hàm mũi tên được xác định trong phạm vi cửa sổ do đó điều này sẽ đề cập đến đối tượng cửa sổ thay vì đối tượng mà hàm được viết. Không tồn tại bất kỳ thuộc tính hoặc phương thức nào có ‘num’ do đó không xác định sẽ được in.
<!--
// https://vpsus.vn/
// https://www.facebook.com/groups/893052378563701
// https://twitter.com/thegioijs
-->
<script>
var obj = {
num: 10,
myFunc: () => {console.log(this.num)}
}
obj.myFunc();
</script>
Đầu ra:
undefined
Giải thích: Hàm bình thường chứa this đề cập đến đối tượng mà nó thuộc về, và do đó hàm thuộc về đối tượng obj và thuộc tính num tồn tại bên trong nó, vì vậy sẽ được in thành công.
2.Các hàm mũi tên không thể được sử dụng làm hàm tạo.
Ví dụ:
<!--
// https://vpsus.vn/
// https://www.facebook.com/groups/893052378563701
// https://twitter.com/thegioijs
-->
<script>
var MyFunction = () => {};
var instan = new MyFunction();
</script>
Đầu ra:
3.Các hàm call, áp dụng(apply), liên kết(bind) không hoạt động với các hàm mũi tên:
Dưới đây là phần tóm tắt chung về các khái niệm của các phương thức này với ví dụ về hàm truyền thống và sau này chúng ta sẽ thấy rằng nó sẽ không hoạt động tốt với các hàm mũi tên.
- Phương thức call(): Phương thức này được sử dụng để gọi bất kỳ hàm nào cho một đối tượng và bên trong hàm, this sẽ tham chiếu đến đối tượng được truyền vào.
- Phương thức apply(): Nó cũng hoạt động tương tự như phương thức gọi. Thay vì truyền các đối số riêng biệt ở đây, chúng tôi truyền một mảng các đối số.
- Phương thức bind(): Phương thức này cũng được sử dụng để gọi bất kỳ hàm nào cho một đối tượng nhưng nó tạo ra một bản sao khác của hàm đó bằng cách liên kết đối tượng với cái có thể được sử dụng sau này.
Ví dụ:
// https://vpsus.vn/
// https://www.facebook.com/groups/893052378563701
// https://twitter.com/thegioijs
let studentObj1 = {
studentName: "Wikicode dev 1",
branch:"Computer Science & Engineering"
}
function showDetails(position) {
console.log(`${this.studentName} of ${this.branch} is a ${position}`)
}
showDetails.call(studentObj1, "Wikicode Writer");
showDetails.apply(studentObj1, ["Wikicode Writer"]);
const myFunction = showDetails.bind(studentObj1);
myFunction("Wikicode Writer");
Đầu ra:
Giải thích: Bởi vì điều này đề cập đến phạm vi trong đó hàm mũi tên được khai báo có nghĩa là window. Đây là lý do tại sao các phương thức call, apply và bind không hoạt động với hàm mũi tên. Do đó, chúng ta chỉ có thể truy cập window với sự trợ giúp của hàm mũi tên. Và vì thuộc tính student name và branch không tồn tại trong đối tượng window nên không xác định(undefined) sẽ được in.
Trên đây là tất cả những gì về hàm Hàm mũi tên trong javascript mà bạn cần biết. Nếu bạn có bất kỳ câu hỏi liên quan tới Hàm mũi tên, hãy chủ động liên hệ và inbox cho chúng tôi, để giúp đỡ bạn sớm nhất
Tiếp theo, hãy cùng Thế giới JS tìm hiểu thêm các kiến thức về Javascript trong các bài tiếp theo trong series học miễn phí Javascript từ cơ bản tới nâng cao.
Nếu bạn cảm thấy hữu ích và yêu thích Thế giới JS, hãy tham gia và theo dõi chúng tôi để nhận thêm nhiều kiến thức MIỄN PHÍ hơn nữa nhé:
Share to learn more than!
