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

Question

我有一个简单的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对象，但不是传递的字符串，而是所有的类＆＃39;属性设置为0。

我很确定我只是错误地使用了JavaScript，但无法弄明白。这里发生了什么？

Answer 1

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

区别因素是：按位操作对位执行操作，因此操作数被转换为数字并且对位执行操作。 逻辑操作逻辑上执行操作，而不是位本身，而是数据。

因此：

'fgfdds' | ''

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

0 | 0

这是0，因为两个操作数均为0.使用逻辑 OR或||，不会将操作数转换为数字，逻辑评估操作数。如果定义了一个操作数或另一个操作数，或者没有假，那么它将计算该操作数。因此，试试这个：

this.title = title || '';

如果this.title已定义或真实，则评估为this.title，否则为空字符串。在MDN上查看logical operators和bitwise operators。

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

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

Answer 2

this.title = title || '';

像这样分配它。 Go here to see the explanation on Logical OR和bitwise OR