JavaScript get 关键字
最后修改于 2025 年 4 月 16 日
在本文中，我们将展示如何使用 get 关键字在 JavaScript 对象中创建属性获取器。
get 关键字
get 关键字将对象属性绑定到一个函数，当访问该属性时，该函数将被调用。获取器提供了一种定义计算属性的方式。它们在被访问时执行一个函数，但表现为普通属性。
获取器使用 get 关键字定义，后跟属性名称和函数。它们不能接受参数，并且必须返回值。获取器通常与设置器配对，以实现完整的属性控制。
使用获取器可以使对象属性更加灵活，可以动态计算值。它们有助于封装内部状态，同时为使用者提供干净的类似属性的接口。
基本获取器示例
以下示例演示了使用 get 关键字创建简单获取器的基本用法。
const person = {
firstName: 'John',
lastName: 'Doe',
get fullName() {
return `${this.firstName} ${this.lastName}`;
}
};
console.log(person.fullName);
此代码定义了一个 fullName 获取器，它结合了 firstName 和 lastName。当被访问时，它计算并返回全名。获取器像普通属性一样被调用，不需要括号。
$ node main.js John Doe
带私有属性的获取器
获取器通常用于提供对私有属性的访问。
class Circle {
#radius = 0;
constructor(radius) {
this.#radius = radius;
}
get area() {
return Math.PI * this.#radius ** 2;
}
}
const circle = new Circle(5);
console.log(circle.area);
此示例显示了一个获取器访问私有类字段。area 获取器根据其私有半径计算圆的面积。私有字段无法直接访问，但获取器提供了受控访问。
$ node main.js 78.53981633974483
带验证的获取器
获取器可以在返回值时包含验证逻辑。
const account = {
_balance: 0,
get balance() {
if (this._balance < 0) {
console.warn('Warning: Negative balance');
}
return this._balance;
}
};
account._balance = -50;
console.log(account.balance);
此获取器在返回余额之前检查其是否为负数。虽然底层值可以被直接修改，但获取器添加了验证。在实际应用中，余额可能会被适当地封装。
$ node main.js Warning: Negative balance -50
带缓存的获取器
获取器可以实现缓存，以避免昂贵的重新计算。
const expensiveCalc = {
_cache: null,
_dirty: true,
get result() {
if (this._dirty) {
console.log('Performing expensive calculation...');
this._cache = Math.random() * 100;
this._dirty = false;
}
return this._cache;
},
invalidate() {
this._dirty = true;
}
};
console.log(expensiveCalc.result);
console.log(expensiveCalc.result);
expensiveCalc.invalidate();
console.log(expensiveCalc.result);
此获取器缓存其结果，并且仅在需要时重新计算。_dirty 标志控制何时进行重新计算。此模式对于不经常更改的昂贵操作很有用。
$ node main.js Performing expensive calculation... 42.123456789 42.123456789 Performing expensive calculation... 87.654321098
对象字面量中的获取器
可以使用 get 语法在对象字面量中定义获取器。
const rectangle = {
width: 10,
height: 20,
get area() {
return this.width * this.height;
},
get perimeter() {
return 2 * (this.width + this.height);
}
};
console.log('Area:', rectangle.area);
console.log('Perimeter:', rectangle.perimeter);
此对象定义了两个获取器，用于计算几何属性。获取器使用对象的 width 和 height 属性。当访问这些属性时，计算会动态执行。
$ node main.js Area: 200 Perimeter: 60
带设置器的获取器
获取器通常与设置器配对以实现完整的属性控制。
class Temperature {
_celsius = 0;
get fahrenheit() {
return this._celsius * 9/5 + 32;
}
set fahrenheit(value) {
this._celsius = (value - 32) * 5/9;
}
}
const temp = new Temperature();
temp.fahrenheit = 77;
console.log(`Celsius: ${temp._celsius.toFixed(1)}`);
console.log(`Fahrenheit: ${temp.fahrenheit.toFixed(1)}`);
此类使用获取器/设置器对在摄氏度和华氏度之间进行转换。获取器从摄氏度计算华氏度，而设置器则相反。这保持了两个温度尺度之间的一致性。
$ node main.js Celsius: 25.0 Fahrenheit: 77.0
原型中的获取器
可以在对象的原型上定义获取器，以实现共享行为。
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
Person.prototype = {
get fullName() {
return `${this.firstName} ${this.lastName}`;
}
};
const person = new Person('Jane', 'Smith');
console.log(person.fullName);
此示例将获取器添加到 Person 原型。所有 Person 实例都将共享此获取器。获取器可以通过 this 访问实例属性。这是一种添加计算属性的内存有效方式。
$ node main.js Jane Smith
来源
在本文中，我们演示了如何使用 get 关键字在 JavaScript 中创建属性获取器。