es6的Object.defineproperty

最新推荐文章于 2024-09-24 08:30:00 发布
最新推荐文章于 2024-09-24 08:30:00 发布
阅读量333 收藏 1
点赞数
分类专栏： vue 文章标签： es6 前端 javascript defineproperty
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43472934/article/details/129569544
版权

1.（在f12控制台的字体颜色区别）

1.1未使用defineproperty添加属性

<!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>回顾Object.defineproperty方法</title>
</head>
<body>

    <script type="text/javascript">
        let person = {
            name:'张三',
            sex:'男',
            age:18
        }

        console.log(person);
    </script>
    
</body>
</html>

在这里插入图片描述

1.2 使用defineproperty添加属性

在这里插入图片描述

总结： 会发现，通过Object.defineproperty添加进来的属性颜色会浅些

2.是否可枚举

2.1未使用defineproperty添加属性

<!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>回顾Object.defineproperty方法</title>
</head>
<body>

    <script type="text/javascript">
        let person = {
            name:'张三',
            sex:'男',
            age:18
        }

        // Object.defineProperty(person,'age',{
        //     value:18
        // })

        console.log(Object.keys(person));
    </script>
    
</body>
</html>

在这里插入图片描述

2.2 使用defineproperty添加属性

<!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>回顾Object.defineproperty方法</title>
</head>
<body>

    <script type="text/javascript">
        let person = {
            name:'张三',
            sex:'男'
            // age:18
        }

        Object.defineProperty(person,'age',{
            value:18
        })

        console.log(Object.keys(person));
    </script>
    
</body>
</html>

在这里插入图片描述

总结： Object.defineproperty不可枚举，就是不可以遍历得到通过Object.defineproperty添加进来的属性

3.使用enumerable

<!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>回顾Object.defineproperty方法</title>
</head>
<body>

    <script type="text/javascript">
        let person = {
            name:'张三',
            sex:'男'
            // age:18
        }

        Object.defineProperty(person,'age',{
            value:18,
            enumerable:true, //控制属性是否可以枚举，默认值是false
        })

        console.log(Object.keys(person));
        console.log(person)
    </script>
    
</body>
</html>

在这里插入图片描述

总结： 会发现添加了enumerable属性后，不仅可以枚举了，颜色也变深了。

但是会发现一个问题，就是无法修改

<!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>回顾Object.defineproperty方法</title>
</head>
<body>

    <script type="text/javascript">
        let person = {
            name:'张三',
            sex:'男'
            // age:18
        }

        Object.defineProperty(person,'age',{
            value:18,
            enumerable:true, //控制属性是否可以枚举，默认值是false
        })

        console.log(Object.keys(person));
        console.log(person)
        person.age = 19;
        console.log(person)
    </script>
    
</body>
</html>

在这里插入图片描述

不是用Object.defineproperty的是可以修改的

在这里插入图片描述

4.使用writable

在这里插入图片描述

5.使用configurable

正常情况下，是可以任意删除属性的

在这里插入图片描述

使用Object.defineproperty的
在这里插入图片描述

添加configurable属性的
在这里插入图片描述

6.使用get函数

有个场景：如下代码，我想在控制台上让其number修改后，person.age也跟着改变

<!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>回顾Object.defineproperty方法</title>
</head>
<body>

    <script type="text/javascript">
        let number = 18;
        let person = {
            name:'张三',
            sex:'男',
            age:number
        }

        // Object.defineProperty(person,'age',{
        //     value:18,
        //     enumerable:true, //控制属性是否可以枚举，默认值是false
        //     writable:true, //控制属性是否可以被修改，默认值是false
        //     configurable:true //控制属性是否可以被删除，默认值是false
        // })

        console.log(person);
    </script>
    
</body>
</html>

在这里插入图片描述

解决方案：使用Object.defineproperty里的get函数

<!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>回顾Object.defineproperty方法</title>
</head>
<body>

    <script type="text/javascript">
        let number = 18;
        let person = {
            name:'张三',
            sex:'男',
            // age:number
        }

        Object.defineProperty(person,'age',{
            // value:18,
            // enumerable:true, //控制属性是否可以枚举，默认值是false
            // writable:true, //控制属性是否可以被修改，默认值是false
            // configurable:true //控制属性是否可以被删除，默认值是false

            // 当有人读取person的age属性时，get函数就会被调用，且返回值就是age的值
            get:function(){
                return number;
            }
        })

        console.log(person);
    </script>
    
