Javascript调用函数是否加括号的区别。以及函数立即执行

本文探讨了在JavaScript中,使用React进行事件绑定时,是否在函数调用中添加括号的区别。主要分为箭头函数和非箭头函数两种情况。加括号会导致函数立即执行,而不加括号则只会传递函数引用。对于非箭头函数,不加括号的情况,事件绑定实际上绑定了函数的返回值,而非函数本身。总结中强调了括号作为函数调用运算符的角色,并提及JavaScript的浅拷贝特性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近用react绑定js事件发现了一个问题,在绑定事件时,是否加括号是有讲究的:

1. 箭头函数代码片段

function click_me(id){
	console.log(1);
	console.log(id);
}
<button onClick={()=>this.click_me} type="button">未加括号</button>
<button onClick={()=>this.click_me(2)} type="button">加括号</button>
  1. 首先浏览器加载完毕,两个点击事件都不会有反应
  2. 点击未加括号,控制台将不会有任何反应
  3. 点击加括号的函数,控制台将会输出1和2
个人见解:
  1. 在js中,数组和对象还有函数是引用类型,在上述代码中,绑定函数不加括号,相当于将onClick事件绑定了一个匿名函数,匿名函数的内容只是一个指针,但这个指针并不会执行
  2. 而加上括号的区别:(加上括号代表立即执行这个指针所指向的地址)每次点击运行匿名函数的时候,程序运行到括号,就会立即执行指针所指向的函数,而不是在匿名函数内部被执行;
  3. 通俗得讲 ,假设现在有几个柜子,一个柜子内存放的是一个纸条,纸条的内容指向了这个苹果所在的柜子
    而加括号代表立刻去纸条指向的地址拿这一个苹果,不加括号仅仅代表看了下这一个纸条所指向的地址

2. 不用箭头函数代码片段

function click_me(id){
	console.log(1);
	console.log(id);
}
<button onClick={this.click_me} type="button">未加括号</button>
<button onClick={this.click_me(2)} type="button">加括号</button>
  1. 浏览器加载完成后,控制台输出1和2
  2. 点击未加括号,控制台输出1和一个类 (这个类是什么目前我也没有搞明白,恳请指点)
  3. 点击加括号的函数,控制台无状态
个人见解:
  1. 在程序编译过程中,在绑定事件这里遇见了一个括号,就会去执行该指针所指向的函数
    而点击这个绑定事件无反应是因为这个事件绑定了一个函数的返回值,onclick被重新赋值
  2. 而此处不加括号,此时不是得到函数的返回值,因为函数没有立即执行。它只是传递了指向函数所在地址的指针,在需要的时候好找到函数体去执行。

总结:

  • 括号是"函数调用运算符 " ,示例一匿名函数内指针加括号没有在程序加载完毕执行是因为程序在编译的时候遇到函数会跳过,想要匿名函数立即执行的写法如下:
			//为了区分,将两个括号分开
              <button onClick=
              {	(()=>this.on_click_me(2))	()} 	
              type="button"
              >
              加括号</button>
  • js有浅拷贝类型和深拷贝类型,引用类型是浅拷贝类型,与原对象共用同一块内存空间。

以下是示例二没有明白具体意义的类,日后回来填坑

Developer {props: {}, context: {}, refs: {}, updater: {}, on_delete: ƒ,}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值