Angular组件通信中@Input传函数不加括号生效的JS基础原理解析

核心JavaScript概念解释 #

JavaScript中函数属于一等公民（First-class Function），函数本身就是一种可被传递的值：

• 写eventHandler时，你传递的是函数对象本身的引用，不会触发函数执行
• 写eventHandler()时，你是立即执行这个函数，最终传递的是函数执行后的返回值（你给出的示例中eventHandler没有返回值，所以默认返回undefined）

Angular 运行逻辑说明 #

你同事的实现是通过@Input传递函数引用的标准用法：

• 父组件通过[clickHandler]="eventHandler"绑定，把eventHandler的函数引用传递给子组件的clickHandler输入属性
• 子组件内部需要先声明@Input() clickHandler: (...args: unknown[]) => void接收这个函数，后续需要触发通信时，直接调用this.clickHandler(参数1, 参数2...)即可执行父组件定义的函数逻辑
• 如果这里写成[clickHandler]="eventHandler()"，Angular在每次变更检测时都会直接执行eventHandler，把返回的undefined传给子组件，子组件后续尝试调用clickHandler时会抛出类型错误，因为undefined不是可执行的函数

额外注意点 #

这种传函数引用的写法有个常见的this指向坑：如果eventHandler内部用到了this访问父组件的属性/方法，子组件调用时this默认会指向子组件实例而非父组件。解决方法有两种：

• 父组件用箭头函数定义eventHandler：eventHandler = (...args) => { console.log(args) }
• 绑定时手动绑定this：[clickHandler]="eventHandler.bind(this)"

内容的提问来源于stack exchange，提问作者Florian Uhlmann