JavaScript箭头函数与普通函数的区别示例详解

目录
  • 箭头函数与普通函数的区别
  • 箭头函数的理解
  • 箭头函数里的this指向
  • 总结

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

要讨论箭头函数和普通函数的区别，首先来看看两者的基本格式

普通函数和箭头共同点就是圆括号和大括号，圆括号里面一般放置参数，大括号一般放置函数主体，很明显箭头函数不需要写那么长，举个例子，有一个数组，使用map方法为数组的每个元素增加字符

let arr=['昨天','今天','明天']
let newarr=arr.map(function(item){
  return item+='放假'
})
console.log(newarr);

用普通函数阅读起来的话不太友好，使用箭头函数看起来并没有感觉阅读起来很流畅，实际上只有一个参数的时候我们不需要为参数添加上括号，而且只有一个表达式的时候可以步添加大括号，他们的结果是一样的

let newarr1=arr.map((item)=>{return item += '放假'})
let newarr2=arr.map(item =>  item += '放假')

箭头函数的理解

我们并不能为箭头函数命名，箭头函数是函数表达式，而且是匿名的。既然是匿名的我们经常用new来构造函数的实例在箭头函数上是不行的，箭头函数不是构造函数，创建的时候并不会为箭头函数创建Construct方法

在函数的内部有个特殊对象arguments，一个类似数组的对象，但是箭头函数没有自己的arguments对象，匿名函数一般不用参数或者限定参数

箭头函数里的this指向

this的指向一直让很多人头疼，箭头函数被设计出来主要的原因是解决this的问题

为了查看this的指向，分别创建普通函数和箭头函数的表达式，并且为两个按钮注册点击事件，鼠标点击按钮就会执行函数表达式

<button class="pt">普通函数</button>
<p class="ptP"></p>
<button class="jt">箭头函数</button>
<p class="jtP"></p>
<script>
const pt=document.querySelector('.pt')
const ptP=document.querySelector('.ptP')
const jt=document.querySelector('.jt')
const jtP=document.querySelector('.jtP')
let ptFunction=function(){
  ptP.innerHTML='普通函数：'+this
}
let jtFunction=()=>{
  jtP.innerHTML='箭头函数：'+this
}
pt.addEventListener('click',ptFunction,false)
jt.addEventListener('click',jtFunction,false)
</script>

点击第一个按钮的时候，这个this是绑定按钮的，在普通函数里this的值是动态的，定义this的时候这个值不会被马上确认，而是会在执行的时候才确认，所以this值指向按钮对象

点击第二个按钮的时候显示window，也就是说this的值没有动态生成，而是在定义的时候就确认了，第二个按钮绑定的函数是属于window的，this自然指向window，在箭头函数可以避免查找代码时因找this指向的烦恼

为了this的硬绑定我们经常会用到call，apply，bind三种方法，下面例子一个对象里面有两个属性，一个字符串，一个数组和一个方法，方法主要对数组进行map方法的遍历，为每一个元素添加对象的字符串

const arr=document.querySelector('.arr')//p标签
let calendar={
  name:'2022-10-',
  lately:['10-25','10-26','10-27'],
  add:function(){
    this.lately.map(function(item){
      arr.innerHTML+=this.name+item+'<br>'
    })
  }
}
calendar.add()

第一个指向是正确的，因为这个this是直接在add函数里执行的，但是第二个this指向不是我们想要的，于是使用call，apply或者bind方法就可以解决了

add:function(){
    this.lately.map(function(item){
        arr.innerHTML+=this.name+item+'<br>'
    }.bind(this))
}
calendar.add()

但是用箭头函数就不用那么麻烦，仅仅把map方法里的function改为箭头函数就简单解决了问题，还有箭头函数不能通过call，apply，bind来改变this的值

add:function(){
    this.lately.map(item => arr.innerHTML+=this.name+item+'<br>')
}

总结

