箭头函数与普通函数的区别详解[通俗易懂]

箭头函数与普通函数的区别详解[通俗易懂]箭头函数和普通函数的区别一.外形不同:箭头函数使用箭头定义,普通函数中没有代码实例如下://普通函数functionfunc(){//code}//箭头函数letfunc=()=>{//code}二.箭头函数都是匿名函数普通函数可以有匿名函数,也可以有具体名函数,但是箭头函数都是匿名函数。代码实例如下://具名函数functionfunc(){//code}//匿名函数letfunc=function(){//cod

大家好,又见面了,我是你们的朋友全栈君。

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

一.外形不同:箭头函数使用箭头定义,普通函数中没有
代码实例如下:

// 普通函数
function func(){
  // code
}
// 箭头函数
let func=()=>{
  // code
}

二.箭头函数都是匿名函数
普通函数可以有匿名函数,也可以有具体名函数,但是箭头函数都是匿名函数。
代码实例如下:

// 具名函数
function func(){
  // code
}
 
// 匿名函数
let func=function(){
  // code
}

// 箭头函数全都是匿名函数
let func=()=>{
  // code
}

三.箭头函数不能用于构造函数,不能使用new
普通函数可以用于构造函数,以此创建对象实例。
代码实例如下:

function Person(name,age){
   this.name=name;
   this.age=age;
}
let admin=new Person("恩诺小弦",18);
console.log(admin.name);
console.log(admin.age);

代码运行如下:

恩诺小弦
18

Person用作构造函数,通过它可以创建实例化对象。
但是构造函数不能用作构造函数。

四.箭头函数中this的指向不同
在普通函数中,this总是指向调用它的对象,如果用作构造函数,this指向创建的对象实例。
1.箭头函数本身不创建this
也可以说箭头函数本身没有this,但是它在声明时可以捕获其所在上下文的this供自己使用。
注意:this一旦被捕获,就不再发生变化

var webName="捕获成功";
let func=()=>{
  console.log(this.webName);
}
func();

运行结果如下:

捕获成功

代码分析:箭头函数在全局作用域声明,所以它捕获全局作用域中的this,this指向window对象。

例子:

var name = "恩诺1";
function wrap(){
  this.name="恩诺2";
  let func=() => {
    console.log(this.name);
  }
  func();
}
let en=new wrap();

运行结果如下:

恩诺2

代码分析:
(1)wrap()用作构造函数。
(2)使用new调用wrap()函数之后,此函数作用域中的this指向创建的实例化对象。
(3)箭头函数此时被声明,捕获这个this。
(4)所以打印的是恩诺2,而不是恩诺1。
2.结合call(),apply()方法使用
箭头函数结合call(),apply()方法调用一个函数时,只传入一个参数对this没有影响。

let obj2 = {
    a: 10,
    b: function(n) {
        let f = (n) => n + this.a;
        return f(n);
    },
    c: function(n) {
        let f = (n) => n + this.a;
        let m = {
            a: 20
        };
        return f.call(m,n);
    }
};
console.log(obj2.b(1));  // 结果:11
console.log(obj2.c(1)); // 结果:11

3.箭头函数不绑定arguments,取而代之用rest参数…解决
每一个普通函数调用后都具有一个arguments对象,用来存储实际传递的参数。但是箭头函数并没有此对象。

function A(a){
  console.log(arguments);
}
A(1,2,3,4,5,8);  //  [1, 2, 3, 4, 5, 8, callee: ƒ, Symbol(Symbol.iterator): ƒ]


let B = (b)=>{
  console.log(arguments);
}
B(2,92,32,32);   // Uncaught ReferenceError: arguments is not defined


let C = (...c) => {
  console.log(c);
}
C(3,82,32,11323);  // [3, 82, 32, 11323]

4.其他区别
(1).箭头函数不能Generator函数,不能使用yeild关键字。
(2).箭头函数不具有prototype原型对象。
(3).箭头函数不具有super。
(4).箭头函数不具有new.target。

总结
(1).箭头函数的 this 永远指向其上下文的 this ,任何方法都改变不了其指向,如 call() , bind() , apply()
(2).普通函数的this指向调用它的那个对象

