javascript中的init函数存在问题并在init函数中分配后使用属性答案

【问题标题】：Having problems with init function in javascript and using the properties after assigning in init functionjavascript中的init函数存在问题并在init函数中分配后使用属性
【发布时间】：2016-10-20 21:28:51
【问题描述】：

我正在编写三个类并想要显示一些东西，最后一个类使用 init 函数为其属性赋值，见下文。但它并没有像我预期的那样工作。

class Circle1 {
    constructor(options) {

  }

  render() {
    document.getElementById('result').innerHTML = 'Hello, ';
  }
}

class Circle2 {
    constructor(options) {

  }

  render() {
    document.getElementById('result').innerHTML += 'My';
  }
}

class Circle {
    constuctor(options) {
        this.x = options.x;
        this.y = options.y;
        this.length = options.length;

        this.bodies = [];
        this.init(options);
    }

    init(options) {
        this.first = new Circle1(options);
        for (let i = 0; i < this.length; i++) {
            this.bodies.push(new Circle2(options));
        }
    }

    render() {
    /**
    this.first.render();

    this.bodies.forEach(function(body) {
        body.render();
    });
    **/
        document.getElementById('result').innerHTML += 'World';

    }
}

var c = new Circle({
    x: 20,
    y: 20,
    length: 6
});

c.render();

此代码将在屏幕上显示“世界”。

但是，如果我取消注释已注释的代码，并尝试在屏幕上显示“Hello, My (times length) World”，但它不会显示任何内容。

我对类中的 init 函数很困惑。我以为我可以为该函数中的属性赋值，但结果告诉我它不起作用。我的代码有什么问题？

这是jsfiddle 链接。

【问题讨论】：

你为什么要使用init函数呢？只需将该代码放入构造函数中即可。
.innerHTML = 和 .innerHTML += 之间存在差异
@Bergi，我只是想掌握init 函数的窍门。我不知道它是如何工作的。我已经阅读了一些代码并想自己使用它进行测试。有什么区别？您介意详细说明吗？
没有太大区别（主要是技术），这就是为什么在构造函数之外添加 init 方法是如此无用和不必要的原因。
@newguy constructor 在类的实例化时被调用，而 init 不是并且必须从 constructor 内部运行

标签： javascript init

【解决方案1】：

constructor 的名称有错误（构造函数未被调用）：

class Circle {
    constuctor(options) {

==>

class Circle {
    constructor(options) {

[https://jsfiddle.net/5sv5hwLb/]

【讨论】：

好的，感谢您指出这一点。我以为没有问题，因为它仍然显示“世界”，为什么会发生这种情况？
是的，我知道这是在更正之后。在我更改您的答案之前，屏幕显示“世界”。为什么javascript不显示错误说构造函数没有通过并且无法创建Circle的对象？
@newguy 因为constructor不一定要声明。