Object.defineProperty() 完整指南示例详解
更新时间：2025年01月02日 11:32:22 作者：傻小胖
本文深入理解`Object.defineProperty()`的方法,包括基础概念、属性描述符的完整选项、常见使用场景等,感兴趣的朋友跟随小编一起看看吧
Object.defineProperty() 完整指南
1. 基本概念
Object.defineProperty() 方法允许精确地添加或修改对象的属性。默认情况下，使用此方法添加的属性是不可修改的。
1.1 基本语法
Object.defineProperty(obj, prop, descriptor)
参数说明：
- obj: 要定义属性的对象
- prop: 要定义或修改的属性名
- descriptor: 属性描述符对象
2. 属性描述符
2.1 数据描述符
const obj = {};
Object.defineProperty(obj, 'name', {
value: 'John', // 属性值
writable: true, // 是否可写
enumerable: true, // 是否可枚举
configurable: true // 是否可配置
});2.2 访问器描述符
const obj = {
_name: 'John'
};
Object.defineProperty(obj, 'name', {
get() {
return this._name;
},
set(value) {
this._name = value;
},
enumerable: true,
configurable: true
});3. 实际应用示例
3.1 数据劫持（Vue2响应式原理）
function observe(obj) {
if (typeof obj !== 'object' || obj === null) {
return;
}
Object.keys(obj).forEach(key => {
defineReactive(obj, key, obj[key]);
});
}
function defineReactive(obj, key, val) {
// 递归处理嵌套对象
observe(val);
Object.defineProperty(obj, key, {
get() {
console.log(`获取${key}属性`);
return val;
},
set(newVal) {
if (val === newVal) return;
console.log(`设置${key}属性为${newVal}`);
val = newVal;
// 触发更新
}
});
}
// 使用示例
const data = {
name: 'John',
age: 20
};
observe(data);
data.name = 'Mike'; // 设置name属性为Mike
console.log(data.name); // 获取name属性 Mike3.2 私有属性模拟
function Person(name) {
let _name = name;
Object.defineProperty(this, 'name', {
get() {
return _name;
},
set(value) {
if (typeof value !== 'string') {
throw new Error('Name must be a string');
}
_name = value;
}
});
}
const person = new Person('John');
console.log(person.name); // John
person.name = 'Mike'; // 正常设置
person.name = 123; // 抛出错误3.3 计算属性实现
function computed(obj, key, computeFunc) {
let value = computeFunc();
Object.defineProperty(obj, key, {
get() {
return value;
},
set() {
console.warn(`${key} is a computed property, cannot be modified`);
}
});
}
const obj = {
a: 1,
b: 2
};
computed(obj, 'sum', () => obj.a + obj.b);
console.log(obj.sum); // 3
obj.sum = 10; // 警告：sum is a computed property, cannot be modified4. 注意事项和限制
4.1 不可扩展对象
const obj = {};
Object.preventExtensions(obj);
// 这将抛出错误
Object.defineProperty(obj, 'name', {
value: 'John'
});4.2 继承属性
const parent = {};
Object.defineProperty(parent, 'name', {
value: 'John',
writable: false
});
const child = Object.create(parent);
// 这将抛出错误
child.name = 'Mike';4.3 属性描述符限制
const obj = {};
// 不能同时指定 value/writable 和 get/set
Object.defineProperty(obj, 'name', {
value: 'John',
get() {
return 'John';
}
}); // 抛出错误5. 性能考虑
5.1 大量属性处理
// 不推荐
const obj = {};
for (let i = 0; i < 1000; i++) {
Object.defineProperty(obj, `prop${i}`, {
value: i,
writable: true
});
}
// 推荐
const descriptors = {};
for (let i = 0; i < 1000; i++) {
descriptors[`prop${i}`] = {
value: i,
writable: true,
configurable: true,
enumerable: true
};
}
Object.defineProperties(obj, descriptors);5.2 访问器性能
// 避免在访问器中进行复杂计算
Object.defineProperty(obj, 'name', {
get() {
// 不推荐
return complexCalculation();
}
});
// 推荐：缓存计算结果
let cachedValue;
Object.defineProperty(obj, 'name', {
get() {
if (cachedValue === undefined) {
cachedValue = complexCalculation();
}
return cachedValue;
}
});6. 最佳实践
描述符默认值
// 记住默认值都是 false
Object.defineProperty(obj, 'name', {
value: 'John'
// writable: false
// enumerable: false
// configurable: false
});使用 TypeScript 类型
interface PropertyDescriptor {
configurable?: boolean;
enumerable?: boolean;
value?: any;
writable?: boolean;
get?(): any;
set?(v: any): void;
}错误处理
function safeDefineProperty(obj, prop, descriptor) {
try {
Object.defineProperty(obj, prop, descriptor);
return true;
} catch (error) {
console.error(`Failed to define property ${prop}:`, error);
return false;
}
}7. 总结
Object.defineProperty() 的关键点：
使用场景
- 数据劫持
- 私有属性模拟
- 计算属性实现
- 属性访问控制
注意事项
- 描述符类型限制
- 性能考虑
- 继承关系处理
- 错误处理
最佳实践
- 合理使用缓存
- 避免复杂计算
- 注意默认值
- 做好错误处理
8. 深入理解 Object.defineProperty()
8.1 基础概念详解
Object.defineProperty() 是 JavaScript 中用于在对象上定义新属性或修改现有属性的方法。它允许精确控制属性的特性。
// 基本语法 Object.defineProperty(obj, prop, descriptor) // 参数说明 // obj: 要定义属性的对象 // prop: 要定义或修改的属性名 // descriptor: 属性描述符对象
8.2 属性描述符详解
属性描述符分为两种类型：数据描述符和访问器描述符。
数据描述符的完整选项:
const obj = {};
Object.defineProperty(obj, 'name', {
value: 'John', // 属性值
writable: true, // 是否可写
enumerable: true, // 是否可枚举
configurable: true // 是否可配置
});访问器描述符的完整选项:
const obj = {
_name: 'John'
};
Object.defineProperty(obj, 'name', {
get() {
console.log('Getting value');
return this._name;
},
set(value) {
console.log('Setting value to', value);
this._name = value;
},
enumerable: true,
configurable: true
});8.3 常见使用场景
只读属性:
const obj = {};
Object.defineProperty(obj, 'readonly', {
value: 'I am read-only',
writable: false,
enumerable: true,
configurable: false
});
obj.readonly = 'New value'; // 无效
console.log(obj.readonly); // 'I am read-only'不可枚举属性:
const obj = {};
Object.defineProperty(obj, 'hidden', {
value: 'You cannot see me',
enumerable: false
});
console.log(Object.keys(obj)); // []
console.log(obj.hidden); // 'You cannot see me'计算属性:
const person = {
firstName: 'John',
lastName: 'Doe'
};
Object.defineProperty(person, 'fullName', {
get() {
return `${this.firstName} ${this.lastName}`;
},
set(value) {
[this.firstName, this.lastName] = value.split(' ');
}
});
console.log(person.fullName); // 'John Doe'
person.fullName = 'Jane Smith';
console.log(person.firstName); // 'Jane'
console.log(person.lastName); // 'Smith'Vue 双向绑定实现:
function observe(obj) {
if (!obj || typeof obj !== 'object') return;
// 遍历对象的每个属性
Object.keys(obj).forEach(key => {
let value = obj[key];
let dep = new Dep(); // 依赖收集器
Object.defineProperty(obj, key, {
get() {
// 收集依赖
if (Dep.target) {
dep.addDep(Dep.target);
}
return value;
},
set(newValue) {
if (value === newValue) return;
value = newValue;
// 通知所有依赖进行更新
dep.notify();
}
});
// 递归观察子属性
if (typeof value === 'object') {
observe(value);
}
});
}
// 使用示例
const data = {
user: {
name: 'John',
age: 20
}
};
observe(data);
// 现在 data 对象的所有属性都是响应式的8.4 注意事项和最佳实践
描述符限制:
// 不能同时使用数据描述符和访问器描述符
Object.defineProperty(obj, 'prop', {
value: 123,
get() { return 123; } // 错误！
});性能优化:
// 批量定义属性
Object.defineProperties(obj, {
prop1: {
value: 123,
writable: true
},
prop2: {
get() { return this.prop1 * 2; }
}
});默认值处理:
// 所有描述符属性默认为 false
Object.defineProperty(obj, 'prop', {
value: 123
// writable: false
// enumerable: false
// configurable: false
});到此这篇关于Object.defineProperty() 完整指南的文章就介绍到这了,更多相关Object.defineProperty() 完整指南内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了小程序多图列表实现性能优化的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
javaScript如何跳出多重循环break、continue
这篇文章主要为大家详细介绍了javaScript如何跳出多重循环break、continue，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
Javascript作为一门大型编程语言,在日常开发中难免会涉及到大量的数学计算,然而,浮点数在计算过程中可能出现精度的问题,下面我们就来学习一下Javascript中高精度计算及其相关知识吧2023-11-11
在JavaScript中时间格式转换是一个常见的需求,可以通过多种方式实现,这篇文章主要介绍了JavaScript时间格式的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-04-04
很多框架存在父子关系，操作起来十分麻烦，很多同学经常出现这样悲催的代码2011-10-10
在我们平时开发图片上传时,有时需要实现图片的裁剪功能,这篇文章主要为大家介绍了如何使用Canvas实现上传图片截图功能,希望对大家有所帮助2023-10-10
下面小编就为大家带来一篇纯js实现画一棵树的示例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了JavaScript引用赋值与传值赋值总结，在JavaScript中基本数据类型都是传值赋值，复合数据类型都是引用赋值(传地址)也叫引用传址，下文更多相关资料，需要的小伙伴可以参考一下2022-05-05
headjs其实是一整套的工具，本文介绍的是它其中的Javascript Loader功能。需要的朋友可以参考下2016-11-11
大家在淘宝购物之后，都会对卖家的服务进行评论，那么五星评价代码是怎么实现的呢？下面小编给大家介绍基于Javascript实现五星评价代码，有需要的朋友可以参考下2015-08-08
最新评论