JavaScript中使用构造函数值与函数参数的差异解析

先看你给出的Add类代码：

class Add {
  constructor(number1, number2){
    this.number1 = number1;
    this.number2 = number2;
  }

  addNumbers (number1, number2){
    return number1 + number2;
  }

  addNumbersWithConstructor (){
    return this.number1 + this.number2;
  }
}

调用示例：

const AdditionMaker = new Add(1,2);
const result1 = AdditionMaker.addNumbers(3,2)
const result2 = AdditionMaker.addNumbersWithConstructor()
console.log(`result1 is ${result1}`) //5
console.log(`result2 is ${result2}`) //3

这两个方法的核心差异体现在以下几点：

• 数据来源完全不同

  • addNumbers使用的是调用方法时传入的参数，每次调用都能传入不同的值，和实例初始化时的参数无关。比如这次传3和2得5，下次传10和20就能得30。
  • addNumbersWithConstructor使用的是实例创建时存在this上的属性，也就是实例初始化时传入的1和2，只要不修改实例的这两个属性，每次调用结果都是固定的3。

• 数据生命周期不同

  • 方法参数是局部变量，只在当前方法调用过程中存在，调用结束后就会被销毁，每次调用都是全新的参数。
  • 实例属性绑定在实例对象上，只要实例没被销毁，属性就一直存在。你还能在外部修改它，比如执行AdditionMaker.number1 = 5后，再调用addNumbersWithConstructor就会返回7。

• 适用场景不同

  • 如果方法是做通用的、不依赖实例状态的操作，就用参数，比如addNumbers可以当成一个通用加法工具，不管实例是什么样，传啥就加啥。
  • 如果方法是基于当前实例的固定状态做操作，就用实例属性，比如这个实例专门用来计算1+2，addNumbersWithConstructor就适合这种场景。

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