js中箭头函数和普通函数的区别是什么

区别:箭头函数是“=>”,普通函数是“function”。箭头函数不能作为构造函数,不能使用new。箭头函数不绑定arguments,但普通函数可以。箭头函数中的this代表上层对象,普通函数中的this代表当前对象。

js中箭头函数和普通函数的区别是什么

本教程操作环境:windows7系统、ECMAScript 5版、Dell G3电脑。

普通函数在es5中就有了,箭头函数是es6中出现的函数形式,当然也可以继续用普通函数。

普通函数大家知道:

形式基本一致

在这里插入图片描述

来看看箭头函数:

开发时根据实际情况可以省略一些东西

单条处理可以省略return和{大括号}

单个参数可以省略(小括号)

在这里插入图片描述
箭头函数不能作为构造函数 不能new。会报错

在这里插入图片描述

在这里插入图片描述

箭头函数不绑定arguments,但是可使用…rest参数

这是普通函数arguments,可以使用

在这里插入图片描述

在这里插入图片描述

这是箭头函数的,用了会报错。

在这里插入图片描述

在这里插入图片描述

但是可以这么用,不过结果和arguments有所不同。

在这里插入图片描述

在这里插入图片描述

arguments的一般使用场景是:允许传入3个参数,中间一个参数是可选。如果只传1个参就是参数1用,传入2个参就是参数1和参数3用…

在这里插入图片描述

rest参数使用效果:

rest默认是[],多余的传参会加入数组

在这里插入图片描述

这里我们使用arguments来模拟rest效果看看:

在这里插入图片描述

相关推荐:JavaScript视频教程

2种函数的this代表不一样:

f1是箭头函数,this代表上层对象,若无自定义上层,则代表window。

f2是普通函数,this代表当前对象。

在这里插入图片描述

在这里插入图片描述

箭头函数的call()或apply()函数,不会影响到this的代表对象:

b,c,d均是普通函数,

b中的f是箭头函数,所以内部的this代表上层obj,值为11

c中的f是箭头函数,调用f的call()时不会影响内部的this,依然代表obj,值为11

d中的f是普通函数,this代表window,但是因为调用了f的call(m)变成了m,值为21

在这里插入图片描述

这里我们来提一下call函数:

call函数是每个函数都有的方法,用于改变普通函数内部的this指向的。

在这里插入图片描述

箭头函数没有原型属性:

prototype是普通函数用于获取原型对象的。

在这里插入图片描述

总结:

箭头函数内的this指向上层对象,bind()、call()、apply()均无法改变指向。

普通函数内的this执行调用其函数的对象。

更多编程相关知识,请访问:编程入门!!

以上就是js中箭头函数和普通函数的区别是什么的详细内容,更多请关注【创想鸟】其它相关文章!

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

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2717349.html

(0)
上一篇 2025年3月7日 22:03:16
下一篇 2025年3月7日 22:03:29

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • js怎么删除数组中某一元素

    js删除数组中某一元素的方法:首先获取指定元素在数组中的位置(即索引index);然后使用splice()函数根据索引值来删除数组中的元素,语法格式“splice(index, 1)”。 本教程操作环境:windows7系统、ECMAScr…

    2025年3月7日
    000
  • js如何获取图片宽高

    js获取图片宽高的方法:1、onload后在打印;2、通过complete与onload一起混合使用;3、通过定时循环检测获取,代码为【from:check : width:’+img.width+’,height:…

    2025年3月7日 编程技术
    200
  • JavaScript专题之二:数组去重

    目录 一、双层循环(暴力方法)二、indexOf和includes三、排序去重四、filter五、键值对(key-value)六、ES6七、一些问题参考 写在最后 (相关免费学习推荐:javascript视频教程) 立即学习“Java免费学…

    2025年3月7日
    200
  • JavaScript专题之三:防抖

    目录 一、为什么需要防抖二、防抖的原理三、防抖简单实现四、防抖进阶 写在最后 (相关免费学习推荐:javascript视频教程) 一、为什么需要防抖 立即学习“Java免费学习笔记(深入)”; 高频的函数操作可能产生不好的影响如:resiz…

    2025年3月7日 编程技术
    200
  • JavaScript专题之五:深浅拷贝

    了解拷贝背后的过程,避免不必要的错误,Js专题系列之深浅拷贝,我们一起加油~ 目录 一、拷贝示例二、浅拷贝三、深拷贝的方法? 四、自己实现深浅拷贝 免费学习推荐:javascript视频教程 一、拷贝示例 立即学习“Java免费学习笔记(深…

    2025年3月7日 编程技术
    200
  • JavaScript专题之六:类型检测

    javascript专题之数据类型检测的那些事 目录 一、typeof二、instanceof三、constructor四、stringTag是什么?五、实现几个数据检测的方法 写在最后 (免费学习推荐:javascript视频教程) 立即…

    2025年3月7日
    200
  • javascript字符串怎么截取前四位

    javascript字符串截取前四位的方法:1、使用“str.slice(0, 4)”来截取字符串前四位;2、使用“str.substr(0,4)”来截取字符串前四位;3、使用“str.substring(0,4)”来截取字符串前四位。 本…

    2025年3月7日 编程技术
    200
  • JavaScript专题之七:类型转换

    目录 前言一、类型转换是什么?二、原始值转换的基本规则三、对象转字符串和数字四、常见的类型转换运算符五、常见的类型转换操作 写在最后 (免费学习推荐:javascript视频教程) 前言 立即学习“Java免费学习笔记(深入)”; 在了解类…

    2025年3月7日 编程技术
    200
  • JavaScript专题之八:数组扁平化

    目录 一、递归二、reduce三、apply+some四、ES6展开运算符五、toString六、正则七、实现自己的扁平化工具方法写在最后 (免费学习推荐:javascript视频教程) 一、递归 for循环是我们在进行数组操作时最容易想到…

    2025年3月7日
    200
  • JavaScript 专题之九:数组中查找指定元素

    文章目录 一、findIndex 和 findLastIndex1.1 findIndex1.2 findLastIndex1.3 合并 findIndex 和 findLastIndex二、sortIndex2.1 遍历2.2 二分法三、…

    2025年3月7日
    200

发表回复

登录后才能评论