首页 > 文章 > 前端

JSObject.defineProperty使用详解

时间：2025-12-04 12:05:32 475浏览收藏

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《JS Object.defineProperty 精准控制属性方法》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

Object.defineProperty 可精确控制对象属性行为，支持设置 writable、enumerable、configurable 描述符，并可通过 get/set 拦截属性读写，实现数据校验与监听，结合 defineProperties 可批量定义，广泛用于封装逻辑与数据保护，是 Vue 2 响应式基础。

怎样使用 JavaScript 的 Object.defineProperty 实现精细的属性控制？

JavaScript 的 Object.defineProperty 方法可以让你精确控制对象属性的行为，比如是否可写、是否可枚举、是否可配置，甚至可以定义 getter 和 setter 来拦截属性的读取和赋值操作。这在需要数据校验、监听变化或封装内部逻辑时非常有用。

控制属性的基本特性

使用 Object.defineProperty 可以设置属性的几个关键描述符：

writable：决定属性值是否能被修改
enumerable：决定属性是否会出现在 for...in 循环中
configurable：决定属性能否被删除或修改其描述符

例如，创建一个只读且不可枚举的属性：

var obj = {};
Object.defineProperty(obj, 'constant', {
  value: 42,
  writable: false,
  enumerable: false,
  configurable: false
});

console.log(obj.constant); // 42
obj.constant = 100; // 无效（严格模式下会报错）
for (let key in obj) console.log(key); // 不会输出 constant

使用 getter 和 setter 拦截访问

你可以用 get 和 set 描述符来定义虚拟属性，实现数据格式化、验证或副作用处理。

防止属性被修改或删除

将 configurable 设为 false 后，该属性无法被 delete 删除，也无法再次通过 defineProperty 修改描述符。

Object.defineProperty(obj, 'fixed', {
  value: 'locked',
  writable: false,
  configurable: false
});

delete obj.fixed; // 失败（严格模式报错）
// 再次 defineProperty 会抛错

批量定义多个属性

虽然 Object.defineProperty 一次只能定义一个属性，但可以用 Object.defineProperties 定义多个：

Object.defineProperties(obj, {
  prop1: { value: 1, writable: false },
  prop2: {
    get: () => this.value * 2
  }
});

基本上就这些。掌握这些技巧后，你可以在不暴露内部结构的情况下提供干净的接口，同时增强数据的安全性和可控性。注意：现代框架如 Vue 就是基于 defineProperty 实现响应式的（Vue 2），但在 Vue 3 中已转向 Proxy。不过理解 defineProperty 仍有助于深入理解 JS 对象机制。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JSObject.defineProperty使用详解》文章吧，也可关注golang学习网公众号了解相关技术文章。