对象属性描述符高级用法
2025年3月7日大约 13 分钟
对象属性描述符高级用法
属性描述符允许精细控制对象属性的行为。本文将深入介绍getter和setter的高级用法、属性描述符的继承行为以及如何利用属性描述符实现数据绑定和验证等功能。
属性描述符基础回顾
在JavaScript中，每个对象属性除了值以外，还有三个配置特性：
writable：决定属性是否可以被重新赋值enumerable：决定属性是否会出现在对象的属性枚举中configurable：决定属性是否可以被删除或修改特性
此外，属性还可以是访问器属性，通过getter和setter函数进行读取和设置。
获取和定义属性描述符
// 获取属性描述符
const person = { name: '张三' };
const descriptor = Object.getOwnPropertyDescriptor(person, 'name');
console.log(descriptor);
// 输出: { value: '张三', writable: true, enumerable: true, configurable: true }
// 定义属性描述符
Object.defineProperty(person, 'age', {
value: 30,
writable: false, // 不可重新赋值
enumerable: true, // 可枚举
configurable: false // 不可配置（不能删除或修改特性）
});Getter和Setter的高级用法
getter和setter是JavaScript中实现计算属性和拦截属性访问的强大机制。
基本用法回顾
const person = {
firstName: '三',
lastName: '张',
// 定义一个fullName的getter
get fullName() {
return `${this.lastName}${this.firstName}`;
},
// 定义一个fullName的setter
set fullName(name) {
const parts = name.split('');
this.lastName = parts[0];
this.firstName = parts.slice(1).join('');
}
};
console.log(person.fullName); // 输出: "张三"
person.fullName = '李四';
console.log(person.firstName); // 输出: "四"
console.log(person.lastName); // 输出: "李"使用defineProperty定义访问器属性
const person = { firstName: '三', lastName: '张' };
Object.defineProperty(person, 'fullName', {
get() {
return `${this.lastName}${this.firstName}`;
},
set(name) {
const parts = name.split('');
this.lastName = parts[0];
this.firstName = parts.slice(1).join('');
},
enumerable: true,
configurable: true
});实现属性验证
getter和setter可以用来验证属性值，确保数据符合特定规则：
function createUser(initialData = {}) {
const data = { ...initialData };
return Object.defineProperties({}, {
name: {
get() {
return data.name;
},
set(value) {
if (typeof value !== 'string') {
throw new TypeError('名称必须是字符串');
}
if (value.length < 2 || value.length > 20) {
throw new RangeError('名称长度必须在2-20个字符之间');
}
data.name = value;
},
enumerable: true,
configurable: true
},
age: {
get() {
return data.age;
},
set(value) {
const age = Number(value);
if (isNaN(age) || age < 0 || age > 120) {
throw new RangeError('年龄必须是0-120之间的有效数字');
}
data.age = age;
},
enumerable: true,
configurable: true
}
});
}
const user = createUser();
user.name = '张三'; // 正常
// user.name = 'A'; // 抛出RangeError: 名称长度必须在2-20个字符之间
// user.name = 123; // 抛出TypeError: 名称必须是字符串
user.age = 30; // 正常
// user.age = -5; // 抛出RangeError: 年龄必须是0-120之间的有效数字实现计算属性
getter可以用来创建依赖于其他属性的计算属性：
const circle = {};
Object.defineProperties(circle, {
radius: {
value: 5,
writable: true,
enumerable: true,
configurable: true
},
diameter: {
get() {
return this.radius * 2;
},
enumerable: true,
configurable: true
},
area: {
get() {
return Math.PI * this.radius * this.radius;
},
enumerable: true,
configurable: true
},
circumference: {
get() {
return 2 * Math.PI * this.radius;
},
enumerable: true,
configurable: true
}
});
console.log(circle.area); // 输出: 78.53981633974483
circle.radius = 10;
console.log(circle.area); // 输出: 314.1592653589793实现惰性计算
getter可以用来实现惰性计算，只在需要时才执行昂贵的操作：
const data = {
_expensiveCalculationResult: null,
_expensiveCalculationPerformed: false,
get expensiveValue() {
if (!this._expensiveCalculationPerformed) {
console.log('执行昂贵计算...');
// 模拟昂贵计算
let result = 0;
for (let i = 0; i < 1000000; i++) {
result += Math.random();
}
this._expensiveCalculationResult = result;
this._expensiveCalculationPerformed = true;
}
return this._expensiveCalculationResult;
}
};
console.log(data.expensiveValue); // 首次访问，执行计算
console.log(data.expensiveValue); // 再次访问，使用缓存结果属性描述符的继承行为
属性描述符在原型链中的行为有一些特殊之处，理解这些行为对于正确使用继承非常重要。
属性描述符不会被继承
当从原型链上读取属性时，虽然可以获取到属性值，但属性的描述符不会被继承：
const parent = {};
Object.defineProperty(parent, 'name', {
value: '父对象',
writable: false,
enumerable: false,
configurable: false
});
const child = Object.create(parent);
console.log(child.name); // 输出: "父对象"
// 在子对象上定义同名属性
Object.defineProperty(child, 'name', {
value: '子对象',
// 不指定其他特性，默认都是false
});
console.log(child.name); // 输出: "子对象"访问器属性的继承
访问器属性的getter和setter方法会在原型链上被调用，但this始终指向访问该属性的对象：
const parent = {
_name: '默认名称',
get name() {
console.log('调用getter，this是:', this);
return this._name;
},
set name(value) {
console.log('调用setter，this是:', this);
this._name = value;
}
};
const child = Object.create(parent);
console.log(child.name); // 输出: "默认名称"，this指向child
child.name = '新名称'; // this指向child，在child上创建_name属性
console.log(child._name); // 输出: "新名称"
console.log(parent._name); // 输出: "默认名称"，父对象不受影响使用super关键字
在类的方法中，可以使用super关键字访问父类的getter和setter：
class Person {
constructor(name) {
this._name = name;
}
get name() {
return this._name;
}
set name(value) {
this._name = value;
}
}
class Employee extends Person {
constructor(name, title) {
super(name);
this._title = title;
}
get name() {
return `${this._title} ${super.name}`;
}
}
const emp = new Employee('张三', '工程师');
console.log(emp.name); // 输出: "工程师 张三"实现数据绑定和观察者模式
属性描述符可以用来实现数据绑定和观察者模式，这在前端框架中非常常见。
简单的数据绑定
function createObservable(obj) {
const listeners = {};
// 遍历对象的所有属性
Object.keys(obj).forEach(key => {
let value = obj[key];
// 为每个属性定义getter和setter
Object.defineProperty(obj, key, {
get() {
return value;
},
set(newValue) {
if (value !== newValue) {
const oldValue = value;
value = newValue;
// 通知所有监听该属性的函数
if (listeners[key]) {
listeners[key].forEach(listener => {
listener(newValue, oldValue);
});
}
}
},
enumerable: true,
configurable: true
});
});
// 添加监听方法
obj.addListener = function(prop, callback) {
if (!listeners[prop]) {
listeners[prop] = [];
}
listeners[prop].push(callback);
return () => {
const index = listeners[prop].indexOf(callback);
if (index > -1) {
listeners[prop].splice(index, 1);
}
};
};
return obj;
}
// 使用示例
const user = createObservable({
name: '张三',
age: 30
});
// 添加监听器
const removeNameListener = user.addListener('name', (newValue, oldValue) => {
console.log(`名称从 "${oldValue}" 变更为 "${newValue}"`);
});
const removeAgeListener = user.addListener('age', (newValue, oldValue) => {
console.log(`年龄从 ${oldValue} 变更为 ${newValue}`);
});
// 修改属性触发监听器
user.name = '李四'; // 输出: 名称从 "张三" 变更为 "李四"
user.age = 31; // 输出: 年龄从 30 变更为 31
// 移除监听器
removeNameListener();
user.name = '王五'; // 不再输出任何内容实现表单数据绑定
function bindFormToObject(form, obj) {
const inputs = form.querySelectorAll('input, select, textarea');
// 为每个表单元素设置初始值并添加事件监听
inputs.forEach(input => {
const propName = input.name || input.id;
if (!propName || !(propName in obj)) return;
// 设置初始值
if (input.type === 'checkbox') {
input.checked = Boolean(obj[propName]);
} else {
input.value = obj[propName];
}
// 监听变化
input.addEventListener('input', () => {
if (input.type === 'checkbox') {
obj[propName] = input.checked;
} else if (input.type === 'number') {
obj[propName] = Number(input.value);
} else {
obj[propName] = input.value;
}
});
});
// 监听对象变化，更新表单
Object.keys(obj).forEach(key => {
let value = obj[key];
Object.defineProperty(obj, key, {
get() {
return value;
},
set(newValue) {
value = newValue;
// 更新表单元素
const input = form.querySelector(`[name="${key}"], #${key}`);
if (input) {
if (input.type === 'checkbox') {
input.checked = Boolean(newValue);
} else {
input.value = newValue;
}
}
},
enumerable: true,
configurable: true
});
});
return obj;
}
// 使用示例（在浏览器环境中）
/*
const user = { name: '张三', age: 30, isAdmin: false };
const form = document.getElementById('userForm');
bindFormToObject(form, user);
// 现在修改user对象会自动更新表单
user.name = '李四'; // 表单中的name输入框会更新为"李四"
// 同样，修改表单会自动更新user对象
// 用户在表单中输入内容后，user对象会自动更新
*/属性描述符与反射API
ES6引入的Reflect API提供了一种更加程序化的方式来操作对象，包括处理属性描述符。
使用Reflect API操作属性
const obj = {};
// 定义属性
Reflect.defineProperty(obj, 'name', {
value: '张三',
writable: true,
enumerable: true,
configurable: true
});
// 获取属性描述符
const descriptor = Reflect.getOwnPropertyDescriptor(obj, 'name');
console.log(descriptor);
// 检查属性是否存在
console.log(Reflect.has(obj, 'name')); // 输出: true
// 获取属性值
console.log(Reflect.get(obj, 'name')); // 输出: "张三"
// 设置属性值
Reflect.set(obj, 'name', '李四');
console.log(obj.name); // 输出: "李四"
// 删除属性
Reflect.deleteProperty(obj, 'name');
console.log('name' in obj); // 输出: falseReflect与Proxy结合使用
Reflect API与Proxy一起使用时特别强大，可以实现更复杂的属性控制：
const target = {
name: '张三',
age: 30
};
const handler = {
get(target, prop, receiver) {
console.log(`读取属性: ${String(prop)}`);
return Reflect.get(target, prop, receiver);
},
set(target, prop, value, receiver) {
console.log(`设置属性: ${String(prop)} = ${value}`);
return Reflect.set(target, prop, value, receiver);
},
defineProperty(target, prop, descriptor) {
console.log(`定义属性: ${String(prop)}`);
return Reflect.defineProperty(target, prop, descriptor);
}
};
const proxy = new Proxy(target, handler);
proxy.name = '李四'; // 输出: 设置属性: name = 李四
console.log(proxy.name); // 输出: 读取属性: name 然后是 "李四"
Object.defineProperty(proxy, 'job', {
value: '工程师',
writable: true,
enumerable: true,
configurable: true
}); // 输出: 定义属性: job属性描述符的高级应用
实现私有属性
在ES6的类语法引入私有字段之前，可以使用闭包和属性描述符模拟私有属性：
function createPerson(name, age) {
// 私有数据存储在闭包中
const privateData = {
name,
age
};
return Object.defineProperties({}, {
name: {
get() {
return privateData.name;
},
set(value) {
if (typeof value !== 'string') {
throw new TypeError('名称必须是字符串');
}
privateData.name = value;
},
enumerable: true,
configurable: false
},
age: {
get() {
return privateData.age;
},
// 不提供setter，使age成为只读属性
enumerable: true,
configurable: false
},
// 提供一个方法来访问私有数据
celebrateBirthday: {
value: function() {
privateData.age += 1;
return `${privateData.name}现在${privateData.age}岁了！`;
},
writable: false,
enumerable: true,
configurable: false
}
});
}
const person = createPerson('张三', 30);
console.log(person.name); // 输出: "张三"
console.log(person.age); // 输出: 30
// 尝试直接修改age不会成功
person.age = 40;
console.log(person.age); // 仍然输出: 30
// 使用方法修改私有数据
console.log(person.celebrateBirthday()); // 输出: "张三现在31岁了！"
console.log(person.age); // 输出: 31实现属性代理
属性描述符可以用来实现属性代理，将对一个属性的访问重定向到另一个对象：
function proxyProperties(source, target, properties) {
properties.forEach(prop => {
Object.defineProperty(target, prop, {
get() {
return source[prop];
},
set(value) {
source[prop] = value;
},
enumerable: true,
configurable: true
});
});
return target;
}
const user = {
name: '张三',
email: 'zhangsan@example.com'
};
const userView = {};
proxyProperties(user, userView, ['name', 'email']);
console.log(userView.name); // 输出: "张三"
userView.name = '李四';
console.log(user.name); // 输出: "李四"实现属性变更日志
可以使用属性描述符记录属性的所有变更：
function createLoggingObject(obj, logCallback) {
const result = {};
const log = logCallback || console.log;
Object.keys(obj).forEach(key => {
let value = obj[key];
Object.defineProperty(result, key, {
get() {
log(`获取属性 ${key}: ${value}`);
return value;
},
set(newValue) {
log(`属性 ${key} 从 ${value} 变更为 ${newValue}`);
value = newValue;
},
enumerable: true,
configurable: true
});
});
return result;
}
const user = createLoggingObject({
name: '张三',
age: 30
});
user.name; // 输出: 获取属性 name: 张三
user.name = '李四'; // 输出: 属性 name 从 张三 变更为 李四实现属性访问控制
可以基于条件控制属性的访问权限：
function createSecureObject(obj, accessCheck) {
const result = {};
Object.keys(obj).forEach(key => {
let value = obj[key];
Object.defineProperty(result, key, {
get() {
if (!accessCheck('read', key, value)) {
throw new Error(`没有读取 ${key} 的权限`);
}
return value;
},
set(newValue) {
if (!accessCheck('write', key, newValue)) {
throw new Error(`没有修改 ${key} 的权限`);
}
value = newValue;
},
enumerable: accessCheck('enumerate', key, value),
configurable: false
});
});
return result;
}
// 使用示例
const userData = {
name: '张三',
role: 'user',
password: 'secret123'
};
const currentUserRole = 'admin';
const secureUser = createSecureObject(userData, (operation, key, value) => {
// 管理员可以做任何操作
if (currentUserRole === 'admin') return true;
// 普通用户不能读取或修改密码
if (key === 'password' && (operation === 'read' || operation === 'write')) {
return false;
}
// 所有用户都可以读取name和role
if ((key === 'name' || key === 'role') && operation === 'read') {
return true;
}
// 用户只能修改自己的数据
if (operation === 'write' && userData.role === currentUserRole) {
return true;
}
// 默认拒绝
return false;
});
// 管理员可以访问所有属性
console.log(secureUser.password); // 输出: "secret123"
// 如果将currentUserRole改为'user'，则以下操作会抛出错误
// console.log(secureUser.password); // 错误: 没有读取 password 的权限性能考量
使用属性描述符和访问器属性可能会对性能产生影响，特别是在性能关键的代码中：
访问器属性比数据属性慢：getter和setter是函数调用，比直接访问数据属性要慢。
大量使用Object.defineProperty可能影响性能：在处理大量属性时，考虑批量定义或使用其他方法。
深度监听对象变化的性能开销：如Vue 2.x使用Object.defineProperty实现响应式系统时，需要递归遍历对象的所有属性，这在大型对象上可能导致性能问题。
// 性能测试示例
function testPerformance() {
const iterations = 1000000;
// 使用普通数据属性
const obj1 = { value: 0 };
console.time('数据属性');
for (let i = 0; i < iterations; i++) {
obj1.value = i;
const x = obj1.value;
}
console.timeEnd('数据属性');
// 使用访问器属性
const obj2 = {};
let _value = 0;
Object.defineProperty(obj2, 'value', {
get() { return _value; },
set(v) { _value = v; }
});
console.time('访问器属性');
for (let i = 0; i < iterations; i++) {
obj2.value = i;
const x = obj2.value;
}
console.timeEnd('访问器属性');
}
// testPerformance();
// 典型输出可能是:
// 数据属性: 10ms
// 访问器属性: 100ms
// 实际结果会因环境而异与现代JavaScript特性的结合
与类私有字段结合
ES2022引入了类私有字段和方法，可以与属性描述符结合使用：
class Person {
#name;
#age;
constructor(name, age) {
this.#name = name;
this.#age = age;
}
get name() {
return this.#name;
}
set name(value) {
if (typeof value !== 'string') {
throw new TypeError('名称必须是字符串');
}
this.#name = value;
}
get age() {
return this.#age;
}
// 不提供age的setter，使其只读
celebrateBirthday() {
this.#age += 1;
return `${this.#name}现在${this.#age}岁了！`;
}
}
const person = new Person('张三', 30);
console.log(person.name); // 输出: "张三"
person.name = '李四';
console.log(person.name); // 输出: "李四"
console.log(person.age); // 输出: 30
// person.age = 40; // 无效，因为没有setter
// console.log(person.#age); // 语法错误，私有字段不能在类外部访问
console.log(person.celebrateBirthday()); // 输出: "李四现在31岁了！"与代理模式结合
Proxy API提供了比属性描述符更强大的对象拦截能力，两者结合使用可以实现更复杂的功能：
class Model {
constructor(data = {}) {
// 使用属性描述符定义内部存储
Object.defineProperty(this, '_data', {
value: { ...data },
writable: true,
enumerable: false,
configurable: false
});
// 使用Proxy拦截所有属性访问
return new Proxy(this, {
get(target, prop) {
if (prop in target) {
// 如果是实例方法，返回方法
return target[prop];
}
// 否则从_data中获取数据
return target._data[prop];
},
set(target, prop, value) {
// 忽略以_开头的属性
if (typeof prop === 'string' && prop.startsWith('_')) {
return false;
}
// 存储旧值
const oldValue = target._data[prop];
// 设置新值
target._data[prop] = value;
// 如果有onChange方法，调用它
if (typeof target.onChange === 'function') {
target.onChange(prop, value, oldValue);
}
return true;
},
has(target, prop) {
// 检查属性是否存在于_data中
return prop in target._data;
},
ownKeys(target) {
// 返回_data的所有键
return Reflect.ownKeys(target._data);
},
getOwnPropertyDescriptor(target, prop) {
// 为_data中的属性提供描述符
if (prop in target._data) {
return {
value: target._data[prop],
writable: true,
enumerable: true,
configurable: true
};
}
return undefined;
}
});
}
// 实例方法
toJSON() {
return { ...this._data };
}
onChange(prop, newValue, oldValue) {
console.log(`属性 ${prop} 从 ${oldValue} 变更为 ${newValue}`);
}
}
// 使用示例
const user = new Model({
name: '张三',
age: 30
});
console.log(user.name); // 输出: "张三"
user.name = '李四'; // 输出: 属性 name 从 张三 变更为 李四
console.log(user.toJSON()); // 输出: { name: '李四', age: 30 }
// 检查属性
console.log('name' in user); // 输出: true
console.log(Object.keys(user)); // 输出: ['name', 'age']总结
属性描述符是JavaScript中一个强大但常被忽视的特性，它提供了精细控制对象属性行为的能力。通过本文，我们探索了：
基本概念：了解了writable、enumerable、configurable等基本特性。
Getter和Setter：学习了如何使用访问器属性实现计算属性、属性验证和惰性计算。
继承行为：理解了属性描述符在原型链中的特殊行为。
实际应用：探索了数据绑定、观察者模式、表单绑定等实际应用场景。
高级技巧：学习了如何实现私有属性、属性代理、变更日志和访问控制。
现代结合：了6. 现代结合：了解了如何将属性描述符与现代JavaScript特性（如类私有字段、Proxy和Reflect API）结合使用，实现更强大的功能。
属性描述符虽然在某些场景下已经被更现代的特性（如Proxy API和类私有字段）部分替代，但它仍然是JavaScript对象系统的基础，掌握它可以帮助我们更深入地理解JavaScript的对象模型，并在需要时实现精细的属性控制。
在实际开发中，应根据具体需求选择合适的工具。对于简单的属性控制，直接使用属性描述符可能更加直观；而对于复杂的对象代理和拦截需求，Proxy API可能是更好的选择；对于类的私有数据，现代JavaScript的私有字段语法提供了更清晰的解决方案。