JavaScript构造器用法

Question

我在下面的代码行中使用了一个要求-

class App {
  constructor(){
    this.obj = { val1: null, val2: '' };
  }  

}

并将上述代码更改为以下内容：

class App {
  obj = { val1: null, val2: '' };
}

我看不出功能方面的上述两种代码之间有什么区别，而且这两个代码段的工作方式都是相同的。我在babeljs操场上用预置的"stage-3"做了同样的尝试，它们产生了相同的结果。

请让我知道上述代码与使用另一种代码的问题是否有其他区别？

Answer 1

他们不一样。在第一段代码中，您将分配给一个名为obj的独立变量。(希望您事先定义了它，如let obj;，否则会引发错误；构造函数总是在严格模式下运行)

​

let obj;
class App {
  constructor(){
    obj = { val1: null, val2: '' };
  }  
}
const app = new App();
console.log(obj);
console.log(app.obj);

​

​

class App {
  constructor(){
    obj = { val1: null, val2: '' };
  }  
}
const app = new App();
console.log(app.obj);

​

​

class App {
  obj = { val1: null, val2: '' };
}
const app = new App();
console.log(app.obj);

​

在第二段代码中，您将在构造函数的开头将一个obj属性分配给实例。第二个代码相当于：

class App {
  constructor(){
    this.obj = { val1: null, val2: '' };
  }  
}

浏览器兼容性也是一个问题。类字段语法(这是您的第二段代码所使用的语法)是非常新的；如果您想使用它，并且除了最近的浏览器之外，您还可以理解该代码，请确保在向客户端提供它之前使用Babel。

Answer 2

假设缺少this.是一个错误，为了认真对待这个问题，我倾向于认为它是错误的，没有任何功能上的差异，但是代码理解与后者比较容易。正如MDN文档指出的，

通过预先声明字段，类定义变得更自文档化，并且这些字段总是存在的。

程序员可以一目了然地看到类变量是什么，而不必引用和读取构造函数。它还为字段提供了一个“默认”值。

它还防止了由于构造函数内部初始化错误而可能发生的错误。使用“公共字段声明”是最佳实践。

class A {

  constructor() {
    this.obj.foo <--- // error
    this.obj = { foo: 1 }
  }
}

class A {
  obj = { foo: 1 } // <-- self-documenting

  constructor() {
    this.obj.foo   // <-- no error
  }
}