javascript - 在对象函数中定义 getter/setter

Question

我正在学习 JavaScript，想知道是否可以在对象函数中定义 getter 和 setter。 主要区别在于调用方式，如果定义为getFullName = function()，我应该将方法调用为myObj.getFullName()，然而，至于数组，getter 允许将其作为简单属性 myObj.fullName(不带括号)调用。

正如我在 MDN 引用资料 ( http://mzl.la/1CIUuIw ) 中看到的那样，它很容易在对象文字中完成:

var obj = {
    get var(){
        return "something";
    }
}

但是，我不能像这样在对象函数上这样做:

function obj(name, lname){
    this.name = name;
    this.lastName = lname;

    get fullName(){
         return this.name + " " + this.lastName;
    }
}

收到“意外标识符”错误...

Answer 1

因为 get XX(){} 用于 var obj = {}; 但是这里您使用构造函数来创建新对象。所以你应该使用 MDN - Object.defineProperty() .

如果您希望 fullName 应用于从 obj 创建的所有对象，请将其应用于其原型(prototype)。

function obj(name, lname){
  this.name = name;
  this.lastName = lname;
}

Object.defineProperty(obj.prototype, 'fullName', {
  get : function() {
    return this.name + " " + this.lastName;
  }
});

var aObj = new obj("first", 'lastN');
console.log(aObj.fullName);

更新: 如果你想要更直接的方式，并且不害怕尝试新事物，那么 ES2015 的类符号可以更轻松地做到这一点:

// ES2015 - class
class obj {
  constructor(name, lname) {
    this.name = name;
    this.lname = lname;
  }

  // Define getter method for fullName
  get fullName() {
    return this.name + " " + this.lastName;
  }
}

var aObj = new obj('Billy', 'Hallow');
console.log(aObj.fullName);

目前大多数浏览器不支持，如果你想在你的站点中使用它，你需要使用像Babel这样的js编译器。将其从 ES2015 转换为 ES5。

Babel 还提供了一个 playground对 ES2015 感兴趣的小伙伴可以将上面的代码复制到 playground 看看效果如何。