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

Question

我一直在尝试使用 object.defineproperty 编写 getter 和 setter，但不能。我一直在尝试这个例子，但它抛出了一个错误，因为没有 firstName 属性 defined.can someone请帮我这个

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

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

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);

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

您应该 new 启动您的 Person 以创建 Person 实例。如您所见，您可以简单地使用传递给 getter 和 setter.
构造函数的变量我特意命名构造函数参数以查看所有变量如何协同工作。

在你的 getter 中，你 return firstNameFromConstructor 变量，或者做一些处理然后 return 它。
在您的 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);

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

How to define getters and setters in javascript using object.defineproperty

html

javascript

defineproperty