最近用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
个人见解:
- 在js中,数组和对象还有函数是引用类型,在上述代码中,绑定函数不加括号,相当于将onClick事件绑定了一个匿名函数,匿名函数的内容只是一个指针,但这个指针并不会执行。
- 而加上括号的区别:(加上括号代表立即执行这个指针所指向的地址)每次点击运行匿名函数的时候,程序运行到括号,就会立即执行指针所指向的函数,而不是在匿名函数内部被执行;
- 通俗得讲 ,假设现在有几个柜子,一个柜子内存放的是一个纸条,纸条的内容指向了这个苹果所在的柜子
而加括号代表立刻去纸条指向的地址拿这一个苹果,不加括号仅仅代表看了下这一个纸条所指向的地址
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和2
- 点击未加括号,控制台输出1和一个类 (这个类是什么目前我也没有搞明白,恳请指点)
- 点击加括号的函数,控制台无状态
个人见解:
- 在程序编译过程中,在绑定事件这里遇见了一个括号,就会去
执行该指针所指向的函数
而点击这个绑定事件无反应是因为这个事件绑定了一个函数的返回值,onclick被重新赋值 - 而此处不加括号,此时不是得到函数的返回值,因为函数没有立即执行。它只是传递了
指向函数所在地址的指针
,在需要的时候好找到函数体去执行。
总结:
- 括号是"函数调用运算符 " ,示例一匿名函数内指针加括号没有在程序加载完毕执行是因为程序在编译的时候遇到函数会跳过,想要匿名函数立即执行的写法如下:
<button onClick=
{ (()=>this.on_click_me(2)) ()}
type="button"
>
加括号</button>
- js有浅拷贝类型和深拷贝类型,引用类型是浅拷贝类型,与原对象共用同一块内存空间。
以下是示例二没有明白具体意义的类,日后回来填坑
Developer {props: {…}, context: {…}, refs: {…}, updater: {…}, on_delete: ƒ, …}