JavaScript中如何实现对象的加减乘运算？以向量场景为例

首先明确：JavaScript 没有提供 C++/Java 这类语言的显式运算符重载语法，但通过原生的对象类型转换钩子，完全可以对自定义对象（比如向量类）实现接近原生算术运算的调用体验，尤其适合向量计算这类有明确数学运算规则的场景。

当你对两个对象执行+、*这类算术运算时，JS 引擎会自动尝试把操作数转换成可计算的原始值，转换过程的优先级为：

• 优先调用对象上的[Symbol.toPrimitive]方法，根据当前转换场景（数字、字符串、默认）返回对应的原始值
• 如果没有定义[Symbol.toPrimitive]，则依次调用valueOf、toString方法完成转换

只要在这个转换过程中自定义返回值的生成逻辑，就可以把对象参与运算的过程，替换成你自定义的计算逻辑。

基础实现思路 #

• 先定义标准的向量类，内部存储各维度的分量值，提前封装好向量加、减、点乘等核心计算方法，保证计算逻辑的正确性
• 给向量类绑定自定义的类型转换钩子，拦截对象的算术运算转换流程
• 针对纯运行时的限制做适配：因为原生类型转换钩子无法直接获取另一侧的运算操作数、以及当前用的运算符类型，需要通过全局上下文暂存当前的运算规则和右操作数，或者配合构建工具做编译转译，实现零侵入的运算符调用体验

可运行的基础示例 #

// 全局运算上下文，暂存当前要执行的计算逻辑和右操作数
let currentComputeRule = null;
let rightOperand = null;

class Vec2D {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  // 核心向量计算方法
  add(otherVec) {
    return new Vec2D(this.x + otherVec.x, this.y + otherVec.y);
  }

  elementMultiply(otherVec) {
    return new Vec2D(this.x * otherVec.x, this.y * otherVec.y);
  }

  // 自定义类型转换钩子
  [Symbol.toPrimitive](hint) {
    // 如果存在暂存的计算规则，直接执行向量计算返回新实例
    if (currentComputeRule && rightOperand) {
      const result = currentComputeRule(this, rightOperand);
      // 执行完清空上下文，避免污染后续运算
      currentComputeRule = null;
      rightOperand = null;
      return result;
    }
    // 无运算上下文时的默认转换行为
    if (hint === 'string') return `Vec2D(${this.x}, ${this.y})`;
    return this.x;
  }
}

// 实际使用示例
const vec1 = new Vec2D(2, 3);
const vec2 = new Vec2D(4, 5);

// 暂存加法计算规则
currentComputeRule = (left, right) => left.add(right);
rightOperand = vec2;
// 直接执行加法运算，拿到计算后的新向量
const addResult = vec1 + 0;
console.log(addResult); // 输出 Vec2D(6, 8)

// 暂存逐元素乘法计算规则
currentComputeRule = (left, right) => left.elementMultiply(right);
rightOperand = vec2;
const multiplyResult = vec1 * 1;
console.log(multiplyResult); // 输出 Vec2D(8, 15)

你预期的直接写const vec = vec1 + vec2、const vec = vec1 * vec2的写法，在纯运行时环境下存在天然限制：原生类型转换流程拿不到另一侧的操作数，所以才需要前置暂存上下文。如果要实现完全符合预期的零前置写法，通常需要配合构建阶段的语法转译，通过 Babel 这类工具把识别到的向量算术运算自动替换为对应类方法的调用，最终不改变开发时的语法体验，也避免了运行时的上下文污染问题。

• 不要依赖valueOf返回复杂对象的自定义逻辑实现长期生产可用的方案，因为引擎在多轮运算时可能会多次触发类型转换，导致结果被重复计算
• 纯运行时实现的运算符语法糖，存在求值顺序依赖，在 JS 的非严格模式、异步代码场景下很容易出现上下文串扰的问题，不适合核心业务链路使用
• 目前 JS 生态中向量计算的主流实现方式还是直接调用类方法（比如vec1.add(vec2)），自定义运算符语法属于对开发体验的增量优化，不能替代核心计算逻辑的封装

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