javascript - JavaScript构造函数未设置正确的值

我有一个简单的ES6类，看起来像：

class NewsItem {
    constructor(title, date, content, photoURL) {
        this.title = title | '';
        this.date = date | '01-01-00';
        this.content = content | '';
        this.photoURL = photoURL | '../images/image.png';
    }
}

我在创建类的实例时遇到了麻烦。尝试类似以下的简单操作：

new NewsItem("fgfdds", "gfdgfd", "fdsfds", "fdsfds");

会导致NewsItem对象，但是，所有类的属性（而不是传递的字符串）都设置为0。



我敢肯定，我只是在使用JavaScript错误，但无法弄清楚。这里发生了什么？

最佳答案

问题是您使用的是|而不是||。您正在使用的那个bitwise OR将左右操作数转换为数字，然后将运算应用于这些值。

区别因素是：按位运算对位执行操作，因此将操作数转换为数字，然后对位进行操作。逻辑运算不是对位本身而是对数据进行逻辑上的运算。

从而：

'fgfdds' | ''

实际上是内部使用ToInt32将'fgfdds'和''转换为数字。两者均为NaN，如果结果为NaN，则方法ToInt32返回+0。因此，您正在执行以下操作：

0 | 0

因为两个操作数都为0，所以为0。使用逻辑OR或||不会将操作数转换为数字，也不会对操作数进行逻辑求值。如果定义了一个操作数或另一个操作数不为假，则它将求值为该操作数。因此，请尝试以下操作：

this.title = title || '';

如果定义了this.title或为true，则结果为this.title，否则为空字符串。请参阅MDN上的logical operators和bitwise operators。



另外，如果您使用的是ECMAScript 2015，请尝试使用default parameters代替，这是一种更好的方法：

constructor(title = '', date = '01-01-00', content = '', photoURL = '../images/image.png') {
  ...
}