何时不应在 JavaScript 中使用箭头函数

2025 年 3 月 18 日 | 6 分钟阅读

JavaScript 箭头函数没有 "this" 值或任何参数。不建议将其用作事件处理器、对象字面量方法或原型方法。如果函数应用了 arguments 对象，箭头函数将无法正常工作。声明箭头函数不需要 function 关键字，因为它不返回任何值。箭头函数不能用作构造函数。

不使用箭头函数的原因

在 JavaScript 中不使用箭头函数的三个原因。

事件处理器
对象方法
原型方法
使用 arguments 对象的函数

事件处理器

事件处理器不返回任何输入值，并且函数包含对象的数据。如果箭头函数不返回值，它会显示 undefined 值。

为什么事件处理器不使用箭头函数？

事件处理器中的 "this.value" 函数总是返回 undefined 作为输出。
Web 浏览器中的全局对象是 window。值是 window 对象中缺失的一个属性。因此，window 对象将 value 属性添加到函数中。这些值由 JavaScript 引擎设置为 "undefined"。
箭头函数没有特定的 "this" 值。周围的全局作用域用于 "this" 关键字的值。在下面的示例中，箭头函数中的 "this" 值指向全局对象。
您可以改用标准函数来解决问题。当 "this" 值与其绑定时，元素充当事件的触发器。

示例

以下示例显示了使用箭头方法的 undefined 值。它不适用于箭头函数中的事件处理器方法。

<!DOCTYPE html>
<html>
<head>
<title>
When You Should Not Use Arrow Functions in JavaScript
</title>
<style>
#demo1 {
background-colour: orange;
border: 1px solid black;
width: 370px;
}
</style>
</head>
<body>
<div id = "demo1">
<h3>
When You Should Not Use Arrow Functions in JavaScript
</h3>
<p>
Event handlers do not work for the arrow function
</p>
<input type = "text" name = "usernames" id = "usernames" placeholder = "Enter a usernames">
<p id = "greetings"></p>
</div>
<script>
const greeting = document.querySelector('#greetings');
const username = document.querySelector('#usernames');
username.addEventListener('keydown', () => {
greeting.textContent = 'javascript tutorial: Hello ' + this.value;
});
</script>
</body>
</html>

输出

输出显示了 JavaScript 中的 undefined 值。

When You Should Not Use Arrow Functions in JavaScript

对象方法

原型方法使用函数来获取自身数据。this 关键字不适用于箭头函数。

示例

以下示例显示了使用箭头方法的 NaN 值。它不适用于箭头函数中的事件处理器方法。

<!DOCTYPE html>
<html>
<head>
<title>
When You Should Not Use Arrow Functions in JavaScript
</title>
<style>
#demo1 {
background-colour: orange;
border: 1px solid black;
width: 370px;
}
</style>
</head>
<body>
<div id = "demo1">
<h3>
When You Should Not Use Arrow Functions in JavaScript
</h3>
<p>
Object methods do not work for the arrow function
</p>
<input type = "text" name = "usernames" id = "usernames" placeholder = "Enter a usernames">
<p id = "greetings"></p>
</div>
<script>
const greeting = document.querySelector('#greetings');
const username = document.querySelector('#usernames');
username.addEventListener('keydown', () => {
const counter = {
count: 0,
next: () => ++this.count,
current: () => this.count
};
greeting.textContent = 'javascript tutorial: Hello ' + counter.next();
console.log(counter.next());
});
</script>
</body>
</html>

输出

输出显示了 JavaScript 中的 NaN 值。

对象方法问题的解决方案

我们可以使用普通函数来处理对象函数方法。

示例

以下示例函数可以正常工作，没有错误。

<!DOCTYPE html>
<html>
<head>
<title>
When You Should Not Use Arrow Functions in JavaScript
</title>
<style>
#demo1 {
background-colour: orange;
border: 1px solid black;
width: 370px;
}
</style>
</head>
<body>
<div id = "demo1">
<h3>
When You Should Not Use Arrow Functions in JavaScript
</h3>
<p>
Object methods work for the arrow function
</p>
<input type = "text" name = "usernames" id = "usernames" placeholder = "Enter a usernames">
<p id = "greetings"></p>
</div>
<script>
const greeting = document.querySelector('#greetings');
const username = document.querySelector('#usernames');
username.addEventListener('keydown', () => {
const counter = {
count: 0,
next() {
return ++this.count;
},
current() {
return this.count;
}
};
greeting.textContent = 'javascript tutorial: Hello ' + counter.next();
console.log(counter.next());
});
</script>
</body>
</html>

输出

输出显示了函数的数据。

原型方法

原型方法使用函数来获取自身数据。多个函数不适用于箭头函数。

示例

以下示例显示了使用箭头方法的 undefined 值。它不适用于箭头函数中的原型方法。

