javascript - es6 类 - 将 boolean 值传递给构造函数

Question

我正在尝试掌握 es6 类，但我似乎无法将 boolean 值传递给构造函数。

在下面的代码中

export default class site_alert {
  constructor(options) {
    this.message = options.message || 'default cookie message';
    this.autoDisplay = options.autoDisplay || true;
    console.log(this.autoDisplay);
  }
}

var sitemessage = new site_alert({
  message:"Some string",
  autoDisplay: false
});

autoDisplay 始终为 true，无论我创建类的实例时传递给它的是什么，它都采用默认值。

如果我将 autoDisplay 更改为字符串，它就可以正常工作。

你不能像这样将 boolean 值传递给构造函数吗？

Answer 1

错误 || true 始终为 true。 || 的计算方式如下:

• 评估左侧
• 如果左边是真实的，那就是结果
• 否则，对右边进行求值，得到结果

所以 || 不是执行此操作的方法。如果您希望能够提供任何其他虚假值，例如 0、""、null 等，您也会遇到麻烦。

您可以在选项中使用typeof options.autoDisplay === "undefined" 或"autoDisplay"(更多信息参见this question 和它的答案)

this.autoDisplay = typeof options.autoDisplay === "undefined" ? true : options.autoDisplay;

...但是您使用的是 ES2015(“ES6”)，因此您可以通过使用默认参数 和参数解构 来避免所有这些样板文件:

constructor({message = 'default cookie message', autoDisplay = true} = {}) {
    this.message = message;
    this.autoDisplay = autoDisplay;
    console.log(this.message, "|", this.autoDisplay);
}

实例:

class site_alert {
  constructor({message = 'default cookie message', autoDisplay = true} = {}) {
    this.message = message;
    this.autoDisplay = autoDisplay;
    console.log(this.message, "|", this.autoDisplay);
  }
}
new site_alert();
new site_alert({autoDisplay:false});
new site_alert({message:"custom message"});

请注意，在我们的函数代码中，我们甚至不再有选项；当函数被调用时，参数从选项对象中解构出来。

让我们看一下声明:

{message = 'default cookie message', autoDisplay = true} = {}

{message = 'default cookie message', autoDisplay = true} 部分说:

• 第一个(在我们的例子中是唯一的)参数将是一个我们想要解构的对象(感谢围绕它的 {})
• 如果上面没有message 属性，默认为'default cookie message'
• 如果没有'autoDisplay'属性，默认为true

...= {} 部分表示:如果未给出参数，则默认为空白对象(之后将启动上面的两个默认值)。

---

旁注:JavaScript 中的压倒性约定是构造函数(类)以大写首字母编写(通常采用 CappedCamelCase)，因此 SiteAlert 而不是 site_alert。您不必遵循惯例，但如果您不知道，只需将其标记出来即可。