javascript - 在构造函数中创建只读(获取)属性

Question

我正在尝试使用 Javascript 在构造函数上创建一个只读属性。我混音了 the syntax I've found on MDN但这不起作用:

function Person(data) {
  var self = this;

  self.firstName = data.firstName || "John";
  self.lastName = data.lastName || "Doe";

  get fullName() { return self.firstName + " " + self.lastName; }
}

var mike = new Person({ firstName: "Mike", lastName: "Michaelson" });

document.write(mike.fullName);

这会抛出一个异常:

Uncaught SyntaxError: Unexpected identifier

我尝试过其他选项，包括:

{ get fullName() { return self.firstName + " " + self.lastName; } }

和:

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

和:

get self.fullName() { return self.firstName + " " + self.lastName; } 

但是这些选项都不起作用。

这个确实有效:

function Person(data) {
  var self = this;

  self.firstName = data.firstName || "John";
  self.lastName = data.lastName || "Doe";
  
  Object.defineProperty(self, "fullName", { get: function () { return self.firstName + " " + self.lastName; } });
}

var mike = new Person({ firstName: "Mike", lastName: "Michaelson" });

document.write(mike.fullName);

但很明显，这种使用 defineProperty 的方式感觉很笨拙。

在构造函数中定义仅 get 属性的正确语法是什么？

Answer 1

我建议将它做成一个 POJO 并一路传递选项，但你仍然会有那种拥有 Object.defineProperties 的“笨拙”，只是没有实际调用它的仪式(我个人更喜欢速记方式)。

var Person = function (data) {
    if (data === undefined) {
        data = {};
    }

    data = _.defaults(data, {
        firstName: 'John',
        lastName: 'Doe'
    });

    return {
        get firstName() { return data.firstName; },
        get lastName() { return data.lastName; },
        get fullName() { return data.firstName + ' ' + data.lastName; }
    }
}

编辑:现在我已经考虑得更多了，我认为你想要包含 defineProperty 语法的原因是因为你想阅读/对名字和姓氏的写入权限，但对 fullName 的只读权限。如果这个假设是正确的，这就是我通常会使用的模式。

var Person = function (data) {
    if (data === undefined) {
        data = {};
    }

    data = _.defaults(data, {
        firstName: 'John',
        lastName: 'Doe'
    });

    return {
        get firstName() { return data.firstName; },
        set firstName(name) { data.firstName = name; },

        get lastName() { return data.lastName; },
        set lastName(name) { data.lastName = name; },

        get fullName() { return data.firstName + ' ' + data.lastName; }
    }
}

p = Person();
p.fullName === 'John Doe'; // true
p.firstName = 'Jane';
p.fullName === 'Jane Doe'; // true

但是，需要注意一些注意事项，主要是对象引用。

data = { firstName: 'Jane' };
p = Person(data);
p.fullName === 'Jane Doe'; // true
data.lastName = 'Goodall';
p.fullName === 'Jane Doe'; // false!
console.log(p.fullName); // 'Jane Goodall'

我通常更喜欢将参数作为不可变的东西传入，或者通过将它们从对象复制到不可变的东西中来卡住这些特征，这样通过对象引用进行的更新就不会在您的行为中引起细微的错误。