有人可以解释这个看似奇怪的分配`{key = value} = argument`

Question

上下文：这是 javascript tutorial 中的一项任务。该代码应该生成 Clock 的子类 ExtendedClock，允许控制台以自定义的时间间隔显示当前时间。

Class Clock {
  constructor({ template }) {
    this._template = template;
  }

  _render() {
    let date = new Date();

    let hours = date.getHours();
    if (hours < 10) hours = '0' + hours;

    let mins = date.getMinutes();
    if (mins < 10) min = '0' + mins;

    let secs = date.getSeconds();
    if (secs < 10) secs = '0' + secs;

    let output = this._template
      .replace('h', hours)
      .replace('m', mins)
      .replace('s', secs);

    console.log(output);
  }

  stop() {
    clearInterval(this._timer);
  }

  start() {
    this._render();
    this._timer = setInterval(() => this._render(), 1000);
  }
}

这里出现了教程中给出的解决方案中的奇怪行：

class ExtendedClock extends Clock {
  constructor(options) {
    super(options);
    let { precision=1000 } = options;  // what is this?
    this._precision = precision;
  }

  start() {
    this._render();
    this._timer = setInterval(() => this._render(), this._precision);

} }; 另一个问题：我的代码如下。为什么这行不通？

class ExtendedClock extends Clock {
  constructor({template, precision = 1000}) {
    super({template})
    this._precision = precision
  }

  start() {
    super.start()
    this._timer = setInterval(() => this._render(), this._precision)
  }
}

Answer 1

这个奇怪的代码只是一种覆盖默认值的便捷方法，如果有属性的话。

let options = { precision: 999, template: 'h:m:s' };
let { precision = 1000 } = options; // precision === 999

let options = { template: 'h:m:s' };
let { precision = 1000 } = options; // precision === 1000

对于第二期，我需要更多的意见。您遇到了哪个错误？

Answer 2

这是具有默认值的对象解构语法。如果您要解构的对象包含 precision 键，则将使用该值，但如果不包含，将使用 1000。

如果键存在，将使用它的值：

const options = { precision: 800 };
const { precision = 1000 } = options;
console.log(precision); // logs 800

但如果键不存在，将使用默认值：

const options = {};
const { precision = 1000 } = options;
console.log(precision); // logs 1000

您的代码可能不起作用，因为当您调用 super.start() 时，超类使用

开始循环

setInterval(() => this._render(), 1000);

您的代码在调用此函数后开始循环，但现在两个循环都是运行，导致超类的 setInterval 每 1000 毫秒调用一次渲染函数，然后每个 precisionms 由你的子类的循环。

与其在循环开始时调用 super.start()，不如尝试只调用 this._render().

有人可以解释这个看似奇怪的分配`{key = value} = argument`

can someone explain this seemingly weird assignment `{key=value} = argument`

javascript

class

subclass