Arrow Function là một tính năng của ES6, Arrow Function đã trở nên phổ biến. Vậy thì tại sao lại không nên sử dụng Arrow Function?
Khi nhắc đến Arrow Function.
-
Ai mà không yêu từ cái nhìn đầu tiên?
-
Ai mà không thích sự đơn giản của arrow function chứ?
Cú pháp của arrow function giúp chúng ta khai báo các hàm quá dễ dàng, tiết kiệm thời gian và tăng cường sự rõ ràng trong nhiều tình huống, loại bỏ tất cả những thứ gây mất tập trung, không cần thiết.
Hãy lấy một ví dụ về khai báo hàm thông thường và cùng một hàm sử dụng arrow function.
Trước đây:
function chao() {
return "Chào mừng bạn đến với Arrow Function!";
}
Với Arrow Function trong Phiên bản ES6 (Đọc thêm: Các tính năng của ES6):
const chao = () => "Chào mừng bạn đến với Arrow Function!";
Có rõ ràng không?
Hãy so sánh một ví dụ khác:
const f = list.map(function(item) { return item; })
Với...
const f = list.map((item) => item)
Code có đẹp không?
Có!
Vậy...
Có vấn đề gì ở Arrow Function?
Arrow Function rất tiện lợi.
Tuy nhiên, chúng ta cần phải cẩn thận, vì sự khác biệt giữa 2 khai báo không chỉ là ở cú pháp và do đó nó không nên sử dụng Arrow Function trong MỘT SỐ TRƯỜNG HỢP.
Bây giờ chúng ta hãy xem xét các tình huống mà bạn không nên sử dụng arrow function.
Hãy xem ví dụ sau:
const baiViet = {
likes: 0,
like: () => {
this.likes++;
}
}
Trong ví dụ này, bạn có thể nghĩ rằng mỗi khi chúng ta gọi baiViet.like() thì thuộc tính baiViet.likes sẽ tăng lên 1 (ban đầu là 0).
Tuy nhiên, không phải vậy, trong trường hợp này likes sẽ không tăng lên.
Nó vẫn như vậy và bài viết này sẽ không bao giờ được nhiều like.
Tại sao nhỉ?
Có vấn đề gì ở đây?
Vâng, vấn đề là ở this và phạm vi.
Như MDN đã nói:
"Một Arrow Function Expression là một thay thế nhỏ gọn về mặt cú pháp cho Biểu thức hàm thông thường, mặc dù không có ràng buộc riêng với các từ khóa this, arguments, super hoặc new.target. Arrow Function Expression không phù hợp để làm phương thức và constructor"
Nghĩa là trong trường hợp của chúng ta, phạm vi kèm theo sẽ là đối tượng window. Khi gọi phương thức like() đơn giản là chúng ta đang cố gắng tăng thuộc tính likes trên đối tượng window.
Trong trường hợp này, chúng ta sử dụng cú pháp truyền thống:
const baiViet = {
likes: 0,
like: function () {
this.likes++;
}
}
Một ví dụ thực tế chức năng like bài viết.
Tương tự như ví dụ trên, object prototypes sẽ đánh giá this là đối tượng window, giống như trong ví dụ sau:
class BaiViet {
constructor(tieuDe) {
this.tieuDe = tieuDe;
this.chiaSe = false;
}
};
BaiViet.prototype.chiaSe = () => {
return this.chiaSe = true;
};
Tương tự, giống trường hợp trước, phương thức chiaSe() sẽ không hoạt động do phạm vi kèm theo đối tượng window.
Và một lần nữa, giải pháp là làm theo cách thông thường:
BaiViet.prototype.chiaSe2 = function() {
return this.chiaSe = true;
};
Ví dụ thực tế:
Trong ví dụ tiếp theo, chúng ta sẽ xem xét ngữ cảnh động trong các lệnh callback, như trong các sự kiện:
var btn = document.getElementById('btn1');
btn.addEventListener('click', () => {
this.classList.toggle('doiMau');
});
Một lần nữa nó lại tương đồng với các ví dụ trước, bạn có thể đoán vấn đề là gì không?
Vâng, giống như trước khi phạm vi kèm theo đang ảnh hưởng đến ý nghĩa của this.
Ví dụ thực tế:
Ở tình huống này, bạn vẫn có thể sử dụng arrow function và sử dụng đối tượng sự kiện để truy cập đối tượng trong hàm đó.
Mặc dù nó không giải quyết được vấn đề phạm vi, nhưng nó hoạt động cho ví dụ cụ thể này:
var btn = document.getElementById('btn1');
btn.addEventListener('click', (e) => {
e.target.classList.toggle('doiMau');
});
Bạn thấy không, đôi khi việc sử dụng arrow function sẽ làm cho code không thể đọc được.
Ý tưởng đằng sau arrow function là làm cho code của chúng ta rõ ràng hơn, vì vậy hãy đảm bảo rằng nó vẫn luôn như vậy.
Tóm lại là không nên sử dụng Arrow Function trong một số trường hợp.
Phiên bản ES6 đã giới thiệu nhiều ý tưởng tuyệt vời, và arrow function là một trong số đó.
Hi vọng qua bài viết này bạn biết khi nào không nên sử dụng Arrow Function hoặc nếu code bạn gặp vấn đề, bạn biết một trong số các lý do rồi đấy.
Chúc bạn học lập trình tốt hơn.
> Nếu bạn đang tích cực học lập trình mà vẫn chưa đạt hiệu quả gì thực tế. Hãy cân nhắc tham gia KHÓA HỌC LẬP TRÌNH (Full Stack) với lộ trình bài bản. Được truyền đạt Kiến thức - Kinh nghiệm thực tế từ chính các chuyên gia đến từ doanh nghiệp tuyển dụng.
---
HỌC VIỆN ĐÀO TẠO CNTT NIIT - ICT HÀ NỘI
Học Lập trình chất lượng cao (Since 2002). Học làm Lập trình viên. Hành động ngay!
Đc: Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội
SĐT: 02435574074 - 0914939543
Email: hello@niithanoi.edu.vn
Fanpage: https://facebook.com/NIIT.ICT/
#niit #niithanoi #niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp #java #php #python