Как сделать конструктор объекта на JavaScript; - PullRequest
Новая
       19

Как сделать конструктор объекта на JavaScript;

4 голосов
/ 20 июня 2020

Не могли бы вы объяснить мне, что не так в следующем коде? 

function box (width, height, color) {
    this.width=width;
    this.height=height;
    this.color=color;
    this.style.width=width;
    this.style.height=height;
    this.style.backgroundColor=color;
}

var box1 = new box (100, 100, 'red');

document.body.appendChild(box1);

Ответы [ 3 ]

3 голосов
/ 20 июня 2020

Вам нужно createElement и передать ему следующие параметры: 

function box (width, height, color) {
  this.element = document.createElement('div');
  this.element.style.width=width+'px';
  this.element.style.height=height+'px';
  this.element.style.backgroundColor=color;
  return this.element;
}

var box1 = box (100, 100, 'red');

document.body.appendChild(box1);
2 голосов
/ 20 июня 2020

Основная проблема в том, что box не создает элемент DOM. Вы не можете просто добавить какой-либо объект в DOM, это должен быть какой-то узел DOM (элемент, текстовый узел и т. Д. c.).

Если у вас есть box, создайте Элемент DOM, вы не захотите хранить width, height и color на нем напрямую, только в его style объекте.

Поскольку объект создается при использовании new будет выброшен, я бы использовал createBox вместо этого, а не new с ним: 

function createBox(width, height, backgroundColor) {
    const element = document.createElement("div");
    element.style.width = width + "px";
    element.style.height = height + "px";
    element.style.backgroundColor = backgroundColor;
    return element;
}

document.body.appendChild(
    createBox(100, 100, "red")
);

Если вы не хотели создавать элемент DOM, то проблема с this.style.width=width заключается в том, что он пытается назначить undefined, потому что this не имеет style свойство, поэтому this.style равно undefined. Если вы хотите создать объект из различных свойств, вы можете использовать литерал объекта: 

function Box(width, height, color) {
    this.width = width;
    this.height = height;
    this.color = color;
    this.style = {width, height, backgroundColor: color};
}

(обратите внимание, что я изменил box на Box. Подавляющее соглашение в JavaScript заключается в том, что конструктор функции (те, которые вы вызываете через new или аналогичные) начинаются с символа верхнего регистра.)

Но если вы вместо этого создаете элемент DOM, он уже будет иметь объект style.

Я должен отметить, что я использовал сокращенные свойства для width и height, которые были добавлены в ES2015 и поэтому поддерживаются почти повсеместно, но не устаревшими браузерами, такими как IE11. Если вам нужно их поддержать, используйте вместо этого длинную форму (width: width).

Вы также можете изучить синтаксис ES2015 class, который позволяет вам создавать функции-конструкторы и заполнять объект, который они назначают как прототип экземпляров в более сжатой и менее подверженной ошибкам форме. Если вам нужно настроить таргетинг на браузеры, поддерживающие только ES5, для вас есть такие инструменты, как Babel.

0 голосов
/ 20 июня 2020

Это не конструктор, а просто функция. this в функции не является элементом.

Внутри функции вы не создаете фактический блок. Некоторые свойства (например, this.color) будут назначены, но не всегда будут делать то, что вы ожидаете. Кроме того, функция box ничего не возвращает, поэтому добавлять нечего.

Вот скелет для создания элемента, но я предлагаю вам сначала попробовать узнать больше Скрипты JS / Html / Dom . 

function box (width, height, color, backgroundColor) {
  const box = document.createElement("div");
  const toPx = n => `${n}px`;
  box.style.width = toPx(width);
  box.style.height = toPx(height);
  box.style.color = color;
  box.style.backgroundColor = backgroundColor;
  // return this, otherwise there's nothing to append
  return box;
}

var box1 = box(100, 100, 'white', 'red');
box1.textContent = "Hello world";
document.body.appendChild(box1);
...