0

0

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

WBOY

WBOY

发布时间: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工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
es6新特性
es6新特性

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

106

2023.07.17

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

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

195

2023.08.04

JavaScript ES6新特性
JavaScript ES6新特性

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

222

2025.12.24

undefined是什么
undefined是什么

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

5392

2023.07.31

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

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

3088

2024.08.14

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

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

614

2025.12.25

function是什么
function是什么

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

483

2023.08.04

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

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

163

2023.10.07

java入门学习合集
java入门学习合集

本专题整合了java入门学习指南、初学者项目实战、入门到精通等等内容,阅读专题下面的文章了解更多详细学习方法。

1

2026.01.29

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Django 教程
Django 教程

共28课时 | 3.6万人学习

Pandas 教程
Pandas 教程

共15课时 | 1.0万人学习

NumPy 教程
NumPy 教程

共44课时 | 3万人学习

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号