Javascript getter

Question

鉴于以下代码是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

Answer 1

鉴于以下代码是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;;
}

getter的优点（和缺点）是您可以执行逻辑（例如调用getValue）以响应看起来像简单的属性查找（bar.value，而不是bar.value()或bar.getValue()）。