Object.defineProperty()?完整指南示例詳解
更新時(shí)間：2025年01月02日 11:32:22 作者：傻小胖
本文深入理解`Object.defineProperty()`的方法,包括基礎(chǔ)概念、屬性描述符的完整選項(xiàng)、常見使用場(chǎng)景等,感興趣的朋友跟隨小編一起看看吧
Object.defineProperty() 完整指南
1. 基本概念
Object.defineProperty() 方法允許精確地添加或修改對(duì)象的屬性。默認(rèn)情況下，使用此方法添加的屬性是不可修改的。
1.1 基本語(yǔ)法
Object.defineProperty(obj, prop, descriptor)
參數(shù)說(shuō)明：
- obj: 要定義屬性的對(duì)象
- prop: 要定義或修改的屬性名
- descriptor: 屬性描述符對(duì)象
2. 屬性描述符
2.1 數(shù)據(jù)描述符
const obj = {};
Object.defineProperty(obj, 'name', {
value: 'John', // 屬性值
writable: true, // 是否可寫
enumerable: true, // 是否可枚舉
configurable: true // 是否可配置
});2.2 訪問(wèn)器描述符
const obj = {
_name: 'John'
};
Object.defineProperty(obj, 'name', {
get() {
return this._name;
},
set(value) {
this._name = value;
},
enumerable: true,
configurable: true
});3. 實(shí)際應(yīng)用示例
3.1 數(shù)據(jù)劫持（Vue2響應(yīng)式原理）
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) {
// 遞歸處理嵌套對(duì)象
observe(val);
Object.defineProperty(obj, key, {
get() {
console.log(`獲取${key}屬性`);
return val;
},
set(newVal) {
if (val === newVal) return;
console.log(`設(shè)置${key}屬性為${newVal}`);
val = newVal;
// 觸發(fā)更新
}
});
}
// 使用示例
const data = {
name: 'John',
age: 20
};
observe(data);
data.name = 'Mike'; // 設(shè)置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'; // 正常設(shè)置
person.name = 123; // 拋出錯(cuò)誤3.3 計(jì)算屬性實(shí)現(xiàn)
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. 注意事項(xiàng)和限制
4.1 不可擴(kuò)展對(duì)象
const obj = {};
Object.preventExtensions(obj);
// 這將拋出錯(cuò)誤
Object.defineProperty(obj, 'name', {
value: 'John'
});4.2 繼承屬性
const parent = {};
Object.defineProperty(parent, 'name', {
value: 'John',
writable: false
});
const child = Object.create(parent);
// 這將拋出錯(cuò)誤
child.name = 'Mike';4.3 屬性描述符限制
const obj = {};
// 不能同時(shí)指定 value/writable 和 get/set
Object.defineProperty(obj, 'name', {
value: 'John',
get() {
return 'John';
}
}); // 拋出錯(cuò)誤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 訪問(wèn)器性能
// 避免在訪問(wèn)器中進(jìn)行復(fù)雜計(jì)算
Object.defineProperty(obj, 'name', {
get() {
// 不推薦
return complexCalculation();
}
});
// 推薦：緩存計(jì)算結(jié)果
let cachedValue;
Object.defineProperty(obj, 'name', {
get() {
if (cachedValue === undefined) {
cachedValue = complexCalculation();
}
return cachedValue;
}
});6. 最佳實(shí)踐
描述符默認(rèn)值
// 記住默認(rèn)值都是 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;
}錯(cuò)誤處理
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. 總結(jié)
Object.defineProperty() 的關(guān)鍵點(diǎn)：
使用場(chǎng)景
- 數(shù)據(jù)劫持
- 私有屬性模擬
- 計(jì)算屬性實(shí)現(xiàn)
- 屬性訪問(wèn)控制
注意事項(xiàng)
- 描述符類型限制
- 性能考慮
- 繼承關(guān)系處理
- 錯(cuò)誤處理
最佳實(shí)踐
- 合理使用緩存
- 避免復(fù)雜計(jì)算
- 注意默認(rèn)值
- 做好錯(cuò)誤處理
8. 深入理解 Object.defineProperty()
8.1 基礎(chǔ)概念詳解
Object.defineProperty() 是 JavaScript 中用于在對(duì)象上定義新屬性或修改現(xiàn)有屬性的方法。它允許精確控制屬性的特性。
// 基本語(yǔ)法 Object.defineProperty(obj, prop, descriptor) // 參數(shù)說(shuō)明 // obj: 要定義屬性的對(duì)象 // prop: 要定義或修改的屬性名 // descriptor: 屬性描述符對(duì)象
8.2 屬性描述符詳解
屬性描述符分為兩種類型：數(shù)據(jù)描述符和訪問(wèn)器描述符。
數(shù)據(jù)描述符的完整選項(xiàng):
const obj = {};
Object.defineProperty(obj, 'name', {
value: 'John', // 屬性值
writable: true, // 是否可寫
enumerable: true, // 是否可枚舉
configurable: true // 是否可配置
});訪問(wèn)器描述符的完整選項(xiàng):
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 常見使用場(chǎng)景
只讀屬性:
const obj = {};
Object.defineProperty(obj, 'readonly', {
value: 'I am read-only',
writable: false,
enumerable: true,
configurable: false
});
obj.readonly = 'New value'; // 無(wú)效
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'計(jì)算屬性:
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 雙向綁定實(shí)現(xiàn):
function observe(obj) {
if (!obj || typeof obj !== 'object') return;
// 遍歷對(duì)象的每個(gè)屬性
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;
// 通知所有依賴進(jìn)行更新
dep.notify();
}
});
// 遞歸觀察子屬性
if (typeof value === 'object') {
observe(value);
}
});
}
// 使用示例
const data = {
user: {
name: 'John',
age: 20
}
};
observe(data);
// 現(xiàn)在 data 對(duì)象的所有屬性都是響應(yīng)式的8.4 注意事項(xiàng)和最佳實(shí)踐
描述符限制:
// 不能同時(shí)使用數(shù)據(jù)描述符和訪問(wèn)器描述符
Object.defineProperty(obj, 'prop', {
value: 123,
get() { return 123; } // 錯(cuò)誤！
});性能優(yōu)化:
// 批量定義屬性
Object.defineProperties(obj, {
prop1: {
value: 123,
writable: true
},
prop2: {
get() { return this.prop1 * 2; }
}
});默認(rèn)值處理:
// 所有描述符屬性默認(rèn)為 false
Object.defineProperty(obj, 'prop', {
value: 123
// writable: false
// enumerable: false
// configurable: false
});到此這篇關(guān)于Object.defineProperty() 完整指南的文章就介紹到這了,更多相關(guān)Object.defineProperty() 完整指南內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
小程序多圖列表實(shí)現(xiàn)性能優(yōu)化的方法步驟
這篇文章主要介紹了小程序多圖列表實(shí)現(xiàn)性能優(yōu)化的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
javaScript如何跳出多重循環(huán)break、continue
這篇文章主要為大家詳細(xì)介紹了javaScript如何跳出多重循環(huán)break、continue，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
JavaScript計(jì)算出現(xiàn)精度丟失問(wèn)題的解決方法
Javascript作為一門大型編程語(yǔ)言,在日常開發(fā)中難免會(huì)涉及到大量的數(shù)學(xué)計(jì)算,然而,浮點(diǎn)數(shù)在計(jì)算過(guò)程中可能出現(xiàn)精度的問(wèn)題,下面我們就來(lái)學(xué)習(xí)一下Javascript中高精度計(jì)算及其相關(guān)知識(shí)吧2023-11-11
JavaScript時(shí)間格式整理大全(附大量示例)
在JavaScript中時(shí)間格式轉(zhuǎn)換是一個(gè)常見的需求,可以通過(guò)多種方式實(shí)現(xiàn),這篇文章主要介紹了JavaScript時(shí)間格式的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-04-04
js創(chuàng)建數(shù)據(jù)共享接口——簡(jiǎn)化框架之間相互傳值
很多框架存在父子關(guān)系，操作起來(lái)十分麻煩，很多同學(xué)經(jīng)常出現(xiàn)這樣悲催的代碼2011-10-10
JS+Canvas實(shí)現(xiàn)上傳圖片截圖功能
在我們平時(shí)開發(fā)圖片上傳時(shí),有時(shí)需要實(shí)現(xiàn)圖片的裁剪功能,這篇文章主要為大家介紹了如何使用Canvas實(shí)現(xiàn)上傳圖片截圖功能,希望對(duì)大家有所幫助2023-10-10
下面小編就為大家?guī)?lái)一篇純js實(shí)現(xiàn)畫一棵樹的示例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
這篇文章主要介紹了JavaScript引用賦值與傳值賦值總結(jié)，在JavaScript中基本數(shù)據(jù)類型都是傳值賦值，復(fù)合數(shù)據(jù)類型都是引用賦值(傳地址)也叫引用傳址，下文更多相關(guān)資料，需要的小伙伴可以參考一下2022-05-05
用headjs來(lái)管理和加載js 提高網(wǎng)站加載速度
headjs其實(shí)是一整套的工具，本文介紹的是它其中的Javascript Loader功能。需要的朋友可以參考下2016-11-11
javascript實(shí)現(xiàn)五星評(píng)價(jià)代碼（源碼下載）
大家在淘寶購(gòu)物之后，都會(huì)對(duì)賣家的服務(wù)進(jìn)行評(píng)論，那么五星評(píng)價(jià)代碼是怎么實(shí)現(xiàn)的呢？下面小編給大家介紹基于Javascript實(shí)現(xiàn)五星評(píng)價(jià)代碼，有需要的朋友可以參考下2015-08-08