以上就是JavaScript箭头函数与普通函数的区别示例详解的详细内容，更多关于JavaScript箭头函数普通函数的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • js中什么时候不能使用箭头函数

    js中什么时候不能使用箭头函数

    目录 箭头函数 箭头函数有什么缺点? 什么时候不能使用箭头函数? 1. 对象方法中,不适用箭头函数 为什么对象方法中,箭头函数的this指向不是这个对象? 2. 原型方法中,不适用箭头函数 3. 构造函数也不行! 4. 动态上下文中的回调函数 5. Vue 生命周期和 method 中也不能使用箭头函数 划重点 箭头函数 箭头函数是和我们工作密切相关的东西:可以说箭头函数的诞生,给我们的工作带来了极大的便利.但是箭头函数有什么缺点?什么时候不能使用箭头函数? 这你了解吗?我们觉得箭头函数很高级,

  • JS中不应该使用箭头函数的四种情况详解

    JS中不应该使用箭头函数的四种情况详解

    目录 箭头函数的一些缺点 1.不支持参数对象 2.无法通过apply.call.bind来改变this指针 什么时候不能使用箭头功能 1.请不要在构造函数中使用箭头函数 2.请不要在点击事件中操作this 3.请不要在对象的方法中使用箭头函数. 4.请不要在原型链中使用箭头函数 箭头函数给我们的工作带来了极大的方便,但是它们有什么缺点呢?我们应该一直使用箭头函数吗?我们应该在哪些场景中停止使用箭头函数? 现在,我们开始吧. 箭头函数的一些缺点 1.不支持参数对象 在箭头函数中,我们不能像在普通函

  • 一文带你玩转JavaScript的箭头函数

    一文带你玩转JavaScript的箭头函数

    目录 箭头函数 语法规则 简写规则 常见应用 map filter reduce 箭头函数中的this使用 concat this的查找规则 箭头函数 在ES6中新增了函数的简写方式----箭头函数,箭头函数的出现不仅简化了大量代码,也让代码看起来更加优雅,同时也解决了this指向问题,下面我们就来详细讲解如何玩转箭头函数. 语法规则 1.之前的方法 function foo1(){} var foo2 = function(name,age){ console.log("函数体代码"

  • JS字符串函数扩展代码

    复制代码 代码如下: /**************************************************** *CreateBy:joe zhou *CreateDate:2011-9-4 *Description:字符串辅助函数 ****************************************************/ //String.prototype = { // caption: function () { // }, // leftPad: fun

  • JS函数(普通函数,箭头函数)中this的指向问题详解

    目录 普通函数 箭头函数 普通函数 具名普通函数.匿名普通函数,在不作为对象的属性值的情况下,其内部的 this 总是指向代码运行环境下的全局对象 ( 例如,浏览器中的 window ). 示例: (function() { console.log(this); // window (function() { console.log(this); // window (function() { console.log(this); // window })() })() })() 普通函数,均可

  • 详解JavaScript什么情况下不建议使用箭头函数

    详解JavaScript什么情况下不建议使用箭头函数

    目录 this指向原理 问题的由来 内存的数据结构 函数 环境变量 箭头函数的缺点 不适用的场景 总结 箭头函数作为ES6新增的语法,在使用时不仅能使得代码更加简洁,而且在某些场景避免this指向问题.但是箭头函数不是万能的,也有自己的缺点以及不适用的场景,虽然可以解决this只想问题,但是也可能会带来this指向问题.具体场景具体分析,本文就深入探讨箭头函数. 箭头函数没有自己的this,其this取决于上下文中定义的this. this指向原理 问题的由来 学懂 JavaScript 语言,

  • JavaScript箭头函数的五种使用方法及三点注意事项

    目录 使用 简略编写 结合解构赋值 结合扩展运算符 this指向的改变 绑定this 注意细节 关于构造 关于参数对象 关于yield命令 面试题 前言: 箭头函数是ES6新增的定义函数的方式,我们可以使用()=>{}来顶替以前的函数定义方式,下面从五个使用姿势与三点注意事项来刨析箭头函数. 使用 简略编写 当我们箭头函数函数只有一个参数的时候是可以将()省略,当代码块只有一行的时候可以将{}与return省略 const fn = num => num.sort(); console.log

  • JavaScript箭头函数与普通函数的区别示例详解

    JavaScript箭头函数与普通函数的区别示例详解

    目录 箭头函数与普通函数的区别 箭头函数的理解 箭头函数里的this指向 总结 箭头函数与普通函数的区别 要讨论箭头函数和普通函数的区别,首先来看看两者的基本格式 普通函数和箭头共同点就是圆括号和大括号,圆括号里面一般放置参数,大括号一般放置函数主体,很明显箭头函数不需要写那么长,举个例子,有一个数组,使用map方法为数组的每个元素增加字符 let arr=['昨天','今天','明天'] let newarr=arr.map(function(item){ return item+='放假'

  • JavaScript中自带的 reduce()方法使用示例详解

    1.方法说明 , Array的reduce()把一个函数作用在这个Array的[x1, x2, x3...]上,这个函数必须接收两个参数,reduce()把结果继续和序列的下一个元素做累积计算,其效果就是: [x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4) 2. 使用示例 'use strict'; function string2int(s){ if(!s){ alert('the params empty'); return; } if

  • JavaScript中的ajax功能的概念和示例详解

    AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML). 个人理解:ajax就是无刷新提交,然后得到返回内容. 对应的不使用ajax时的传统网页如果需要更新内容(或用php做处理时),必须重载整个网页页面. 示例: html代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>

  • React元素与组件的区别示例详解

    目录 从问题出发 元素与组件 元素 组件 问题如何解决 自定义内容 第一种实现方式 第二种实现方式 第三种实现方式 从问题出发 我被问过这样一个问题: 想要实现一个 useTitle 方法,具体使用示例如下: function Header() { const [Title, changeTitle] = useTitle(); return ( <div onClick={() => changeTitle('new title')}> <Title /> </div

  • BeanFactory和FactoryBean的区别示例详解

    目录 正文 BeanFactory和FactoryBean的区别 1.BeanFactory 2.FactoryBean 正文 这个之前经常会遇到别人问 但是一直不是很能理解 工作开发中我对于bean的使用比较少 就是偶尔启动出错才会出现 可能是水平有限 但是bean 也是非常核心的问题 书到用时方恨少 且看且珍惜 BeanFacotry是spring中比较原始的Factory. 如XMLBeanFactory就是一种典型的BeanFactory.原始的BeanFactory无法支持spring

  • Python用zip函数同时遍历多个迭代器示例详解

    前言 本文主要介绍的是Python如何使用zip函数同时遍历多个迭代器,文中的版本为Python3,zip函数是Python内置的函数.下面话不多说,来看详细的内容. 应用举例 >>> list1 = ['a', 'b', 'c', 'd'] >>> list2 = ['apple', 'boy', 'cat', 'dog'] >>> for x, y in zip(list1, list2): print(x, 'is', y) # 输出 a is

  • JavaScript中运算符规则和隐式类型转换示例详解

    前言 本文主要给大家介绍了关于JavaScript运算符规则和隐式类型转换的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 隐式类型转换 在 JavaScript 中,当我们进行比较操作或者加减乘除四则运算操作时,常常会触发 JavaScript 的隐式类型转换机制:而这部分也往往是令人迷惑的地方.譬如浏览器中的 console.log 操作常常会将任何值都转化为字符串然后展示,而数学运算则会首先将值转化为数值类型(除了 Date 类型对象)然后进行操作. 我们首先来

  • JavaScript中的垃圾回收与内存泄漏示例详解

    JavaScript中的垃圾回收与内存泄漏示例详解

    前言 程序的运行需要内存.只要程序提出要求,操作系统或者运行时就必须供给内存.所谓的内存泄漏简单来说是不再用到的内存,没有及时释放.为了更好避免内存泄漏,我们先介绍Javascript垃圾回收机制. 在C与C++等语言中,开发人员可以直接控制内存的申请和回收.但是在Java.C#.JavaScript语言中,变量的内存空间的申请和释放都由程序自己处理,开发人员不需要关心.也就是说Javascript具有自动垃圾回收机制(Garbage Collecation). 一.垃圾回收的必要性 下面这段话

  • golang中make和new的区别示例详解

    前言 本文主要给大家介绍了关于golang中make和new区别的相关内容,分享出来供大家参考学习,话不多说了,来一起看看详细的介绍: new 和 make 都可以用来分配空间,初始化类型,但是它们确有不同. new(T) 返回的是 T 的指针 new(T) 为一个 T 类型新值分配空间并将此空间初始化为 T 的零值,返回的是新值的地址,也就是 T 类型的指针 *T,该指针指向 T 的新分配的零值. p1 := new(int) fmt.Printf("p1 --> %#v \n &quo

  • python中is与双等于号“==”的区别示例详解

    前言 在开始本文之前,首先要知道Python中对象包含的三个基本要素,分别是:id(身份标识).python type()(数据类型)和value(值).is和==都是对对象进行比较判断作用的,但对对象比较判断的内容并不相同.下面来看看具体区别在哪. 发现问题 最近在给小伙伴写段小代码用于爬取一个GIS的各高层数据,python中使用了"is"来代替"==",结果下载至512的时候出了问题. 代码如下 def get_next(x, y, z): z += 1 if

随机推荐