</body>
</html>

在这里插入图片描述

会发现有个 get age:f() 刚好对应get函数对应的age属性

7.使用set函数

<!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>回顾Object.defineproperty方法</title>
</head>
<body>

    <script type="text/javascript">
        let number = 18;
        let person = {
            name:'张三',
            sex:'男',
            // age:number
        }

        Object.defineProperty(person,'age',{
            // value:18,
            // enumerable:true, //控制属性是否可以枚举，默认值是false
            // writable:true, //控制属性是否可以被修改，默认值是false
            // configurable:true //控制属性是否可以被删除，默认值是false

            // 当有人读取person的age属性时，get函数（getter）就会被调用，且返回值就是age的值
            get:function(){
                return number;
            },

            // 当有人修改person的age属性时，set函数（setter）就会被调用，且会受到修改的具体指
            set(value){
                console.log('有人修改了age属性，且值是',value);
            }
        })

        console.log(person);
    </script>
    
</body>
</html>

在这里插入图片描述

会发现person的age并没有发生变化，因为get函数会返回age的值，而get函数return的是number这个变量，如果需要修改，则在set函数中添加number=value;

在这里插入图片描述

在这里插入图片描述

Es6的Object.defineProperty方法
weixin_42555053的博客
12-02 1141
Object.defineProperty()方法直接在一个对象上定义一个新属性，或者修改一个已经存在的属性，并返回这个对象 value：设置属性的值 writable：值是否可以重写。 true|false enumerable: 目标属性是否考可以被枚举。 true | false configurable: 目标属性是否可以被删除或是可以在此修改特性 true|false set：目标属性设置值的方法 get：目标属性获取值的方法 假
【JS】Object.defineProperty与Proxy
owo_ovo的博客
08-02 1899
【JS】Object.defineProperty与Proxy
ES6 系列之 defineProperty 与 proxy
大灰狼的小绵羊哥哥的博客
03-19 419
前言 我们或多或少都听过“数据绑定”这个词，“数据绑定”的关键在于监听数据的变化，可是对于这样一个对象： varobj={value:1}，我们该怎么知道 obj发生了改变呢？ definePropety ES5提供了 Object.defineProperty 方法，该方法可以在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。 语法 Object.definePr...
Es6的Object.defineProperty方法（重点详解）
qq_51572290的博客
06-10 636
Es6的Object.defineProperty()方法，直接在一个对象上定义一个新属性，或者修改一个已经存在的属性，并返回这个对象
详谈Object.defineProperty 及实现数据双向绑定
10-15
随着 ES6 的发布，`Proxy` 对象提供了一种更加灵活且强大方式来拦截对象操作，如读取、设置、枚举、删除属性等，因此 Vue.js 3.x 开始使用 `Proxy` 替代 `Object.defineProperty()` 实现数据双向绑定，提高了性能和...
【JS】Object.defineProperty与Proxy的对比并通过Vue2、3的实现证明Proxy性能优于Object.defineProperty
最新发布
owo_ovo的博客
09-24 1541
【JS】Object.defineProperty与Proxy的对比并通过Vue2、3的实现证明Proxy性能优于Object.defineProperty
vue.js利用Object.defineProperty实现双向绑定
10-20
此外，为了提高效率，Vue 2.0采用了ES6的Proxy对象来代替Object.defineProperty，Proxy提供了一种机制，允许你拦截对象的底层操作，并可以在这些操作发生前后执行自定义的逻辑。 总结来说，Object.defineProperty是...
前端Vue篇之双向数据绑定的原理、使用 Object.defineProperty() 来进行数据劫持有什么缺点？
星辰迷上大海的博客
02-16 2182
双向数据绑定的原理就是通过数据劫持和模板解析来实现的。这样无论是数据模型的数据发生变化，还是视图的数据发生变化，都会自动地更新另一层的数据。
ES6访问器属性、defineProperty用法
IvyMemphis的博客
11-27 1305
ES对象中的属性1. 属性分类2. 数据属性3. 属性的特性3.1 属性的特性及获取属性的特性3.2 设置属性的特性3.3 用Object.defineProperty设置属性特性3.4 用Object.defineProperties设置属性特性4. 访问器属性4.1 访问器属性的相关概念4.2 访问器属性的特性4.3 访问器属性的用法示例5. 内部属性 1. 属性分类 ES中的对象，就是属性的集合 属性分为两类： 命名属性： 数据属性 访问器属性 内部属性（ES内部定义） 2. 数据属性
ES6中Object.defineProperty()方法的使用
特战程序员
06-02 563
!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> var obj = { id:1, name:"李导演", age:22 } console.log(obj); Object.defineProperty(obj,"sex",{ value.
Object.defineProperty方法（详解）
热门推荐
weixin_46726346的博客
04-20 7万+
OK，这一篇主要想说一下Object.defineProperty这个方法。 这个方法也是Vue数据双向绑定原理的常见面试题 所以也是有必要好好掌握的哦 首先我们知道JS中是支持面向对象编程的，也是有着对象和类这样的概念。 我们常见创建对象的方法应该是这样： var p1 ={ name:"lisi", } 那我们Object.defineProperty这个方法有什么用呢? 这个方法接收三个参数: 1.属性所在的对象 2.属性的名字 3.一个描述符对象 这个描述符对象是个什么东西呢？ 他可以
为什么对象的有些属性在 Chrome 控制台中显示是淡色的
生产队队长
03-09 1188
淡色属性代表不可枚举！注意不可枚举的属性会影响 for ... in、Object.keys()、JSON.stringify() 等的结果！ function Person() { this.name = 'ifer'; } Person.prototype.age = 18; const p = new Person(); Object.defineProperty(p, 'sex', { value: 'man', // 内容 writable: true, // 修改 .
Object.defineProperty()
^_^
10-24 458
Object.defineProperty( ) 这个方法在开发中并不会使用到，但是呢 这可是vue2响应式的核心 so~ 要不要学一学？ 我们先来分析一下这个单词defineProperty （define：定义、Property：属性）连起来读就是定义属性 既然说到了定义属性 并且呢 是Object上的方法，顾名思义往对象上定义属性呗~那和我们之间定义属性有什么区别呢？Object.defineProperty(要定义属性的对象,要定义或修改的属性的名称,要定义或修改的属性描述符（是一个对象
ES6系列学习（1）
yangyang的专栏
04-25 327
来源： https://www.bilibili.com/video/av47304735/?p=1 https://www.youtube.com/watch?v=5s35h_6v4ZI&list=PLCRqr1mERvdJ0IZMD1U4oSB7k0gyAjyIx 1.var let const const只是保证引用地址不变，所以变量里面内容可变。 const person = { ...
ES5 —— 新增方法【Object.defineProperty()】
HuoZhiyan 的博客
04-27 798
文章目录一、数组方法二、Object.defineProperty() 一、数组方法 迭代（遍历）方法：forEach()、map()、filter()、some()、every()。 forEach() array.forEach(function(currentValue, index, arr)) currentValue：数组当前项的值 index：数组当前项的索引 arr：数组对象本身 let arr = [1, 2, 3] let sum = 0 arr.fo
javascript 回顾一下 Proxy Reflect
cyadyx的博客
09-28 806
文章目录一、Proxy二、使用步骤1.引入库2.读入数据总结 一、Proxy 对象用于定义基本操作的自定义行为（如属性查找、赋值、枚举、函数调用等）。 二、使用步骤 1.引入库 代码如下（示例）： import numpy as np import pandas as pd import matplotlib.pyplot as plt import seaborn as sns import warnings warnings.filterwarnings('ignore') import ss
利用defineProperty实现数据的双向绑定
章鱼小丸子
08-01 4943
vue.js如何实现数据的双向绑定呢？ 与angular不同。 vue利用的是es5的defineproperty特性。1.一个小例子<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <input type="text" id="demo">
掌握JavaScript Object.defineProperty()用法
- 在ES6及更高版本的环境中，可以使用Proxy对象和Reflect API来替代或增强Object.defineProperty()的使用。 通过深入理解Object.defineProperty()的这些知识点，开发者可以更加灵活和高效地控制JavaScript对象的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值