跳到主要内容

JavaScript Getter 和 Setter

提示
  1. 访问器属性的概念：JavaScript中的访问器属性是通过get和set关键字定义的方法，用于获取或设置对象的属性值。
  2. Getter方法：Getter方法用于访问对象的属性。通过使用get关键字定义，这些方法在访问时像属性一样被调用，而不是像方法那样。
  3. Setter方法：Setter方法用于修改对象的属性。通过使用set关键字定义，这些方法允许在设置属性值时执行额外的逻辑。

在JavaScript中，对象属性有两种类型：

  • 数据属性 (Data properties)
  • 访问器属性 (Accessor properties)

数据属性 (Data Property)​

以下是我们在之前的教程中使用过的数据属性示例。

const student = {

 // 数据属性 (data property)
 firstName: 'Monica';
};

访问器属性 (Accessor Property)​

在JavaScript中，访问器属性是用来获取或设置对象值的方法。为此，我们使用以下两个关键字：

  • get - 定义一个getter方法来获取属性值
  • set - 定义一个setter方法来设置属性值

JavaScript Getter​

在JavaScript中，getter方法用于访问对象的属性。例如，

const student = {
  // 数据属性 (data property)
  firstName: "Monica",

  // 访问器属性(getter)
  get getName() {
    return this.firstName;
  },
};

// 访问数据属性
console.log(student.firstName); // Monica

// 访问getter方法
console.log(student.getName); // Monica

// 尝试作为方法访问
console.log(student.getName()); // error

在上面的程序中，创建了一个getter方法 getName() 来访问对象的属性。

get getName() {
 return this.firstName;
}

注意： 创建getter方法时使用get关键字。

同时在访问值时，我们像访问属性一样访问值。

student.getName;

当你尝试像访问方法一样访问值时，会发生错误。

console.log(student.getName()); // error

JavaScript Setter​

在JavaScript中，setter方法用于改变对象的值。例如，

const student = {
  firstName: "Monica",

  // 访问器属性(setter)
  set changeName(newName) {
    this.firstName = newName;
  },
};

console.log(student.firstName); // Monica

// 使用setter改变(设置)对象属性
student.changeName = "Sarah";

console.log(student.firstName); // Sarah

在上述示例中，setter方法用于改变对象的值。

set changeName(newName) {
 this.firstName = newName;
}

注意： 创建setter方法时使用set关键字。

如上程序所示，firstName的值原本是Monica。

然后值被改变为Sarah。

student.changeName = "Sarah";

注意：Setter必须有且仅有一个正式参数。

JavaScript Object.defineProperty()​

在JavaScript中，您还可以使用Object.defineProperty()方法来添加getter和setter。例如，

const student = {
  firstName: "Monica",
};

// 获取属性
Object.defineProperty(student, "getName", {
  get: function () {
    return this.firstName;
  },
});

// 设置属性
Object.defineProperty(student, "changeName", {
  set: function (value) {
    this.firstName = value;
  },
});

console.log(student.firstName); // Monica

// 改变属性值
student.changeName = "Sarah";

console.log(student.firstName); // Sarah

在上述示例中，Object.defineProperty()用于访问和改变对象的属性。

使用Object.defineProperty()的语法是：

Object.defineProperty(obj, prop, descriptor);

Object.defineProperty()方法接受三个参数。

  • 第一个参数是对象名 (objectName)。
  • 第二个参数是属性名。
  • 第三个参数是描述属性的对象。
最后于 更新