在 ES6 中，我们可以使用 setter 和 getter 来控制对象属性的访问和修改，这对于前端开发来说非常有用。本文将详细介绍 setter 和 getter 的用法，并提供一些使用示例。
什么是 setter 和 getter
在 ES6 中，我们可以使用 setter 和 getter 来控制对象属性的访问和修改。setter 和 getter 是一对函数，它们分别用于设置和获取对象属性的值。
setter 函数用于设置属性的值，它接受一个参数，并将该参数赋值给属性。getter 函数用于获取属性的值，它不接受任何参数，并返回属性的值。
setter 和 getter 的语法
setter 和 getter 的语法如下：
let obj = {
set prop(value) {
// 设置属性的值
},
get prop() {
// 获取属性的值
}
};在这个示例中，我们定义了一个对象 obj，该对象有一个属性 prop，我们使用 set 关键字定义了一个 setter 函数，它用于设置属性的值；我们使用 get 关键字定义了一个 getter 函数，它用于获取属性的值。
setter 和 getter 的使用示例
下面是一些使用 setter 和 getter 的示例。
示例 1：控制属性的访问
我们可以使用 setter 和 getter 来控制属性的访问，例如，我们可以禁止用户修改某个属性的值：
// javascriptcn.com 代码示例
let obj = {
_prop: 'hello',
set prop(value) {
if (value !== 'world') {
console.log('不能修改属性的值');
return;
}
this._prop = value;
},
get prop() {
return this._prop;
}
};
obj.prop = 'foo'; // 输出：不能修改属性的值
console.log(obj.prop); // 输出：hello
obj.prop = 'world';
console.log(obj.prop); // 输出：world在这个示例中，我们定义了一个对象 obj，该对象有一个属性 _prop，我们使用 _prop 存储属性的值，而不是直接使用 prop，这是因为我们需要在 setter 和 getter 函数中访问属性的值，如果我们直接使用 prop，会导致无限递归。
我们使用 set 关键字定义了一个 setter 函数，它用于设置属性的值，如果用户尝试修改属性的值，但是新的值不等于 'world'，那么我们就禁止修改，并输出一条提示信息；否则，我们就将新的值赋值给 _prop。
我们使用 get 关键字定义了一个 getter 函数，它用于获取属性的值，它直接返回 _prop 的值。
示例 2：计算属性的值
我们可以使用 setter 和 getter 来计算属性的值，例如，我们可以将两个属性相加作为一个新的属性的值：
// javascriptcn.com 代码示例
let obj = {
_prop1: 10,
_prop2: 20,
set prop(value) {
console.log('不能设置属性的值');
},
get prop() {
return this._prop1 + this._prop2;
}
};
console.log(obj.prop); // 输出：30在这个示例中，我们定义了一个对象 obj，该对象有两个属性 _prop1 和 _prop2，我们使用 _prop1 和 _prop2 存储属性的值。
我们使用 set 关键字定义了一个 setter 函数，它用于设置属性的值，但是我们并没有对属性进行任何操作，而是输出了一条提示信息。
我们使用 get 关键字定义了一个 getter 函数，它用于获取属性的值，它将 _prop1 和 _prop2 相加，并返回结果。
示例 3：使用类来定义对象
我们可以使用类来定义对象，这样就可以更方便地定义对象的属性和方法：
// javascriptcn.com 代码示例
class Person {
constructor(name, age) {
this._name = name;
this._age = age;
}
set name(value) {
this._name = value;
}
get name() {
return this._name;
}
set age(value) {
if (value < 0) {
console.log('年龄不能小于0');
return;
}
this._age = value;
}
get age() {
return this._age;
}
sayHi() {
console.log(`大家好，我叫${this._name}，今年${this._age}岁。`);
}
}
let person = new Person('张三', 18);
person.sayHi(); // 输出：大家好，我叫张三，今年18岁。
person.name = '李四';
person.age = -20; // 输出：年龄不能小于0
person.sayHi(); // 输出：大家好，我叫李四，今年18岁。在这个示例中，我们使用 class 关键字定义了一个类 Person，它有两个属性 _name 和 _age，和两个方法 sayHi 和 toString。
我们使用 set 关键字定义了两个 setter 函数，它们分别用于设置 name 和 age 属性的值，如果用户尝试设置 age 属性的值小于 0，那么我们就禁止修改，并输出一条提示信息。
我们使用 get 关键字定义了两个 getter 函数，它们分别用于获取 name 和 age 属性的值。
我们使用 constructor 方法定义了类的构造函数，它接受两个参数 name 和 age，并将它们赋值给 _name 和 _age 属性。
我们使用 new 关键字创建了一个 Person 对象，并调用了 sayHi 方法输出一条问候语。
我们修改了 name 和 age 属性的值，并调用了 sayHi 方法输出一条问候语。
总结
setter 和 getter 是 ES6 中的一个新特性，它们可以用于控制对象属性的访问和修改，提高了对象的安全性和可维护性。在实际开发中，我们可以使用 setter 和 getter 来计算属性的值、控制属性的访问、验证属性的值等，这些都可以提高我们的开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/655b2983d2f5e1655d555e62