讲师中心 微信公众号
AI工具推荐 视频效率加速

掌握 JavaScript 函数:普通函数与箭头函数指南

落敏小哥_3533

落敏小哥_3533

发布时间:2024-08-25 08:00:05

|

625人浏览过

|

来源于dev.to

转载

掌握 javascript 函数:普通函数与箭头函数指南

在 javascript 中,函数是该语言的基本构建块,允许开发人员定义可重用的代码块。 javascript 中两种主要的函数类型是普通函数和箭头函数。虽然它们乍一看似乎很相似,但它们在语法、行为和用例方面有明显的差异。本文将逐步深入探讨这些差异,提供详细的示例并涵盖所有场景,帮助您有效掌握普通函数和箭头函数之间的细微差别。

普通函数与箭头函数:探索分歧
语法
javascript 中的普通函数是使用 function 关键字定义的,后跟函数名称、参数(如果有)以及大括号内的函数体。这是一个例子:

function add(a, b) {
    return a + b;
}

另一方面,箭头函数提供了 es6 中引入的更简洁的语法。它们使用箭头 (=>) 表示法,并省略 function 关键字和单行函数的大括号。例如:

const add = (a, b) => a + b;

词汇这个绑定
普通函数和箭头函数之间最显着的区别之一是它们如何处理 this 关键字。在普通函数中,this 的值由函数的调用方式决定。相反,箭头函数不会绑定自己的 this ,而是从封闭范围继承它。让我们用一个例子来说明这一点:

const person = {
    name: 'john',
    sayhello: function() {
        console.log(`hello, ${this.name}!`);
    }
};

person.sayhello(); // output: hello, john!

const personarrow = {
    name: 'jane',
    sayhello: () => {
        console.log(`hello, ${this.name}!`);
    }
};

personarrow.sayhello(); // output: hello, undefined!

在上面的示例中,person.sayhello() 正确记录了“hello, john!”因为 this 指的是 personobject。然而,personarrow.sayhello() 记录“hello, undefined!”因为箭头函数没有自己的this绑定,导致它从未定义name的全局范围继承this值。

参数对象
另一个区别在于arguments 对象。普通函数可以访问argumentsobject,它是一个类似数组的对象,包含传递给函数的所有参数。然而,箭头函数没有自己的arguments对象。让我们用 e 来说明这一点

xample:

function sum() {
    let total = 0;
    for (let i = 0; i < arguments.length; i++) {
        total += arguments[i];
    }
    return total;
}

console.log(sum(1, 2, 3)); // output: 6
const sumarrow = () => {
    let total = 0;
    for (let i = 0; i < arguments.length; i++) {
        total += arguments[i];
    }
    return total;
}
console.log(sumarrow(1, 2, 3)); // output: uncaught referenceerror: arguments is not defined

在上面的示例中,sum() 使用argumentsobject 正确计算了传递给它的所有参数的总和。但是,sumarrow() 会抛出 referenceerror,因为箭头函数无法访问参数。

新

关键字 普通函数可以用作带有 new 关键字的构造函数来创建对象的新实例。但是,箭头函数不能用作构造函数。将箭头函数与 new 一起使用将导致类型错误。这是一个例子:

function Person(name) {
    this.name = name;
}

const john = new Person('John');
console.log(john.name); // Output: John
const PersonArrow = (name) => {
    this.name = name;
}

const jane = new PersonArrow('Jane'); // TypeError: PersonArrow is not a constructor

常见问题解答部分
问:什么时候应该使用普通函数而不是箭头函数? 答:当需要访问 this 关键字、参数对象或定义构造函数时,请使用普通函数。箭头函数更适合简洁的单行语句或当您想要维护词法作用域时。

问:箭头函数可以有名字吗? 答:不可以,箭头函数不能有名称。他们默认是匿名的。

问:箭头函数比普通函数快吗? 答:箭头函数和普通函数没有显着的性能差异。它们之间的选择应该基于它们的具体用例和可读性。

