ES6 中 JavaScript Getter 和 Setter 简介

摘要：在本教程中，您将学习有关 JavaScript Getter 和 Setter 的知识，以及如何有效地使用它们。

JavaScript Getter 和 Setter 简介

以下示例定义了一个名为 Person 的类

class Person {
    constructor(name) {
        this.name = name;
    }
}

let person = new Person("John");
console.log(person.name); // JohnCode language: JavaScript (javascript)

Person 类有一个属性 name 和一个构造函数。构造函数将 name 属性初始化为一个字符串。

有时，您不希望 name 属性像这样被直接访问

person.nameCode language: CSS (css)

为此，您可以想出一个方法对来操作 name 属性。例如

class Person {
    constructor(name) {
        this.setName(name);
    }
    getName() {
        return this.name;
    }
    setName(newName) {
        newName = newName.trim();
        if (newName === '') {
            throw 'The name cannot be empty';
        }
        this.name = newName;
    }
}

let person = new Person('Jane Doe');
console.log(person); // Jane Doe

person.setName('Jane Smith');
console.log(person.getName()); // Jane SmithCode language: JavaScript (javascript)

在这个例子中，Person 类拥有 name 属性。此外，它还有两个额外的 getName() 和 setName() 方法。

getName() 方法返回 name 属性的值。

setName() 方法将一个参数分配给 name 属性。setName() 从 newName 参数的两端删除空格，如果 newName 为空则抛出异常。

constructor() 调用 setName() 方法来初始化 name 属性

constructor(name) {
    this.setName(name);
}Code language: JavaScript (javascript)

getName() 和 setName() 方法在其他编程语言（如 Java 和 C++）中被称为 Getter 和 Setter。

ES6 提供了一种专门的语法，使用 get 和 set 关键字来定义 Getter 和 Setter。例如

class Person {
    constructor(name) {
        this._name = name;
    }
    get name() {
        return this._name;
    }
    set name(newName) {
        newName = newName.trim();
        if (newName === '') {
            throw 'The name cannot be empty';
        }
        this._name = newName;
    }
}Code language: JavaScript (javascript)

它是如何工作的。

首先，将 name 属性更改为 _name 以避免与 Getter 和 Setter 的名称冲突。

其次，Getter 使用 get 关键字后跟方法名

get name() {
    return this._name;
}Code language: JavaScript (javascript)

要调用 Getter，您使用以下语法

let name = person.name;Code language: JavaScript (javascript)

当 JavaScript 看到访问 Person 类的 name 属性时，它会检查 Person 类是否具有任何 name 属性。

如果没有，JavaScript 会检查 Person 类是否具有任何绑定到 name 属性的方法。在这个例子中，name() 方法通过 get 关键字绑定到 name 属性。一旦 JavaScript 找到 Getter 方法，它就会执行 Getter 方法并返回一个值。

第三，Setter 使用 set 关键字后跟方法名

set name(newName) {
    newName = newName.trim();
    if (newName === '') {
        throw 'The name cannot be empty';
    }
    this._name = newName;
}Code language: JavaScript (javascript)

当您将一个值分配给 name 属性时，JavaScript 会像这样调用 name() Setter

person.name = 'Jane Smith';Code language: JavaScript (javascript)

如果一个类只有 Getter 但没有 Setter，并且您试图使用 Setter，则更改将不会生效。请看以下示例

class Person {
    constructor(name) {
        this._name = name;
    }
    get name() {
        return this._name;
    }
}

let person = new Person("Jane Doe");
console.log(person.name);

// attempt to change the name, but cannot
person.name = 'Jane Smith';
console.log(person.name); // Jane DoeCode language: JavaScript (javascript)

在这个例子中，Person 类拥有 name Getter 但没有 name Setter。它试图调用 Setter。但是，更改不会生效，因为 Person 类没有 name Setter。

在对象字面量中使用 Getter

以下示例定义了一个名为 latest 的 Getter，用于返回 meeting 对象的最新参与者

let meeting = {
    attendees: [],
    add(attendee) {
        console.log(`${attendee} joined the meeting.`);
        this.attendees.push(attendee);
        return this;
    },
    get latest() {
        let count = this.attendees.length;
        return count == 0 ? undefined : this.attendees[count - 1];
    }
};

meeting.add('John').add('Jane').add('Peter');
console.log(`The latest attendee is ${meeting.latest}.`);Code language: JavaScript (javascript)

输出

John joined a meeting.
Jane joined a meeting.
Peter joined a meeting.
The latest attendee is Peter.

总结

使用 get 和 set 关键字为类或对象定义 JavaScript Getter 和 Setter。
get 关键字将对象属性绑定到一个方法，该方法将在查找该属性时被调用。
set 关键字将对象属性绑定到一个方法，该方法将在该属性被分配时被调用。

本教程对您有帮助吗？