如何在 JavaScript 中创建对象构造函数；

Question

你能解释一下下面的代码有什么问题吗？

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

Answer 1

主要问题是 box 没有创建 DOM 元素。您不能只将任何对象附加到 DOM，它必须是某种 DOM 节点（元素、文本节点等）。

如果您确实 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 中使用了 shorthand 属性，这些属性是在 ES2015 中添加的，因此几乎得到了普遍支持，但不受过时浏览器的支持，例如IE11。如果您需要支持它们，请改用长格式 (width: width)。

您还可以查看 ES2015 的 class 语法，它允许您创建构造函数并以更简洁、更不易出错的方式填充它们作为实例原型分配的对象。如果您需要针对仅支持 ES5 的浏览器，可以使用 Babel 等工具为您转译。

Answer 2

您需要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);

Answer 3

这不是构造函数，只是一个函数。 this在函数中不是一个元素。

在函数中，您并未创建实际的框。某些属性（例如 this.color）将被分配，但不会总是按照您的预期进行。此外函数 box returns 什么都没有，所以没有什么可以附加的。

这是创建元素的框架，但我建议您先尝试了解更多信息 JS/Html/Dom scripting。

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

如何在 JavaScript 中创建对象构造函数；

How to make an object constructor in JavaScript;

javascript

object-construction