Хороший код Javascript

Question

Я расширяю свой кругозор, изучая javascript, и у меня есть быстрый вопрос о стиле.Я использовал буквальную нотацию при создании моего кода следующим образом.

var foo = {
  bar:function(){/*something*/}

};

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

var foo = {};
foo.bar = function(){/*something*/};

Но после прочтения немного у меня сложилось впечатление, что этот стиль не является предпочтительным.Не то, чтобы мне нравился стиль, он просто заставлял работать.Есть ли лучшие практики при использовании буквенной нотации, чтобы все мои переменные и тому подобное работали?

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

Answer 1

Литералы объекта должны быть статическим определением , в тот момент, когда вы выполняете вычисления или логику в объявлении литерала, оно сломается.Если вам нужна логика / вычисления, используйте вместо этого конструктор объекта .

Например,

var o = {
  b: 4,
  c: 8, 
  d: o.b + o.c
}

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

Итак, пока вы создаете литерал объекта, объект o не существует.

Следующее:

var o = {
  b: 4,
  c: 8, 
  d: this.b + this.c
}

Будет работать, но не так, как вы ожидаетеэто к.Вы не можете ссылаться на литерал объекта непосредственно в объявлении.Потому что this связан с window в этом примере, а не с o.

Если вы хотите сделать логику, используйте конструктор

var o = new function() {
  this.b = 4;
  this.c = 8;
  this.d = this.b + this.c;
}

или

var O = function() {
  this.b = 4;
  this.c = 8;
  this.d = this.b + this.c;
}
var o = new O();

Вывод:

Пока объявление литерала объекта не содержит логики, оно безопасно.(Просто объявите функции и свойства со статическими значениями).

Если объявление содержит логику, оно должно быть в теле функции (как конструктор)

Answer 2

Вы можете получить доступ к членам текущего объекта через this

var foo = {
    bar: 10,
    baz: function() {
        console.log(this.bar);
    }
}