如何使用 object.defineproperty 在 javascript 中定义 getter 和 setter

Question

我一直在尝试使用 object.defineproperty 编写 getter 和 setter，但不能。我一直在尝试这个示例，但由于未定义 firstName 属性而引发错误。有人可以帮助我吗

function person(fName, lName) {


  Object.defineProperty(this, 'firstName', {
    get:function() { return firstName; },
    set:function(newValue){firstName=newValue;}
 });
}
var p1=person("xyz","abc");
console.log(p1.firstName);

谢谢

Answer 1

您应该 new 升级您的 Person 以创建 Person 实例。 如您所见，您可以简单地将传递给构造函数的变量用于 getter 和 setter。
我特意命名了构造函数参数，以了解所有变量如何协同工作。

在您的 getter 中，您返回 firstNameFromConstructor 变量，或者进行一些处理然后返回它。
在您的 setter 中，您可以更改 firstNameFromConstructor 变量的值。

function Person(firstNameFromConstructor, lastNameFromConstructor) {
  Object.defineProperty(this, 'firstName', {
      get:function() { return firstNameFromConstructor; },
      set:function(newFirstName){  firstNameFromConstructor = newFirstName;}
  });
  Object.defineProperty(this, 'lastName', {
      get:function() { return lastNameFromConstructor; },
      set:function(newLastName){ lastNameFromConstructor = newLastName;}
  });
}

var p1= new Person("xyz","abc");
console.log(p1.firstName);
p1.firstName = 'zyx'
console.log(p1.firstName);

Answer 2

在您的 getter 中，您将返回 firstName，但它尚未定义，因此在 Object.defineProperty 上方声明 firstName 并为其分配 fName 参数。

此外，当您声明 p1 时，请使用 new 运算符，以便您的 person 构造函数工作并将 "xyz" 分配给 firstName 属性。

那么，试试这个：

function person(fName, lName) {

  var firstName = fName;

  Object.defineProperty(this, 'firstName', {

    get:function() { return firstName; },
    set:function(newValue){firstName=newValue;}

 });

}

var p1 = new person("xyz","abc");

console.log(p1.firstName);

p1.firstName = "abc";

console.log(p1.firstName);

Answer 3

您需要保存对传递给构造函数的参数的引用，以便在实例化后获取/设置它们。

function person(fName, lName) {    
  Object.defineProperty(this, 'firstName', {
    get: function () { return this._firstName; },
    set: function (newValue) { this._firstName = newValue; }
  });

  Object.defineProperty(this, 'lastName', {
    get: function () { return this._lastName; },
    set: function (newValue) { this._lastName = newValue; }
  });

  this.firstName = fName;
  this.lastName = lName;
}

var p1 = new person("xyz", "abc");
console.log(p1.firstName);