object的defineProperty方法简介

最新推荐文章于 2023-03-12 08:48:39 发布
原创 最新推荐文章于 2023-03-12 08:48:39 发布 · 262 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了JavaScript中Object.defineProperty()的两种使用方式，重点讲解了enumerable属性与getter的执行时机。通过实例展示了如何在对象上定义属性并控制其访问特性，当尝试访问属性时，会触发getter方法执行。

defineProperty方法的初始写法：
在这里插入图片描述
注意这个enumerable是枚举的意思，也就是我们说的遍历
defineProperty方法的第二种写法：

在这里插入图片描述
什么时候执行getter？
在这里插入图片描述
可以看出，打印了一个空的对象，但是点开有下面的方法和属性，当点击这三个点的时候，即invoke property getter调用原型getter方法，也是去访问这个值，同obj.name
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

xx小黄人
关注
12.Vue中的数据代理
爱米酱的博客
03-17 1216
上一节我们知道了什么是数据代理之后，那么我们这一节就来看看Vue中是如何应用数据代理的。
【JS】Object.defineProperty与Proxy
owo_ovo的博客
08-02 2034
【JS】Object.defineProperty与Proxy
es6 中 setter/getter 访问器属性
qq_44917015的博客
07-20 497
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
FE_Vue核心知识的学习 v-model 双向绑定原理
一个搬砖工人
03-12 481
接着，我们还需要有一个指令解析器Compile，对每个节点元素进行扫描和解析，将相关指令（如v-model，v-on）对应初始化成一个订阅者Watcher，并替换模板数据或者绑定相应的函数，此时当订阅者Watcher接收到相应属性的变化，就会执行对应的更新函数，从而更新视图。而Vue中的push却不等于 Array.prototype.push ，因为Vue中的push是经过包装的。中的属性做了一个数据劫持，把data里面的属性做了修改/升级，以便更好地完成响应式操作。以上代码是起作用的，这是为什么呢？
vue中的深度监听错误总结
时清云的博客
03-03 1200
今天在项目遇到这样一个问题，请求回来的数据，我直接进行赋值，代码如下： this.hospitalList = res.data; this.hospitalList.map(item => { item.showFlag = false; return item; }) this.hospitalList = this.hospitalList.splice(0, 15) console.log(this.h
关于console.table及chrome调试打印变量的问题
杨雪枫的博客
08-05 2528
vue开发页面，在打印一个返回结果的时候，如何让所有的变量展开。。而不是（…）鼠标移入会提示invoke property getter。 今天使用console.table打印东西发现一个奇怪的现象： 其中aaa和this.tableData的数据是一样的，不过后者是从后台返回过来的。打印两者结果如下: 为什么下面打印的是省略号，如果数据很多的话，还要我一个一个去点开？ 面向百度吧，最后找到...
vue源码学习之Object.defineProperty 对数组监听
08-27
Object.defineProperty() 方法是 JavaScript 中的一个方法，用于在对象上定义一个新属性或修改现有属性。该方法可以用于监听对象的变化，包括数组的变化。 在 Vue 源码学习中，Object.defineProperty 对数组监听...
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
10-17
今天小编就为大家分享一篇关于vue.js的双向数据绑定Object.defineProperty方法的神奇之处，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
js中Object.defineProperty()方法的不详解
10-18
`Object.defineProperty()`是JavaScript中用于对象操作的一个强大方法，它可以让你精确地定义对象的属性，包括属性的值、可写性、可枚举性和可配置性等特性。这个方法接收三个参数：`object`、`propName`和`...
vue源码学习之Object.defineProperty对象属性监听
01-21
本文介绍了vue源码学习之Object.defineProperty对象属性监听，分享给大家，具体如下： 参考版本 vue源码版本：0.11 相关 vue实现双向数据绑定的关键是 Object.defineProperty ，让我们先来看下这个函数。 在MDN上...
JavaScript之Object.defineProperty
weixin_45707229的博客
08-18 515
本文简单描述Object的defindProperty()方法，然后模拟实现Vue的数据代理的效果。
There is no getter for property named 'xxx' in 'class java.lang.xxxx'解决办法
热门推荐
荣耀之路
09-19 2万+
org.mybatis.spring.MyBatisSystemException: nested exception is org.apache.ibatis.reflection.ReflectionException: There is no getter for property named 'xxxxx' in 'class java.lang.Integer'
java基础之反射-通过反射调用某个属性的setter和getter方法
pengbuzhi的专栏
01-16 3925
Java代码   package com.gui.test.reflection;      import java.lang.reflect.Method;   import java.util.Hashtable;   import java.util.regex.Pattern;      /**   *    * @desc 通过反射来动态调用get 和 se
Vue 数据绑定原理
weixin_34391854的博客
07-26 131
这篇文章并不会一行一行的分析 vue 的源码，已经有很多文章都写过了，我会一步一步的讲清楚 vue 数据绑定的原理。 defineProperty 基本上每个人都知道 vue 是使用了 defineProperty 将属性转化为 getter/setter 来监听数据的改变。 function defineReactive(data, key, val) { Object.defineProp...
调用getter/setter方法, 访问私有变量, 调用私有方法
jackieriver的博客
07-17 1957
/******************************************************************************* * Copyright (c) 2005, 2014 springside.github.io * * Licensed under the Apache License, Version 2.0 (the "License");...
vue3.0 ref 函数
weixin_45780818的博客
07-20 4679
先写一个基础模板 <template> <div> <p>个人信息</p> <p>姓名：{{ name }}</p> <p>年龄：{{ age }}</p> </div> </template> <script lang="ts"> import { defineComponent } from "vue"; export default d
小程序开发序列(六)事件传参
weixin_34205076的博客
06-12 402
在触发事件后，有时需要有些额外的数据，JS的写法是直接以参数的形式传递。而小程序是react模式的，使用data触发状态变化而刷新界面，绑定的事件里，绑定的是函数的名称，参数无法像一般编码的方式直接传入，那要怎么办？ 小程序提供了一种方式，即daa-xxx，其中data-是标识事件触发时会带上这个参数，xxx是参数名。比如按钮绑定了query事件，需要传入一个产...
Java利用PropertyDescriptor获取属性的 getter/setter 方法
LittleSkey的博客
07-30 1万+
PropertyDescriptor获取属性的 getter/setter 方法
Object.defineProperty使用方法
最新发布
09-30
<think>我们正在讨论Object.defineProperty的使用方法。根据引用内容，我们可以总结如下： 引用[1]展示了使用Object.defineProperties一次定义多个属性的方法，并创建了一个包含两个属性a和b的对象，这两个属性都是不可写、不可枚举、不可配置的（因为只指定了value，其他特性默认为false）。 引用[2]展示了使用Object.defineProperty修改一个已存在对象的属性。注意，Object.defineProperty的返回值就是传入的第一个参数（即要定义属性的对象），所以obj1和newObj是同一个对象。 引用[3]指出了Object.defineProperty的一个缺陷：它必须预先劫持属性，对于后添加的属性无法监听，而Proxy可以代理整个对象，因此可以捕获后续添加的属性。 根据用户的问题，他想了解Object.defineProperty的使用方法。因此，我们需要详细讲解该方法的使用，包括参数、属性描述符的种类（数据描述符和存取描述符）以及各个配置项的含义。 同时，我们可以通过代码示例来演示如何使用。 最后，按照要求，我们需要生成相关问题。 下面是我的回答： </think>### Object.defineProperty 使用方法详解 `Object.defineProperty()` 是 JavaScript 中用于精确控制对象属性的方法，通过属性描述符实现。以下是核心使用方法和注意事项： #### 一、基础语法 ```javascript Object.defineProperty(obj, prop, descriptor) ``` - **obj**：目标对象 - **prop**：要定义/修改的属性名 - **descriptor**：属性描述符对象 #### 二、属性描述符类型 1. **数据描述符**（控制值本身）： ```javascript const obj = {}; Object.defineProperty(obj, 'fixedValue', { value: 42, // 属性值 writable: false, // 禁止修改（默认false） enumerable: true, // 可枚举（默认false） configurable: false // 禁止删除/重定义（默认false） }); console.log(obj.fixedValue); // 42 obj.fixedValue = 100; // 静默失败（严格模式报错）[^2] ``` 2. **存取描述符**（控制读写行为）： ```javascript let _internal = 0; Object.defineProperty(obj, 'counter', { get() { console.log("读取值"); return _internal; // 通过闭包存储实际值 }, set(newVal) { console.log("设置值"); if(newVal > 0) _internal = newVal; }, enumerable: true }); obj.counter = 10; // 触发setter console.log(obj.counter); // 触发getter → 10 ``` > ⚠️ **关键限制**：`get/set` 和 `value/writable` 不可共存[^1]。 #### 三、批量定义属性 使用 `Object.defineProperties()` 定义多个属性： ```javascript const obj = {}; Object.defineProperties(obj, { x: { value: 1, writable: true }, y: { get() { return this.x * 2; } // 计算属性 } }); console.log(obj.y); // 2 (当x=1时)[^1] ``` #### 四、返回值特性 方法返回原始对象（非拷贝），与原对象严格相等： ```javascript const obj1 = { name: 'Alice' }; const obj2 = Object.defineProperty(obj1, 'age', { value: 30 }); console.log(obj1 === obj2); // true [^2] ``` #### 五、实际应用场景 1. **实现只读属性**： ```javascript const config = {}; Object.defineProperty(config, 'API_KEY', { value: 'secret123', writable: false, configurable: false }); ``` 2. **数据验证**： ```javascript const user = { name: 'Bob' }; Object.defineProperty(user, 'age', { set(value) { if (!Number.isInteger(value)) throw new Error('年龄需为整数'); this._age = value; }, get() { return this._age; } }); ``` #### 六、重要注意事项 1. **默认值规则**： - 未指定 `writable`、`enumerable`、`configurable` 时默认为 `false` - 示例：`{ value: 1 }` 等效于 `{ value:1, writable:false, enumerable:false, configurable:false }` 2. **响应式系统局限**： - 无法检测新增属性（需手动调用 `Vue.set`） - 无法监听数组索引变化（Vue2 需重写数组方法）[^3] > 💡 **最佳实践**：优先使用存取描述符实现复杂逻辑，数据描述符适合简单常量。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值