问:我可以在对象方法中使用箭头函数吗? a: 是的,箭头函数可以在对象方法中使用,但是要小心,因为它们没有绑定自己的 this,这可能会导致意外的行为。

结论 总之,虽然普通函数和箭头函数都用于在 javascript 中定义函数,但它们在语法、行为和用例方面有所不同。理解这些差异对于编写干净、高效且无错误的代码至关重要。通过考虑本文中概述的场景,您可以就何时在 javascript 项目中使用每种类型的函数做出明智的决定。

请记住,没有一刀切的解决方案,普通函数和箭头函数之间的选择最终取决于您代码的具体要求和您的编码风格偏好。

热门AI工具

更多
WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

讯飞智作

讯飞智作是一款AI视频创作工具,AI文本配音工具,数字人课程、营销视频制作。

AionClaw
AionClaw Hot

AionClaw是一款面向办公、创作和编程任务的AI桌面智能体。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

Atoms
Atoms Hot

Atoms是一款AI智能体工具,第一支自动构建真实业务的 AI 团队。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

PixTV
PixTV Hot

PixTV是一款面向AIGC内容创作的AI视频生成工具。

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

相关专题

更多
es6新特性
es6新特性

es6新特性有:1、块级作用域变量;2、箭头函数;3、模板字符串;4、解构赋值;5、默认参数;6、 扩展运算符;7、 类和继承;8、Promise。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

285

2023.07.17

es6新特性有哪些
es6新特性有哪些

es6的新特性有:1、块级作用域;2、箭头函数;3、解构赋值;4、默认参数;5、扩展运算符;6、模板字符串;7、类和模块;8、迭代器和生成器;9、Promise对象;10、模块化导入和导出等等。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

406

2023.08.04

JavaScript ES6新特性
JavaScript ES6新特性

ES6是JavaScript的根本性升级,引入let/const实现块级作用域、箭头函数解决this绑定问题、解构赋值与模板字符串简化数据处理、对象简写与模块化提升代码可读性与组织性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

375

2025.12.24

undefined是什么
undefined是什么

undefined是代表一个值或变量不存在或未定义的状态。它可以作为默认值来判断一个变量是否已经被赋值,也可以用于设置默认参数值。尽管在不同的编程语言中,undefined可能具有不同的含义和用法,但理解undefined的概念可以帮助我们更好地理解和编写程序。本专题为大家提供undefined相关的各种文章、以及下载和课程。

12045

2023.07.31

网页undefined是什么意思
网页undefined是什么意思

网页undefined是指页面出现了未知错误的意思,提示undefined一般是在开发网站的时候定义不正确或是转换不正确,或是找不到定义才会提示undefined未定义这个错误。想了解更多的相关内容,可以阅读本专题下面的文章。

5527

2024.08.14

网页undefined啥意思
网页undefined啥意思

本专题整合了undefined相关内容,阅读下面的文章了解更多详细内容。后续继续更新。

2516

2025.12.25

function是什么
function是什么

function是函数的意思,是一段具有特定功能的可重复使用的代码块,是程序的基本组成单元之一,可以接受输入参数,执行特定的操作,并返回结果。本专题为大家提供function是什么的相关的文章、下载、课程内容,供大家免费下载体验。

3260

2023.08.04

js函数function用法
js函数function用法

js函数function用法有:1、声明函数;2、调用函数;3、函数参数;4、函数返回值;5、匿名函数;6、函数作为参数;7、函数作用域;8、递归函数。本专题提供js函数function用法的相关文章内容,大家可以免费阅读。

554

2023.10.07

Gradle插件开发入门教程
Gradle插件开发入门教程

本专题介绍Gradle插件开发的基本流程,涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法,帮助你理解插件如何组织构建逻辑,减少多个项目之间的重复配置。

60

2026.10.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Qt Creator 快速入门文档
Qt Creator 快速入门文档

共0课时 | 0人学习

OpenClaw
OpenClaw

共0课时 | 0人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn