JavaScript Использование конструктора

Question

Я использую приведенную ниже строку кода для одного из требований -

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

И недавно изменил код выше на что-то ниже, например, ниже:

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

Я мог не вижу никакой разницы между двумя вышеупомянутыми кодами для функциональных аспектов, и оба фрагмента кода работают одинаково. Я попробовал то же самое на детской площадке babel js с предустановкой «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 ,

При предварительном объявлении полей определения классов становятся более самодокументированными, и поля присутствуют всегда.

Программисты могут сразу увидеть, что представляют собой переменные класса, без необходимости обращаться к конструктору и читать его. Он также присваивает полю значение по умолчанию.

Он также предотвращает ошибки, которые могут произойти из-за неправильной инициализации инициализации в конструкторе. Рекомендуется использовать «объявления полей Publi c».

class A {

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

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

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