【ES6 教程】第四章 ES6类02—JavaScript Getter 和 Setter

英文 | https://www.javascripttutorial.net

翻译 | 杨小爱

在今天的教程中，我们将了解 JavaScript getter 和 setter 以及如何有效地使用它们。

JavaScript getter 和 setter 简介

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

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


let person = new Person("John");
console.log(person.name); // John

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

有时，我们不希望像这样直接访问 name 属性：

person.name

为此，我们可能会想出一对操作 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 Smith

在此示例中，Person 类具有 name 属性。此外，它还有两个附加方法 getName() 和 setName()。

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

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

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

constructor(name) {
    this.setName(name);
}

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

它是怎么运作的

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

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

get name() {
    return this._name;
}

要调用 getter，请使用以下语法：

let name = person.name;

当 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;
}

当我们为 name 属性赋值时，JavaScript 将调用 name() 设置器，如下所示：

person.name = 'Jane Smith';

如果一个类只有 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 Doe

在此示例中，Person 类具有名称 getter，但没有名称 setter。它试图调用setter。但是，由于 Person 类没有名称设置器，因此，更改不会生效。

在对象字面量中使用 getter

以下示例定义了一个名为 latest 的 getter，用于返回会议对象的最新参加者：

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}.`);

输出：

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

总结

使用 get 和 set 关键字为类或对象定义 JavaScript getter 和 setter。

get 关键字将对象属性绑定到将在查找该属性时调用的方法。

set 关键字将对象属性绑定到分配该属性时将调用的方法。

学习更多技能

请点击下方公众号