js箭头函数和普通函数的区别-js教程-PHP中文网

首页

web前端

js教程

js箭头函数和普通函数的区别

藏色散人

Apr 13, 2019 am 10:45 AM

普通函数

本篇文章主要给大家介绍javascript箭头函数和普通函数的区别，希望对需要的朋友有所帮助！

箭头函数——ES6中引入的一个新特性——支持用JavaScript编写简洁的函数。虽然普通函数和箭头函数的工作方式相似，但是它们之间有一些有趣的区别，如下所述。

语法

普通函数的语法:

let x = function function_name(parameters){ 
   // 函数体
};

普通函数的例子:

let square = function(x){ 
  return (x*x); 
}; 
console.log(sqaure(9));

输出：

箭头函数的语法:

let x = (parameters) => { 
    // 函数体
};

箭头函数的例子:

var square = (x) => { 
    return (x*x); 
}; 
console.log(square(9));

输出：

使用this关键字

与普通函数不同，箭头函数没有自己的this。

例如:

let user = { 
    name: "GFG", 
    gfg1:() => { 
        console.log("hello " + this.name); 
    }, 
    gfg2(){        
        console.log("Welcome to " + this.name); 
    }   
 }; 
user.gfg1(); 
user.gfg2();

输出：

arguments对象的可用性

arguments对象在箭头函数中不可用，但在普通函数中可用。

普通函数的例子：

let user = {       
    show(){ 
        console.log(arguments); 
    } 
}; 
user.show(1, 2, 3);

输出：

箭头函数的例子：

let user = {      
        show_ar : () => { 
        console.log(...arguments); 
    } 
}; 
user.show_ar(1, 2, 3);

输出：

使用new关键字

使用函数声明或表达式创建的普通函数是“可构造的”和“可调用的”。由于普通函数是可构造的，因此可以使用'new'关键字调用它们。但是，箭头函数只是“可调用”而不是可构造的。因此，在尝试使用new关键字构造不可构造的箭头函数时，我们将得到一个运行时错误。

普通函数的例子:

let x = function(){ 
    console.log(arguments); 
}; 
new x =(1,2,3);

输出：

箭头函数的例子:

let x = ()=> { 
    console.log(arguments); 
}; 
new x(1,2,3);

输出：

热AI工具

热工具

热门话题

PHP教程

1678

276

NYT连接提示和答案

321

836

显示更多

Related knowledge

JavaScript实现点击图片切换效果：专业教程 Sep 18, 2025 pm 01:03 PM

本文将介绍如何使用JavaScript实现点击图片切换的效果。核心思路是利用HTML5的data-*属性存储备用图片路径，并通过JavaScript监听点击事件，动态切换src属性，从而实现图片切换。本文将提供详细的代码示例和解释，帮助你理解和掌握这种常用的交互效果。

优化jQuery弹窗中动态外部链接跳转的事件处理 Sep 01, 2025 am 11:48 AM

本文旨在解决jQuery弹窗中外部链接重定向按钮重复绑定事件处理器导致跳转错误的问题。当用户连续点击多个外部链接时，弹窗中的跳转按钮可能始终指向首次点击的链接。核心解决方案是利用off('click')方法在每次绑定新事件前解除旧的事件处理器，确保跳转行为始终指向最新的目标URL，从而实现准确且可控的链接重定向。

如何在JavaScript中更新对象属性 Sep 04, 2025 am 04:58 AM

useednotationToupdateDatePropertiesWithNames; 2.SuseBrackEtnotationFordyNocorspecialCharacterPropertynames; 3.UseObject.assign.assign.assign（）toupdatemultpropertiesormergeobjects

如何使用JavaScript中的GeOlocation API获取用户的位置？ Sep 21, 2025 am 06:19 AM

首先检查浏览器是否支持GeolocationAPI，若支持则调用getCurrentPosition()获取用户当前位置坐标，并通过成功回调获取纬度和经度值，同时提供错误回调处理权限被拒、位置不可用或超时等异常，还可传入配置选项以启用高精度、设置超时时间和缓存有效期，整个过程需用户授权并做好相应错误处理。

JavaScript中数字格式化：使用toFixed()方法保留固定小数位 Sep 16, 2025 am 11:57 AM

本教程详细讲解如何在JavaScript中将数字格式化为固定两位小数的字符串，即使是整数也能显示为"#.00"的形式。我们将重点介绍Number.prototype.toFixed()方法的使用，包括其语法、功能、示例代码以及需要注意的关键点，如其返回类型始终为字符串。

NUXT 3组成API解释了 Sep 20, 2025 am 03:00 AM

Nuxt3的CompositionAPI核心用法包括：1.definePageMeta用于定义页面元信息，如标题、布局和中间件，需在中直接调用，不可置于条件语句中；2.useHead用于管理页面头部标签，支持静态和响应式更新，需与definePageMeta配合实现SEO优化；3.useAsyncData用于安全地获取异步数据，自动处理loading和error状态，支持服务端和客户端数据获取控制；4.useFetch是useAsyncData与$fetch的封装，自动推断请求key，避免重复请

如何在JavaScript中创建多行字符串？ Sep 20, 2025 am 06:11 AM

thebestatoreateamulti-linestlinginjavascriptsisisingsistisingtemplatalalswithbacktticks，whatpreserveticks，whatpreservereakeandeexactlyaswrite。

如何在JavaScript中使用setInterval创建重复间隔 Sep 21, 2025 am 05:31 AM

要创建JavaScript中的重复间隔，需使用setInterval()函数，它会以指定毫秒数为间隔重复执行函数或代码块，例如setInterval(()=>{console.log("每2秒执行一次");},2000)会每隔2秒输出一次消息，直到通过clearInterval(intervalId)清除，实际应用中可用于更新时钟、轮询服务器等场景，但需注意最小延迟限制、函数执行时间影响，并在不再需要时及时清除间隔以避免内存泄漏，特别是在组件卸载或页面关闭前应清理，确保

See all articles

js箭头函数和普通函数的区别

热AI工具

Undress AI Tool

Undresser.AI Undress

AI Clothes Remover

ArtGPT

Stock Market GPT

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题