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工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7369

Java教程

1628

CakePHP 教程

1354

Laravel 教程

1266

PHP教程

1214

显示更多

Related knowledge

在JavaScript中替换字符串字符 Mar 11, 2025 am 12:07 AM

JavaScript字符串替换方法详解及常见问题解答本文将探讨两种在JavaScript中替换字符串字符的方法：在JavaScript代码内部替换和在网页HTML内部替换。在JavaScript代码内部替换字符串最直接的方法是使用replace()方法： str = str.replace("find","replace"); 该方法仅替换第一个匹配项。要替换所有匹配项，需使用正则表达式并添加全局标志g： str = str.replace(/fi

自定义Google搜索API设置教程 Mar 04, 2025 am 01:06 AM

本教程向您展示了如何将自定义的Google搜索API集成到您的博客或网站中，提供了比标准WordPress主题搜索功能更精致的搜索体验。令人惊讶的是简单！您将能够将搜索限制为Y

8令人惊叹的jQuery页面布局插件 Mar 06, 2025 am 12:48 AM

利用轻松的网页布局：8个基本插件 jQuery大大简化了网页布局。本文重点介绍了简化该过程的八个功能强大的JQuery插件，对于手动网站创建特别有用

构建您自己的Ajax Web应用程序 Mar 09, 2025 am 12:11 AM

因此，在这里，您准备好了解所有称为Ajax的东西。但是，到底是什么？ AJAX一词是指用于创建动态，交互式Web内容的一系列宽松的技术。 Ajax一词，最初由Jesse J创造

什么是这个＆＃x27;在JavaScript？ Mar 04, 2025 am 01:15 AM

核心要点 JavaScript 中的 this 通常指代“拥有”该方法的对象，但具体取决于函数的调用方式。没有当前对象时，this 指代全局对象。在 Web 浏览器中，它由 window 表示。调用函数时，this 保持全局对象；但调用对象构造函数或其任何方法时，this 指代对象的实例。可以使用 call()、apply() 和 bind() 等方法更改 this 的上下文。这些方法使用给定的 this 值和参数调用函数。 JavaScript 是一门优秀的编程语言。几年前，这句话可