参考
https://www.cnblogs.com/biubiuxixiya/p/8610594.html
https://www.softwhy.com/article-9330-1.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/148732.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 利用opacity属性写过渡效果

    利用opacity属性写过渡效果opacity的意思是不透明性,opacity取值范围为0-1;opacity:0;表示完全透明,opacity:1;表示完全不透明。opacity:0于overflow:hidden不同,overflow:hidden会完全消除空间,opacity:0只是视觉上看不到,但是实际上会占用空间,这点我们常用来于:hover一起使用。<!DOCTYPEhtml><htmll…

    2022年5月25日
    59
  • 5g网络切片是什么意思_网络切片是5G网络的标志性

    5g网络切片是什么意思_网络切片是5G网络的标志性众所周知,5G网络除了高速度、低时延外,还将承载万物互联,而要满足各种不同垂直行业的差异化需求,就要依靠5G网络切片来实现。因此有专业人士认为网络切片是5G的核心,是运营商服务垂直行业的基础和关键。那么,到底什么是网络切片,为什么5G需要网络切片?网络切片,到底“切”的是什么?01切片技术是5G网络的核心2020年以来,5G建设浪潮奔涌而来,行业应用加速落地,5G与产业加速渗透融合,与经济高质量发展、社会数字化转型的联系愈发紧密。“4G改变生活,5G改变社会”,虽然当前5G的建设成果及其展现出的威

    2022年9月28日
    2
  • bt3硬盘安装_SD卡比U盘音质好

    bt3硬盘安装_SD卡比U盘音质好在U盘/SD卡上安装BT3教程(激活成功教程无线路由信号密码必备)其实网上关于BT3的教程很多,如果大家根据下面的教程安装不成功的话,可以再去百度一下其它的教程。前几天写过一个帖子是关于如何用BT3激活成功教程路由信号的(点我查看),为了引起关注,放在了Win区。在那个帖子里我是将

    2022年10月1日
    2
  • python 列表转字符串_python怎么把列表转化为字符串「建议收藏」

    python 列表转字符串_python怎么把列表转化为字符串「建议收藏」python列表中的使用str将所有值转换为字符串,以及使用join方法将列表拼接成一个字符串。Pythonjoin()方法用于将序列中的元素以指定的字符连接生成一个新的字符串。(推荐学习:Python视频教程)语法join()方法语法:str.join(sequence)参数sequence–要连接的元素序列。返回值返回通过指定字符连接序列中元素后生成的新字符串。实例>>>ls1=…

    2022年6月4日
    59
  • enterprise architect使用教程绘制用例图_用例图的箭头怎么画

    enterprise architect使用教程绘制用例图_用例图的箭头怎么画在《UML面向对象分析、建模与设计》中学到了用例图,用例图是指由参与者(Actor)、用例(UseCase),边界以及它们之间的关系构成的用于描述系统功能的视图。用例图(UserCase)是外部用户(被称为参与者)所能观察到的系统功能的模型图。用例图中的主要元素包括参与者、用例以及元素之间的关系(这三个应该很好理解,一啪啦的废话不多说了,有什么不懂的直接留言或者私信)。我们可以看一个用EA绘制餐馆管理系统的用例图接下来讲解怎么用EnterpriseArchitect(以下简称EA)工具来画步

    2022年9月6日
    4
  • 〖Python语法进阶篇⑩〗- 正则表达式的字符匹配「建议收藏」

    〖Python语法进阶篇⑩〗- 正则表达式的字符匹配「建议收藏」在上一章节我们对正则表达式有了一个比较宏观的认识,并且知道了正则表达式的主要功能是通过匹配规则来获取或者验证字符串中的数据。要想成功的进行字符串的匹配需要使用到正则表达式模块,正则表达式匹配规则以及需要被匹配的字符串。在这三个条件中,模块与字符串都是准备好的,只有匹配规则异常的灵活,而今天这个章节就是认识一下正则表达式中的特殊字符,通过这些字符就可以针对我们想要的数据进行匹配。

    2022年7月14日
    22

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号