1、能干啥?

Object.defineProperty()可以给传入的对象动态的添加或修改属性

2、怎么玩?

Object.defineProperty(obj,prop,desc)它有三个参数:

  • obj:需要定义属性的当前对象

  • prop:当前需要定义的属性名;注意是string类型

  • desc:属性描述符;注意是object类型

desc常用的属性:

  • value: 设置属性的值
  • writable: 值是否可以重写。true | false,默认false
  • enumerable: 目标属性是否可以被枚举。true | false,默认为false
  • configurable: 目标属性是否可以被删除或是否可以再次修改特性 true | false,默认为false
  • set(): 目标属性设置值的方法
  • get():目标属性获取值的方法

注意:当使用了getter或setter方法,不允许使用writable和value这两个属性

let number = 20;
let person = {
name: 'ly',
};
Object.defineProperty(
person, // 操作的对象
'age', // 属性名
{
// value: 19, // 属性值
// enumerable: true, // 控制属性是否可以枚举(遍历),默认为fasle
// writable: true, // 控制属性是否可以被修改,默认为false
// configurable: true, // 控制属性是否可以删除,默认为false
get() {
console.log('获取值');
return 20;
},
set(value) {
console.log('设置值');
number = value;
},
}
);
console.log(person);

Object.defineProperty用法的更多相关文章

  1. vue双向数据绑定的原理-object.defineProperty() 用法

    有关双向数据绑定的原理 关于数据双向绑定的理解:利用了 Object.defineProperty() 这个方法重新给对象定义了新属性,在操作新属性分别为为获取属性值(调用get方法)和设置属性值(调 ...

  2. vue中Object.defineProperty用法

    function def (obj, key, val, enumerable) { Object.defineProperty(obj, key, { value: val, enumerable: ...

  3. Object.defineProperty()方法的用法详解

    Object.defineProperty()函数是给对象设置属性的. Object.defineProperty(object, propertyname, descriptor); 一共有三个参数 ...

  4. 16、前端知识点--Object.defineProperty 的用法+双向数据绑定原理解析

    一.Object.defineProperty 的用法 Object.defineProperty 可以用于给对象添加更新属性. <script> // Object.defineProp ...

  5. JS apply的巧妙用法以及扩展到Object.defineProperty的使用

    Math.max 实现得到数组中最大的一项 var array = [1,2,3,4,5]; var max = Math.max.apply(null, array); console.log(ma ...

  6. Object.defineProperty基本用法

    1. 基本形式 Object.defineProperty(obj,prop,descriptor) 参数说明: obj: 必需,目标对象prop: 必需,需定义或修改属性的名字descriptor: ...

  7. 对象是否拥有某个属性,in和for in以及object.hasOwnProperty('×××')的异同,以及Object.defineProperty(),Object.keys(),Object.getOwnPropertyNames()的用法

    1.在某个对象是否拥有某个属性,判断的方法有很多,常用的方法就是object.hasOwnProperty('×××'),这个方法是不包括对象原型链上的方法的,举个例子: var obj = { na ...

  8. Object.defineProperty 中 get set 用法

    就是两个函数,只要搞清楚get.set的执行时机就可以了.执行时机如下代码: <!DOCTYPE html> <html lang="en"> <he ...

  9. javascript之Object.defineProperty的奥妙

    直切主题 今天遇到一个这样的功能: 写一个函数,该函数传递两个参数,第一个参数为返回对象的总数据量,第二个参数为初始化对象的数据.如: var o = obj (4, {name: 'xu', age ...

  10. 利用object.defineProperty实现数据与视图绑定

    如今比较火的mvvm框架,例如vue就是利用es5的defineProperty来实现数据与视图绑定的,下面我来介绍一下defineProperty的用法. var people= {} Object ...

随机推荐

  1. 《SQL与数据库基础》10. 存储引擎

    目录 存储引擎 MySQL体系结构 存储引擎简介 三种经典存储引擎 InnoDB 逻辑存储结构 MyISAM Memory 区别及特点 存储引擎选择 本文以 MySQL 为例 存储引擎 MySQL体系 ...

  2. Codeforces Round div.2 C

    Smiling & Weeping ----我对姑娘的喜欢,何止钟意二字 题目链接:Problem - C - Codeforces 自我分析:我感觉这是一道很有意义的题目,可以帮我们更好的理 ...

  3. Solution -「洛谷 P5610」「YunoOI 2013」大学

    Description Link. 区间查 \(x\) 的倍数并除掉,区间查和. Solution 平衡树. 首先有个基本的想法就是按 \(a_{i}\) 开平衡树,即对于每个 \(a_{i}\) 都 ...

  4. Solution -「CF 959E」Mahmoud and Ehab and the xor-MST

    Description Link. 一完全图有 \(n\) 个节点 \(0,...,n-1\),其中边 \((i,j)\) 的权值为 \(i\oplus j\),其中 \(\oplus\) 为位异或操 ...

  5. Linux 安装 helm

    下载helm压缩包,地址   https://github.com/helm/helm/releases/tag/v3.10.1 选择适合自己操作系统的包 上传解压安装 1 root@calico-m ...

  6. 200PLC转以太网与1200PLC实现PUT GET通信

    200PLC转以太网与1200PLC实现PUT GET通信 本案例介绍西门子PLC200PLC 224或226,Port0或者是Port1串口通过兴达易控PPI-ETH-XD1.0plc以太网模块,2 ...

  7. 文心一言 VS 讯飞星火 VS chatgpt (103)-- 算法导论10.1 1题

    一.用go语言,仿照图 10-1,画图表示依次执行操作 PUSH(S,4).PUSH(S,1).PUSH(S,3).POP(S).PUSH(S,8)和 POP(S)每一步的结果,栈 S初始为空,存储于 ...

  8. 【Azure Developer】在App Service上放置一个JS页面并引用msal.min.js成功获取AAD用户名示例

    问题描述 在App Service上放置一个JS页面并引用msal.min.js,目的是获取AAD用户名并展示. 问题解答 示例代码 <!DOCTYPE html> <html> ...

  9. 图形学、02 推导证明 | 任意一点经过透视投影后 z 坐标相对于之前有什么变化

    齐次坐标知识点: \(\begin{bmatrix} x \\ y \\ z \\ 1 \\\end{bmatrix} \Rightarrow\begin{bmatrix} nx \\ ny \\ n ...

  10. IEDA-Maven项目开发步骤

    1. 打开IDEA 界面,选择"New Project" 2. 输入项目名称和基本信息 输入项目名称.选择存放路径.JDK版本.以及GroupId.ArtifactId. Grou ...