Angular中属性检查与函数调用的性能对比及绑定优化咨询

让我分两部分来解答你的问题：

问题1：检查对象属性与检查函数返回值的性能差异 #

简单来说，直接访问对象属性的性能远高于调用函数获取返回值，核心差异在于执行路径的复杂度：

• 对象属性访问是直接的内存读取操作，就像从口袋里直接掏钥匙，几乎没有额外开销，属于O(1)的极快操作。
• 函数调用则需要经历一系列额外步骤：创建调用栈帧、传递参数（哪怕没有参数）、执行函数内部逻辑、返回值、销毁栈帧。哪怕函数只是简单返回一个属性值，这些步骤也会带来额外的性能损耗。

这种差异在单次调用时可能微乎其微，但在频繁调用的场景（比如循环遍历、框架的变更检测周期）中，累积的开销会被放大。比如如果在一个包含1000条数据的列表中，每次渲染都调用函数判断状态，和直接读取属性相比，性能差距会非常明显。

问题2：Angular绑定中使用Set.has()的性能疑问 #

说法是否正确？ #

这个说法完全正确。Angular的默认变更检测机制会在每次触发检查（比如用户点击、异步操作完成、定时器触发）时，重新执行所有绑定表达式。如果绑定中包含函数调用（比如selection.has(item)），每次变更检测都会执行这个函数。

当前用法是否会降低性能？ #

取决于你的列表规模：

• 如果列表只有少量元素（比如10个以内），可能感知不到性能问题；
• 但如果列表元素较多（比如几十上百个），或者变更检测触发频繁（比如页面有大量交互、滚动加载），Set.has()的反复调用会累积可观的性能开销——哪怕Set.has()本身是O(1)的操作，函数调用的额外开销加上多次执行，会让变更检测的耗时显著增加。

是否应为每个item添加属性并在Set操作时更新？ #

非常建议这么做，这是Angular性能优化的常见最佳实践。具体做法如下：

1. 先给MyType添加selected属性：

interface MyType {
  title: string;
  // 新增选中状态属性
  selected: boolean;
}

2. 修改toggleItem方法，同步更新item的selected属性：

toggleItem(item: MyType) {
  const isSelected = this.selection.has(item);
  if (isSelected) {
    this.selection.delete(item);
    item.selected = false;
  } else {
    this.selection.add(item);
    item.selected = true;
  }
}

3. 模板中直接读取属性：

<button 
  class="toggle" 
  type="button" 
  [ngClass]="{'selected': item.selected}" 
  [title]="item.selected ? 'Deselect' : 'Select'" 
  (click)="toggleItem(item)"
>
  {{ item.title }}
</button>

这样修改后，变更检测时只需要直接读取对象属性，几乎没有额外开销，性能会得到明显提升。同时代码的可读性也更好，状态逻辑更清晰。

如果你的应用对性能要求极高，还可以结合ChangeDetectionStrategy.OnPush变更检测策略，让组件只在输入属性变化时才触发变更检测，进一步减少不必要的检查开销。

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