Hàm thông thường so với hàm Mũi tên
Một hàm mũi tên được sử dụng để viết mã một cách ngắn gọn. Cả hai chức năng thông thường và mũi tên hoạt động theo cách tương tự nhưng có một số khác biệt giữa chúng. Tóm lại, hãy thảo luận về những khác biệt đó.
cú pháp của một hàm mũi tên
let x = (params) => {
// code
}; cú pháp của một hàm thông thường
let x = function functionname(params){
// code
}; Cách sử dụng từ khóa "this"
Không thể sử dụng từ khóa "this" trong các hàm mũi tên trong khi trong các hàm thông thường, nó có thể được sử dụng mà không có bất kỳ sự xáo trộn nào.
Ví dụ
Trong ví dụ sau, cả thông thường (hình chữ nhật) và mũi tên các hàm (hình vuông) đã được sử dụng bên trong đối tượng " num ", bao gồm các thuộc tính len (chiều dài) và bre (chiều rộng). Mục đích của chúng tôi là tìm diện tích của hình vuông (len * len) bằng cách sử dụng hàm mũi tên và diện tích của hình chữ nhật (len * bre) bằng cách sử dụng thông thường chức năng. Nhưng kể từ " this "từ khóa không hoạt động trong chức năng mũi tên giá trị của diện tích hình vuông được trả lại là " NaN "trong khi sử dụng thông thường hàm, chúng tôi có một khu vực chính xác của hình chữ nhật như được hiển thị trong đầu ra.
<html>
<body>
<script>
var num = {
len: 12,
bre: 13,
square:() => {
document.write(this.len * this.len);
},
rectangle(){
document.write(this.len * this.bre);
}
};
num.square();
document.write("</br>");
num.rectangle();
</script>
</body>
</html> Đầu ra
NaN 156
Cách sử dụng từ khóa 'mới'
Hàm mũi tên không phải là "có thể xây dựng được "nhưng" có thể gọi được "so từ khóa" mới "không hoạt động ở đây trong khi chức năng thông thường đều là " có thể gọi được "và" có thể xây dựng "do đó" mới "từ khóa hoạt động ở đây.
Ví dụ
Trong ví dụ sau, Sử dụng " new "một số đối số đã được chuyển cho cả từ khóa thông thường và mũi tên chức năng. Nhưng kể từ khi chức năng mũi tên không phải là " có thể xây dựng "chúng tôi sẽ gặp lỗi trong khi chúng tôi sẽ nhận được đầu ra hợp pháp cho chức năng thông thường .
<html>
<body>
<script>
var word = function(){
document.write(JSON.stringify(arguments));
/// executes '{"0":"Tutorix","1":"Tutorialspoint"}' as output
};
new word("Tutorix","Tutorialspoint");
var newword = ()=> {
document.write(JSON.stringify(arguments));
//executes 'newword is not a constructor' as output
};
new newword("Tutorix","Tutorialspoint");
</script>
</body>
</html>