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

夜晨

夜晨

2025-10-30

501人浏览

原创

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 描述符来定义虚拟属性,实现数据格式化、验证或副作用处理。

Java JDK 25
Java JDK 25

Java JDK 25 来自 OpenJDK 官方归档,版本为 JDK 25,本条下载地址已指向官方 Windows x64 zip 安装包直链,适合调试旧项目或兼容旧版 Java 运行环境。

下载
var person = {
  _name: 'John'
};

Object.defineProperty(person, 'name', {
  get: function() {
    return this._name.toUpperCase();
  },
  set: function(value) {
    if (typeof value !== 'string') {
      throw new Error('Name must be a string');
    }
    this._name = value.trim();
  }
});

console.log(person.name); // "JOHN"
person.name = " Alice ";
console.log(person._name); // "Alice"

防止属性被修改或删除

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 对象机制。

Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
string转int
string转int

在编程中,我们经常会遇到需要将字符串(str)转换为整数(int)的情况。这可能是因为我们需要对字符串进行数值计算,或者需要将用户输入的字符串转换为整数进行处理。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

2023.08.02

2839

3

if什么意思
if什么意思

if的意思是“如果”的条件。它是一个用于引导条件语句的关键词,用于根据特定条件的真假情况来执行不同的代码块。本专题提供if什么意思的相关文章,供大家免费阅读。

2023.08.22

1019

3

scripterror怎么解决
scripterror怎么解决

scripterror的解决办法有检查语法、文件路径、检查网络连接、浏览器兼容性、使用try-catch语句、使用开发者工具进行调试、更新浏览器和JavaScript库或寻求专业帮助等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2023.10.18

640

5

500error怎么解决
500error怎么解决

500error的解决办法有检查服务器日志、检查代码、检查服务器配置、更新软件版本、重新启动服务、调试代码和寻求帮助等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2023.10.25

1194

5

硬盘接口类型介绍
硬盘接口类型介绍

硬盘接口类型有IDE、SATA、SCSI、Fibre Channel、USB、eSATA、mSATA、PCIe等等。详细介绍:1、IDE接口是一种并行接口,主要用于连接硬盘和光驱等设备,它主要有两种类型:ATA和ATAPI,IDE接口已经逐渐被SATA接口;2、SATA接口是一种串行接口,相较于IDE接口,它具有更高的传输速度、更低的功耗和更小的体积;3、SCSI接口等等。

2023.10.19

2766

3

PHP接口编写教程
PHP接口编写教程

本专题整合了PHP接口编写教程,阅读专题下面的文章了解更多详细内容。

2025.10.17

2094

12

php8.4实现接口限流的教程
php8.4实现接口限流的教程

PHP8.4本身不内置限流功能,需借助Redis(令牌桶)或Swoole(漏桶)实现;文件锁因I/O瓶颈、无跨机共享、秒级精度等缺陷不适用高并发场景。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2025.12.29

3353

9

java接口相关教程
java接口相关教程

本专题整合了java接口相关内容,阅读专题下面的文章了解更多详细内容。

2026.01.19

159

15

数据库Delete用法
数据库Delete用法

数据库Delete用法:1、删除单条记录;2、删除多条记录;3、删除所有记录;4、删除特定条件的记录。更多关于数据库Delete的内容,大家可以访问下面的文章。

2023.11.13

1218

4

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app快速上手
uni-app快速上手

共0课时 | 0人学习

Vue 教程
Vue 教程

共42课时 | 15.5万人学习

Vue3.x 工具篇--十天技能课堂
Vue3.x 工具篇--十天技能课堂

共26课时 | 2.2万人学习