如何正确实现构造函数的实例方法？

Question

以下构造函数和日志代码给出...

function Car(brand, year, model, color, utilidad) {
  this.brand = brand;
  this.year = year;
  this.model = model;
  this.color = color;
  this.utilidad = utilidad;
  this.useFor = (prmt) => {
    this.utilidad.push(prmt);
  }
};

const toyota = new Car("Toyota", 2021, "Prado", "Red", "city");
toyota.useFor('mountain');

console.log(toyota);

代码没有得到预期的日志数据，而是显示以下消息...

TypeError: "this.utilidad.push is not a function"

为什么会这样？

Answer 1

因为 *.push() 用于在数组中插入数据，但是您将字符串“city”放在默认参数上；

Answer 2

从上面的评论...

“OP 没有构建原型，而是实现了一个函数，该函数旨在用作构造函数，以创建 Car 实例。最重要的是，OP 正在初始化 toyota，输入错误的 @ 987654323@ 参数应该是一个数组而不是一个字符串，以便允许 useFor 方法稍后推送到对象自己的 utilidad 属性中。"

因此，内部重构的Car 实现可能使用初始值或默认值作为省略的参数值。它可能会引入一些正式的类型检查，以免由于错误提供的参数类型而脱离TypeErrors。除了将参数作为自己的属性分配给对象的任务之外，它确实在构造函数的prototype 处实现了它的唯一方法...

function Car(
  brand = 'unknown',
  year = 'not provided',
  model =  'unknown',
  color = 'not provided',
  utilidad = [],
) {
  return Object.assign(this, {
    brand,
    year,
    model,
    color,
    utilidad: Array.isArray(utilidad)
     ? utilidad
     : [utilidad],
  });
};
Car.prototype.useFor = function useFor (value) {
  this.utilidad.push(value);
};


const dummy = new Car();
const toyota = new Car('Toyota', 2021, 'Prado', 'Red', 'city');

dummy.useFor('test field');
toyota.useFor('mountain');

console.log({ dummy, toyota });

.as-console-wrapper { min-height: 100%!important; top: 0; }

下一次迭代可能会引入类语法和一个需要单个配置或选项参数的构造函数...

class Car {
  constructor({
    brand = 'unknown',
    year = 'not provided',
    model =  'unknown',
    color = 'not provided',
    utilidad = [],
  }) {
    Object.assign(this, {
      brand,
      year,
      model,
      color,
      utilidad: Array.isArray(utilidad)
       ? utilidad
       : [utilidad],
    });
  }
  // prototype method(s)
  useFor(value) {
    this.utilidad.push(value);
  }
}


const dummy = new Car({});
const toyota = new Car({
  brand: 'Toyota',
  year: 2021,
  model: 'Prado',
  color: 'Red',
  utilidad: 'city',
});

dummy.useFor('test field');
toyota.useFor('mountain');

console.log({ dummy, toyota });

.as-console-wrapper { min-height: 100%!important; top: 0; }