es6 类 - 将布尔值传递给构造函数

Question

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

在下面的代码中

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 更改为字符串，它可以正常工作。

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

Answer 1

false || true 始终为true。 || 的评估方式如下：

• 评估左侧
• 如果左边是truthy，那就是结果
• 否则，计算右侧并将其设为 reslt

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

您可以使用typeof options.autoDisplay === "undefined" 或"autoDisplay" in options（更多内容请参见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"});

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

让我们看看那个声明：

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

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

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

...= {} 部分说：如果未给出参数，则默认为空白对象（之后将启动上述两个默认值）。

---

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