ES2015：来自construcror的调用方法

Question

我需要在创建ES2015类的新实例时将DOM元素添加到某个容器中。看起来无法从构造函数中调用该方法。

let titleCounter = 0;

class Header{
	
   	constructor(){
    	titleCounter++;
   		this.id = 'title'+titleCounter;
        this.html = `
      	<div class="${this.id}" style="background-color: blue;">Title</div>
      `;
      
      //addDOMtoField(); // don't work
      $('#container').append(this.html);
   	}	
        
    addDOMtoField(){
    	$('#container').append(this.html);
    }
}

let instance1 = new Header();

#container{
  min-height: 5px;
  background-color: green;
  padding: 5px;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='container'>
  
</div>

比构造函数添加$('#container').append(this.html);更优雅吗？

Answer 1

使用this.addDOMtoField()代替addDOMtoField()。

Answer 2

为什么我问这个问题时犯了这个错误

由于 ECMAScript 2015 之前的 Java 经验。在 Java 中，如果类方法/字段 this 存在且未声明局部变量 this.XXX，我们可以省略 XXX 中的 XXX。

---

四年过去了... 现在我是 OOP 和 TypeScript 专家。

从构造函数（和其他非静态方法）调用非静态方法

它的意思是“调用将要创建的自己实例的方法”。直接在构造函数和非静态方法内部，this 关键字指的是当前类的实例。所以调用 addDOMtoField 方法是 this.addDOMtoField。

Just addDOMtoField 表示调用局部变量。因为没有声明和初始化这样的变量，所以 addDOMtoField 是 undefined。 JavaScript 不会对它大喊大叫，但 TypeScript 会并且它是对的，因为引用尚未初始化和从未声明的变量是没有意义的。

因为构造函数的作用是类字段的初始化，所以我们需要了解从构造函数调用方法时我们在做什么。在 OOP 中，构造函数基本上不能造成任何副作用。

从构造函数（和其他任何方法）调用非静态方法

静态方法是所有实例通用的。它与类相关联，而不是与特定实例相关联。这就是为什么许多其他语言不原谅 this.staticMethodName()，但 JavaScript 可以原谅并且令人困惑的原因。建议 ESLint 禁止此类调用。

因此，静态方法调用的正确方法是从类调用，而不是从实例调用：ClassName.staticMethodName()。