Object.defineProperty用法详解,简单易懂!学起来嘎嘎快!

简介: 【10月更文挑战第20天】Object.defineProperty用法详解,简单易懂!学起来嘎嘎快!

Object.defineProperty()

静态方法Object.defineProperty() 直接在对象上定义新属性,或修改对象上现有的属性,并返回该对象。

语法:

Object.defineProperty(obj, prop, descriptor)

参数

默认值/子属性 默认值 含义
obj 要在其上定义属性的对象。 Object
prop 要定义或修改的属性的名称或名称。 sting
descriptor 正在定义或修改的属性的描述符。Object configurable false 是否可以删除或编辑
enumerable false 能否枚举
value undefined**
writable false 能否修改
get
set

创建一个对象obj,并定义一些值。再创建一个空对象target

        var obj = {
            count : 0,
            list : [1,2,4]
        }
        var target = {};

功能一:通过value设置属性值

由于Object.defineProperty可以给对象定义属性,我们通过value,可以动态地将obj对象的属性动态地添加给target中。

for (let key in obj){
            Object.defineProperty(target,key,{
                value: obj[key]
            })
        }
console.log(target);

输出结果:
成功获取到了obj中的属性值

功能二:通过writable设置是否可写/修改

1.当writable的值为false时

尝试将count的值从0改为10

    for (let key in obj){
            Object.defineProperty(target,key,{
                value: obj[key],
                writable: false
            })
        }
        target.count = 10;//将count中的值0修改成10
        console.log(target.count);  //0  当writable为false时,无法改变count的值

当writable为false时,无法改变count的值

2.当writable的值为true时
尝试将count的值从0改为10

    for (let key in obj){
            Object.defineProperty(target,key,{
                value: obj[key],
                writable: true
            })
        }
        target.count = 10;//将count中的值0修改成10
        console.log(target.count);  //10

功能三:通过enumerable设置属性值是否允许遍历

在上面的代码基础上,我们添加enumerable属性并尝试遍历target中的属性值

1.当enumerable的值为false时

       for (let key in obj){
            Object.defineProperty(target,key,{
                value: obj[key],
                writable:true,
                enumerable: false
            })
        }
        for (key in target){
                console.log(key);//遍历target中的属性值并打印,此时结果为空
        }

2.当enumerable的值为true时

   for (let key in obj){
            Object.defineProperty(target,key,{
                value: obj[key],
                writable:true,
                enumerable: ture
            })
        }
        for (key in target){
                console.log(key);//遍历target中的属性值并打印,此时结果为空
        }

输出结果:
成功遍历对象并打印出结果

功能四:通过configurable设置属性是否可删

在上面的代码基础上,我们添加configurable属性并尝试用delete方法删除target中的属性

1.当configurable的值为false时

for (let key in obj){
            Object.defineProperty(target,key,{
                value: obj[key],
                writable:true,
                enumerable: false,
                configurable: false
            })
        }
        delete target.count;//删除count属性
        console.log(target);

输出结果:
由于此方法为fasle时,属性值无法删除,target中仍有count属性

2.当configurable的值为true时

 for (let key in obj){
            Object.defineProperty(target,key,{
                value: obj[key],
                writable:true,
                enumerable: false,
                configurable: true
            })
        }
delete target.count;//删除count属性

功能五:通过get方法获取属性的值

【注意!】当设置get方法时,不能有value和writable方法,否则会报错
get方法的值是一个函数,此函数不需要参数

 for (let key in obj){
                Object.defineProperty(target,key,{
                    //value: obj[key],
                    //writable:true,
                    enumerable: false,
                    configurable: true,
                    get: function(){
                        return obj[key]
                    }
                })
            }
console.log(target.count);

输出结果:
成功获取到了指定属性(count)的值

功能六:通过set方法设置属性的值

set方法的值也是一个函数,定义时会自动注入一个参数,此参数会设置属性的值

           for (let key in obj){
                Object.defineProperty(target,key,{
                    //value: obj[key],
                    //writable:true,
                    enumerable: false,
                    configurable: true,
                    get: function(){
                        return obj[key]
                    },
                    set: function(val){
                        console.log(val);//打印设置好的值
                    }
                })
            }
            target.count = 10;//修改count属性的值为10

输出结果:
成功修改了指定属性(count)的值

【注意】set方法只有在设置/修改指定属性值的时候,才会触发,即调用set下的匿名函数

相关文章
|
6月前
|
SQL Java 关系型数据库
MyBatis的动态SQL之OGNL(Object-Graph Navigation Language)表达式以及各种标签的用法
MyBatis的动态SQL之OGNL(Object-Graph Navigation Language)表达式以及各种标签的用法
99 0
|
6月前
|
前端开发 JavaScript 容器
你知道css中的object-fit的用法吗?
你知道css中的object-fit的用法吗?
153 0
|
Java
JAVA_Object 类的用法
JAVA_Object 类的用法
57 0
|
JavaScript 开发者
ES6之Object.assign()用法,Object.assign()到底是浅拷贝还是深拷贝?
ES6之Object.assign()用法,Object.assign()到底是浅拷贝还是深拷贝?
8452 1
ES6 Object.assign()的用法
ES6 Object.assign()的用法
126 0
Object.defineProperty熬夜整理的用法,保证你看的明白!
Object.defineProperty熬夜整理的用法,保证你看的明白!
Object.defineProperty熬夜整理的用法,保证你看的明白!
成功解决AttributeError: 'BasicLSTMCell' object has no attribute '_kernel'+python下划线用法的几种常见用法理解
成功解决AttributeError: 'BasicLSTMCell' object has no attribute '_kernel'+python下划线用法的几种常见用法理解
Object C学习笔记21-typedef用法
  在上一章的学习过程中遇到了一个关键字typedef,这个关键字是C语言中的关键字,因为Object C是C的扩展同样也是支持typedef的。      一. 基本作用     typedef是C中的关键字,它的主要作用是给一个数据类型定义一个新的名称,这些类型报告内部数据类型,比如int,char 还有自定义类型struct,enum等。
1049 0
Object C学习笔记22-#define 用法
  上一篇讲到了typedef 关键字的使用,可以参考文章 Object C 学习笔记--typedef用法 。而在c中还有另外一个很重要的关键字#define.   一. #define 简介     在C中利用预处理代码,可以让你的代码变得更加具有可读性,更加符合个人的编码风格,这也是C的强大之处。
1092 0