在对象函数中定义getter/setter

Question

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

正如我在MDN参考(http://mzl.la/1CIUuIw)中看到的,它可以在Object Literals中轻松完成:

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应用,请将其应用于其原型.

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还为那些对ES2015感兴趣的人提供游乐场,您可以将上述代码复制到游乐场,看看它是如何工作的.