是否需保存getter函数返回值以优化JavaScript代码性能与内存？

场景代码 #

import { mixer } from './kitchen';

type Food = { type: 'fruit'|'vegetable', name: string }

class Fridge {
  food: Food[] = []

  get fruits () { return this.food.filter(f => f.type == 'fruit') }

  mixFruits1 () {
    console.log(`Mixing ${this.fruits.length} together`)
    mixer(this.fruits)
    console.log(`You have mixed ${this.fruits.map(f => f.name).join(', ')} together`)

    // 注意：这个函数里调用了3次this.fruits，每次都是调用getter函数
  }

  mixFruits2 () {
    const fruits = this.fruits
    console.log(`Mixing ${fruits.length} together`)
    mixer(fruits)
    console.log(`You have mixed ${fruits.map(f => f.name).join(', ')} together`)

    // 注意：这个函数只调用一次this.fruits，把结果存在局部变量中复用
  }
}

问题核心 #

从性能角度分析，mixFruits2是否在技术上优于mixFruits1？因为mixFruits1中三次调用了this.fruits（本质是三次调用getter函数），还是JavaScript内部会自动完成预处理，无需开发者手动缓存返回值？

回答 #

是的，mixFruits2在性能上确实优于mixFruits1。

原因很直接：this.fruits是一个getter属性，每次访问它都会执行内部的filter方法，对food数组做一次完整的遍历筛选。mixFruits1里连续调用了三次this.fruits，就等于重复做了三次完全相同的数组遍历和筛选操作；而mixFruits2只调用一次getter，把筛选后的结果存在局部变量fruits里，后续所有操作都复用这个变量，只做了一次筛选遍历。

JavaScript引擎不会自动缓存getter的返回值，因为getter本质是一个函数，引擎无法保证每次调用它的返回结果都一致——比如如果在两次调用this.fruits之间，food数组被修改了，getter的返回结果就会不同。所以引擎不会做这种“假设性”的优化，必须由开发者手动缓存重复使用的getter返回值。

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