Почему не работает класс js?

Question

[Дуболом Одноклеточный]

Я создал класс который должен запоминать значения width и height, а потом с помощью функции geo() писать в консоли width и height который я задал классу:

class Canv {
  constructor(width, height) {
    this.width = width.width;
    this.height = height.height;
  }
  
  geometry() {
    console.log(this.width, this.height);
  }
}

const canv = new Canv({
  width: 50, // Задаю классу значение width
  height: 50 // Задаю классу значение height
});
canv.geometry(); // Должно вернуть: 50, 50

Но пишет в консоли браузера: Uncaught TypeError: Cannot read property 'height' of undefined.
Причем ошибка происходит не при вызове функции, а когда я в конструкторе задаю значение this.height = height.height;
Не могу понять что делать то?

Comments

[slaxik123]

замени в constructor width.width на width и height.height на height

Answer 1

[hzzzzl]

constructor(width, height) // принимает два значения

const canv = new Canv({ //  посылаешь объект, зачем
  width: 50
  height: 50
});

///////////

class Canv {
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }
  
  geometry() {
    console.log(this.width, this.height);
  }
}

const canv = new Canv(50, 50);
canv.geometry(); // Должно вернуть: 50, 50

Comments

[Дуболом Одноклеточный]

Я хочу передать объект, чтобы потом не запутаться в настройках! Это удобно если буду добавлять много настроек

[hzzzzl]

Дуболом Одноклеточный,
ну тогда и конструктор пусть принимает объект

constructor(canvas) {
    this.width = canvas.width;
    this.height = canvas.height;
  }

[Дуболом Одноклеточный]

hzzzzl, Спасибо вам. Пока ел подумал об этом, но посчитал что тогда не смогу поменять параметр объекта потом.

Answer 2

[dev null]

Вы передаёте один аргумент, объект, а в конструкторе принимаете 2 аргумента

Comments

[Дуболом Одноклеточный]

Так как написать чтоб работало?

[dev null]

Дуболом Одноклеточный, если хотите передавать объект, то

constructor({width, height}) {
    this.width = width;
    this.height = height;
  }

Answer 3

[Александр]

Вариант 1:

class Canv {
    constructor(width, height) {
        this.width = width;
        this.height = height;
    }
    ...
}

const canv = new Canv(50, 50);

Вариант 2:

class Canv {
    constructor({ width, height }) {
        this.width = width;
        this.height = height;
    }
    ...
}

const canv = new Canv({
    width: 50,
    height: 50
});

Answer 4

[drawnofmymind]

А в конструктор можно передавать параметры по умолчанию типо:
constructor(width = {}, height = {})

?