Question

这是构造函数的定义。

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，指出它无法读取this.x = options.x ||中未定义的属性10;

我正在尝试创建一个Box对象数组。这是代码。

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)
});
}

我在这里遗漏了什么。任何帮助都会非常感激。

Answer 1

您引用的代码不会出现您引用的错误。但是，如果你在没有传递任何内容的情况下调用new Box()（因为在Box内，options将是undefined），你会得到该错误。从评论中，听起来就像是发生了什么。您可以再次使用||在顶部进行防御：

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';
}

附注：使用||默认情况有时容易出错。例如，在Box函数中，如果我这样做会怎样？

var b = new Box({
    x: 0,
    y: 0,
    width: 20,
    height: 20,
    color = "#888"
});
console.log(b.x); // 10 -- huh?!

b.x应该是0，而不是10。之所以会发生这种情况，因为||的工作原理如下：它会评估其左侧操作数，如果该值为“真实”，则会产生该值;但是，如果值为“falsey”，则它会评估右手操作数并将其用作结果。假名值包括0（它们是：0，""，undefined，null，NaN，当然还有{{{ 1}}），但false似乎很容易成为0的有效值。

对于这些情况，您可以使用x或hasOwnProperty：

in

你也可以使用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'; }，虽然它在大多数JavaScript引擎上都比较慢，因为它会检查原型链：

in

在javascript中读取函数参数的属性时键入错误

1 个答案: