前端笔记(关于箭头函数与普通函数的区别的理解)

栏目: IT技术 · 发布时间: 4年前

内容简介:大家都知道箭头函数是es6新增的函数声明方式,当然普通函数还是可以继续使用的。我以前一直只知道箭头函数只对this指向有影响,但是没法说清楚具体有哪些影响,因此今天来总结整理一下。1.普通函数的this指向当前调用者对象。箭头函数的this指向其上下文2.箭头函数不能作为构造函数,所以也不能new,new就会报错。普通函数可以

大家都知道箭头函数是es6新增的函数声明方式,当然普通函数还是可以继续使用的。我以前一直只知道箭头函数只对this指向有影响,但是没法说清楚具体有哪些影响,因此今天来总结整理一下。

1.普通函数的this指向当前调用者对象。箭头函数的this指向其上下文

let obj={
    a:function(){
        console.log(this)//当前调用者
    },
    b:()=>{
        console.log(this)//上下文
    }
}
obj.a()
obj.b()

2.箭头函数不能作为构造函数,所以也不能new,new就会报错。普通函数可以

前端笔记(关于箭头函数与普通函数的区别的理解)

前端笔记(关于箭头函数与普通函数的区别的理解)

3.箭头函数不能使用arguments,但可以使用...rest代替。rest参数也能在普通函数中使用,用于函数中传递不定参数

arguments是类数组,需要遍历进行使用。arguments和rest都必须写在最后面。

const A=(...a)=>{
    console.log(a)
}
A(1,2,3,4)//数组

const B=function(){
    console.log(arguments)
}
B(1,2,3,4)//类数组

4.箭头函数没有原型对象,普通函数有

//原型区别
const F=()=>{}
const G=function(){}
console.log(F.prototype)//undefined
console.log(G.prototype)//原型对象

前端笔记(关于箭头函数与普通函数的区别的理解)

拓展知识:

1.call、apply、bind可以改变普通函数this指向,无法改变箭头函数的this指向

此处使用call后this就不是参数1的对象了,然后自动调用f函数。

apply:参数2传的是数组。bind:重新绑定对象,生成新的函数,需要重新调用

//改变this指向
const f=function(a){
    console.log(this.name+a)
}
f()//undefined
f.call({name:1},2)//3

这个this还是代表上下文,不是那个对象

const F=()=>{
    console.log(this)
}
F.call({a:1})//window

以上所述就是小编给大家介绍的《前端笔记(关于箭头函数与普通函数的区别的理解)》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Django企业开发实战

Django企业开发实战

胡阳 / 人民邮电出版社 / 2019-2 / 99.00元

本书以博客系统贯穿始末,介绍了Django的方方面面。书中共分四部分,第一部分介绍了正式进入编码之前的准备工作,内容包括需求分析、基础知识和Demo系统的开发;第二部分开始实现需求,内容涉及环境配置、编码规范以及项目结构规划,编写了Model层、admin页面、Form代码和View逻辑,引入了Bootstrap框架;第三部分重点介绍xadmin、django-autocomple-light和d......一起来看看 《Django企业开发实战》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具