Ошибка типа при чтении свойств аргумента функции в javascript

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

---

Side Примечание: Использование || по умолчанию вещи иногда подвержены ошибкам. Например, в вашей функции 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, и, конечно же, 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'; 
} 

вы также можете использовать in, хотя это медленнее на большинстве двигателей 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'; 
}