Các hàm mũi tên không nên được sử dụng như một phương thức đối tượng vì một hàm mũi tên không có cái này riêng của nó. Nó nhận giá trị này của phạm vi từ vựng bao quanh là đối tượng cửa sổ thay vì chính đối tượng. Điều này có thể gây ra sự cố vì chúng ta hiện đang bao vây và truy cập các thuộc tính của đối tượng window thay vì đối tượng dự định.
Sau đây là đoạn mã hiển thị khi nào bạn không nên sử dụng các hàm mũi tên JavaScript -
Ví dụ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 20px;
font-weight: 500;
color: blueviolet;
}
</style>
</head>
<body>
<h1>When to not use the arrow functions</h1>
<br />
<div class="result"></div>
<br />
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to call the add() method of object obj</h3>
<script>
let BtnEle = document.querySelector(".Btn");
let resEle = document.querySelector(".result");
let obj = {
a: 22,
b: 44,
add: () => {
return this.a + this.b;
},
};
BtnEle.addEventListener("click", (event) => {
resEle.innerHTML = `The sum of ${obj.a} and ${obj.b} = ${obj.add()}`;
});
</script>
</body>
</html> Đầu ra
Khi nhấp vào nút 'BẤM VÀO ĐÂY' -