<!DOCTYPE html>
<html>
<head>
<title>
When You Should Not Use Arrow Functions in JavaScript
</title>
<style>
#demo1 {
background-colour: orange;
border: 1px solid black;
width: 370px;
}
</style>
</head>
<body>
<div id = "demo1">
<h3>
When You Should Not Use Arrow Functions in JavaScript
</h3>
<p>
The prototype method does not work for the arrow function
</p>
<input type = "button" name = "usernames" id = "usernames" value = "Click the button">
<p id = "greetings"></p>
</div>
<script>
const greeting = document.querySelector('#greetings');
const username = document.querySelector('#usernames');
username.addEventListener('click', () => {
function MyName(name) {
this.personName = name;
}
MyName.prototype.sayPersonName = () => {
console.log(this === window); // => true
return this.catName;
};
const person = new MyName('Mew');
person.sayPersonName();
greeting.textContent = 'javascript tutorial: Hello ' +person.sayPersonName();
});
</script>
</body>
</html>

输出

输出显示了 JavaScript 中的 undefined 值。

原型方法问题的解决方案

我们可以使用普通函数来处理原型函数方法。

示例

以下示例函数可以正常工作，没有错误。

<!DOCTYPE html>
<html>
<head>
<title>
When You Should Not Use Arrow Functions in JavaScript
</title>
<style>
#demo1 {
background-colour: orange;
border: 1px solid black;
width: 370px;
}
</style>
</head>
<body>
<div id = "demo1">
<h3>
When You Should Not Use Arrow Functions in JavaScript
</h3>
<p>
The prototype method does not work for the arrow function
</p>
<input type = "button" name = "usernames" id = "usernames" value = "Click the button">
<p id = "greetings"></p>
</div>
<script>
const greeting = document.querySelector('#greetings');
const username = document.querySelector('#usernames');
username.addEventListener('click', () => {
function MyPerson(name) {
this.catName = name;
}
MyPerson.prototype.sayPersonName = function() {
console.log(this === person); // => true
return this.catName;
};
const person = new MyPerson('Student');
person.sayPersonName(); // => 'Student'
greeting.textContent = 'javascript tutorial: Hello ' +person.sayPersonName();
});
</script>
</body>
</html>

输出

输出显示了函数的数据。

使用 arguments 对象的函数

箭头函数缺少 arguments 对象。因此，如果您的函数使用参数对象，则无法使用箭头函数。

示例

以下示例显示了使用箭头方法的错误值。它不适用于箭头函数中的原型方法。由于 arguments 对象，函数无法工作。

<!DOCTYPE html>
<html>
<head>
<title>
When You Should Not Use Arrow Functions in JavaScript
</title>
<style>
#demo1 {
background-colour: orange;
border: 1px solid black;
width: 370px;
}
</style>
</head>
<body>
<div id = "demo1">
<h3>
When You Should Not Use Arrow Functions in JavaScript
</h3>
<p>
Functions use the arguments object does not work for arrow function
<br>
console.log tab shows the error of the concat() function
</p>
<input type = "button" name = "usernames" id = "usernames" value = "Click the button">
<p id = "greetings"></p>
</div>
<script>
const greeting = document.querySelector('#greetings');
const username = document.querySelector('#usernames');
username.addEventListener('click', () => {
const concat = (separator) => {
let args = Array.prototype.slice.call(arguments, 1);
return args.join(separator);
console.log(concat());
}
greeting.textContent = 'Uncaught ReferenceError: arguments is not defined';
console.log(concat());
});
</script>
</body>
</html>

输出

输出显示了 JavaScript 中的错误值。

arguments 对象问题的解决方案

我们可以使用普通函数来处理 arguments 对象。

示例

以下示例函数可以正常工作，没有错误。

<!DOCTYPE html>
<html>
<head>
<title>
When You Should Not Use Arrow Functions in JavaScript
</title>
<style>
#demo1 {
background-colour: orange;
border: 1px solid black;
width: 370px;
}
</style>
</head>
<body>
<div id = "demo1">
<h3>
When You Should Not Use Arrow Functions in JavaScript
</h3>
<p>
Functions use the arguments object works for arrow function
<br>
Remove the error of the argument object
</p>
<input type = "button" name = "usernames" id = "usernames" value = "Click the button">
<p id = "greetings"></p>
</div>
<script>
const great_data = document.querySelector('#greetings');
const username = document.querySelector('#usernames');
username.addEventListener('click', () => {
function concat(separator) {
let args = Array.prototype.slice.call(arguments, 1);
return args.join(separator);
}
great_data.textContent = 'Hello student' +concat();
console.log(concat());
});
</script>
</body>
</html>

输出

输出显示了函数的数据。

结论

JavaScript 不直接使用箭头函数来处理用户验证和操作。

下一主题Javascript-executables

何时不应在 JavaScript 中使用箭头函数

不使用箭头函数的原因

事件处理器

对象方法

原型方法

使用 arguments 对象的函数

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

何时不应在 JavaScript 中使用箭头函数

不使用箭头函数的原因

事件处理器

对象方法

原型方法

使用 arguments 对象的函数

结论

相关帖子

JavaScript 中的字典

JavaScript JSON 响应

如何在 MAC 上的浏览器中启用 JavaScript

自调用函数 JavaScript

JavaScript 中数组求和

r JavaScript

Pass 在 JavaScript 中的用法

JavaScript 后端框架

计算 JavaScript 中的平均值

JavaScript goto

订阅 Tpoint Tech