JavaScript Getter 和 Setter

    在本教程中，您将借助示例了解 JavaScript 的 getter 和 setter 方法。
    在 JavaScript 中，有两种对象属性：

• 数据属性
• 访问器属性

数据属性

    这是我们在之前的教程中一直使用的数据属性示例。

const student = {

    // data property
    firstName: 'Monica';
};

访问器属性

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

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

JavaScript Getter

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

const student = {

    // data property
    firstName: 'Monica',
    
    // accessor property(getter)
    get getName() {
        return this.firstName;
    }
};

// accessing data property
console.log(student.firstName); // Monica

// accessing getter methods
console.log(student.getName); // Monica

// trying to access as a method
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',
    
    //accessor property(setter)
    set changeName(newName) {
        this.firstName = newName;
    }
};

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

// change(set) object property using a 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'
}

// getting property
Object.defineProperty(student, "getName", {
    get : function () {
        return this.firstName;
    }
});

// setting property
Object.defineProperty(student, "changeName", {
    set : function (value) {
        this.firstName = value;
    }
});

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

// changing the property value
student.changeName = 'Sarah';

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

    在上面的示例中，Object.defineProperty() 用于访问和更改对象的属性。
    使用 Object.defineProperty() 的语法是：

Object.defineProperty(obj, prop, descriptor)

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

• 第一个参数是 objectName （对象名称）。
• 第二个参数是属性的名称。
• 第三个参数是描述属性的对象。

    上一教程 ：JS Constructor Function                                          下一教程 ：JS Prototype

参考文档

[1] Parewa Labs Pvt. Ltd. (2022, January 1). Getting Started With JavaScript, from Parewa Labs Pvt. Ltd: https://www.programiz.com/javascript/getter-setter