Object.defineProperty()?完整指南示例詳解

更新時(shí)間：2025年01月02日 11:32:22 作者：傻小胖

本文深入理解`Object.defineProperty()`的方法,包括基礎(chǔ)概念、屬性描述符的完整選項(xiàng)、常見(jiàn)使用場(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屬性 Mike

3.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 modified

4. 注意事項(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 常見(jiàn)使用場(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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: