Блог

Приведенный ниже код foo , bar и baz все фактически одинаковы? В чем преимущество использования get ключевого слова, если таковое имеется?

 var getValue = function () {
  return 'value';
}

var foo = {
  value: getValue(),
};

var bar = {
  get value() {
    return getValue();
  },
};

var baz = {
  get value() {
    return 'value';
  },
};

console.log('foo.value', foo.value); // foo.value value
console.log('bar.value', bar.value); // bar.value value
console.log('baz.value', baz.value); // baz.value value
  

Учитывая следующий код, являются ли foo, bar и baz фактически одинаковыми?

Нет, вовсе нет.

• foo будет иметь value свойство, которое будет результатом вызова getValue при foo создании и не будет вызываться getValue позже.

• bar будет иметь value свойство, которое при обращении подобным образом bar.value вызывает getValue и возвращает возвращаемое значение.

• baz будет иметь value свойство с явным значением 'value' .

Различия заключаются в:

• Вызывается ли getValue
• Когда getValue вызывается

Это становится более очевидным при некотором протоколировании и с немного обновленной версией getValue :

 var getValue = function () {
  var value = Math.floor(Math.random() * 1000);
  console.log("getValue called, returning "   value);
  return value;
}

console.log("Creating foo");
var foo = {
  value: getValue(),
};

console.log("Creating bar");
var bar = {
  get value() {
    return getValue();
  },
};

console.log("Creating baz");
var baz = {
  get value() {
    return 42;
  },
};

console.log("Calling foo");
console.log('foo.value', foo.value);
console.log("Calling bar");
console.log('bar.value', bar.value);
console.log("Calling baz");
console.log('baz.value', baz.value);  

 .as-console-wrapper {
  max-height: 100% !important;;
}  

Преимущество (и недостаток) средства получения заключается в том, что вы можете выполнять логику (такую как вызов getValue ) в ответ на то, что выглядит как простой поиск свойств ( bar.value , а не bar.value() или bar.getValue() ).