在javascript中读取函数参数属性时出现类型错误

下面是构造函数的定义

function Box (options) {
console.log(options);
this.x = options.x || 10;
this.y = options.y || 10;
this.width = options.width || 100;
this.height = options.height || 100;
this.color = options.color || '#000';
}

这将抛出一个Typeerror，说明它无法读取此.x=options.x | | 10

我正在尝试创建一个长方体对象数组。这是密码

for(var i=0; i<100; i++){
boxes[i] = new Box({
    x: 10+i,
    y: 10+i,
    width: 2*i,
    height: 3*i,
    color: randomColor(0, 255, 0, 255, 0, 255, .5)
});
}

---

我是不是遗漏了什么。非常感谢您的帮助。

您引用的代码不会出现您引用的错误。不过，如果调用newbox而不传入任何内容，则会出现该错误，因为在Box中，选项将是未定义的。从评论来看，事情似乎就是这样。您可以在顶部再次使用| |进行防御：

function Box (options) {
    console.log(options);
    options = options || {}; // <== here
    this.x = options.x || 10;
    this.y = options.y || 10;
    this.width = options.width || 100;
    this.height = options.height || 100;
    this.color = options.color || '#000';
}

b、 x应该是0，而不是10。发生这种情况是因为| |的工作原理如下：它计算其左操作数，如果该值为truthy，则生成该值；但是，如果值为false，它将计算右操作数并将其作为结果。falsey值包括0它们是：0，未定义，null，NaN，当然还有false，但是0似乎很容易成为x的有效值

对于这类情况，您可以使用hasOwnProperty或在：

您也可以在中使用，尽管在大多数JavaScript引擎上速度较慢，因为它检查原型链：

function Box (options) {
    console.log(options);
    options = options || {};
    this.x = "x" in options ? options.x : 10;
    this.y = "y" in options ? options.y : 10;
    this.width = options.width || 100;    // Maybe here too, if you want to allow 0 as a width
    this.height = options.height || 100;  // Maybe here too, if you want to allow 0 as a height
    this.color = options.color || '#000';
}

---

在这里运行良好@itsygoesh:您引用的代码不会出现您引用的错误。如果您只是创建了一个新的Box，而没有传入对象，那么您可能会遇到这个错误，因为在Box中，选项是未定义的，但这并不是您上面显示的内容。@T.J.Crowder非常感谢您。我确实声明了一个没有参数的Box对象。现在工作正常。@Quince Yup现在工作正常。您可以始终在第一行添加一个options=options | |{}，以确保在尝试使用它时选项在那里

function Box (options) {
    console.log(options);
    options = options || {};
    this.x = options.hasOwnProperty("x") ? options.x : 10;
    this.y = options.hasOwnProperty("y") ? options.y : 10;
    this.width = options.width || 100;    // Maybe here too, if you want to allow 0 as a width
    this.height = options.height || 100;  // Maybe here too, if you want to allow 0 as a height
    this.color = options.color || '#000';
}

function Box (options) {
    console.log(options);
    options = options || {};
    this.x = "x" in options ? options.x : 10;
    this.y = "y" in options ? options.y : 10;
    this.width = options.width || 100;    // Maybe here too, if you want to allow 0 as a width
    this.height = options.height || 100;  // Maybe here too, if you want to allow 0 as a height
    this.color = options.color || '#000';
}