js中Object.defineProperty()方法的解释
菜菜: “老大,那个, Object.defineProperty 是什么鬼?”
假设我们有个对象 user ; 我们要给它增加一个属性 name , 我们会这么做
1
2
3
|
var user = {}; user.name= "狂奔的蜗牛" ; console.log(user); //{name: "狂奔的蜗牛"} |
如果想要增加一个sayHi方法叻?
1
2
|
user.sayHi= function () { console.log( "Hi !" ) }; console.log(user); //{name: "狂奔的蜗牛", sayHi: ƒn} |
Object.defineProperty
就是做这个的
那么Object.defineProperty 怎么用?
Object.defineProperty 需要三个参数(object , propName , descriptor)
1 object 对象 => 给谁加
2 propName 属性名 => 要加的属性的名字 【类型:String】
3 descriptor 属性描述 => 加的这个属性有什么样的特性【类型:Object】
那么descriptor
这个是个对象 ,他有那些属性呢 ? 别着急我们一个一个说;
既然可以给一个对象增加属性,那么我们用它来做一下给 user添加 name属性,代码是这样的
1
2
3
4
5
|
var user = {}; Object.defineProperty(user, "name" ,{ value: "狂奔的蜗牛" }) console.log(user); //{name: "狂奔的蜗牛"} |
说明 是的还是那个经典的value
属性,他就是设置属性值的。
等等,属性值只能为字符串吗?我们的 number function Object boolean 等呢?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
var user = {}; Object.defineProperty(user, "name" ,{ value: "狂奔的蜗牛" }) Object.defineProperty(user, "isSlow" ,{ value: true }) Object.defineProperty(user, "sayHi" ,{ value: function () { console.log( "Hi !" ) } }) Object.defineProperty(user, "age" ,{ value:12 }) Object.defineProperty(user, "birth" ,{ value:{ date: "2018-06-29" , hour: "15:30" } }) console.log(user); |
说明 事实证明任何类型的数据都是可以的哦~
问题又来了,如果 user对象已经有了name属性,我们可以通过Object.defineProperty改变这个值吗?
我们来试试
1
2
3
4
5
6
7
|
var user = {}; Object.defineProperty(user, "name" ,{ value: "狂奔的蜗牛" }) console.log(user); user.name= "新=>狂奔的蜗牛" console.log(user); |
咦??为什么我改了没作用勒??
原因:上边说了descriptor有很多属性,除了value属性还有个 writable【顾名思义属性是否可以被重新赋值】接受数据类型为 boolean(默认为false) true => 支持被重新赋值 false=>只读
哦哦,原来如果我没设置writable值的时候就默认只读啊,所以才改不掉
那我们看看,设置为true,是不是就可以改掉了。
1
2
3
4
5
6
7
8
|
var user = {}; Object.defineProperty(user, "name" ,{ value: "狂奔的蜗牛" , writable: true }) console.log(user); user.name= "新=>狂奔的蜗牛" console.log(user); |
这个descriptor还有其他的属性吗?enumerable【顾名思义属性是否可以被枚举】接受数据类型为 boolean(默认为false) true => 支持被枚举 false=>不支持
额。。。枚举??什....什么意思?
假设我们想知道这个 user对象有哪些属性我们一般会这么做
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
var user ={ name: "狂奔的蜗牛" , age:25 } ; //es6 var keys=Object.keys(user) console.log(keys); // ['name','age'] //es5 var keys=[]; for (key in user){ keys.push(key); } console.log(keys); // ['name','age'] |
如果我们使用 Object.的方式定义属性会发生什么呢?我们来看下输出
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
var user ={ name: "狂奔的蜗牛" , age:25 } ; //定义一个性别 可以被枚举 Object.defineProperty(user, "gender" ,{ value: "男" , enumerable: true }) //定义一个出生日期 不可以被枚举 Object.defineProperty(user, "birth" ,{ value: "1956-05-03" , enumerable: false }) //es6 var keys=Object.keys(user) console.log(keys); // ["name", "age", "gender"] console.log(user); // {name: "狂奔的蜗牛", age: 25, gender: "男", birth: "1956-05-03"} console.log(user.birth); // 1956-05-03 |
说明 很明显,我们定义为 enumerable=false
的birth
属性并没有被遍历出来,遍历 => 其实就是枚举(个人理解啦,不喜勿喷哦~)
总结 enumerable
属性取值为 布尔类型 true | false
默认值为 false
,为真属性可以被枚举;反之则不能。此设置不影响属性的调用和 查看对象的值。
configurable
是接下来我们要讲的一个属性,这个属性有两个作用:
1 属性是否可以被删除
2 属性的特性在第一次设置之后可否被重新定义特性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
var user ={ name: "狂奔的蜗牛" , age:25 } ; //定义一个性别 不可以被删除和重新定义特性 Object.defineProperty(user, "gender" ,{ value: "男" , enumerable: true , configurable: false }) //删除一下 delete user.gender; console.log(user); //{name: "狂奔的蜗牛", age: 25, gender: "男"} //重新定义特性 Object.defineProperty(user, "gender" ,{ value: "男" , enumerable: true , configurable: true }) // Uncaught TypeError: Cannot redefine property: gender //会报错,如下图 |
设置为 true
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
var user ={ name: "狂奔的蜗牛" , age:25 } ; //定义一个性别 可以被删除和重新定义特性 Object.defineProperty(user, "gender" ,{ value: "男" , enumerable: true , configurable: true }) //删除前 console.log(user); // {name: "狂奔的蜗牛", age: 25, gender: "男"} //删除一下 delete user.gender; console.log(user); // {name: "狂奔的蜗牛", age: 25} //重新定义特性 Object.defineProperty(user, "gender" ,{ value: "男" , enumerable: true , configurable: false }) //删除前 console.log(user); // {name: "狂奔的蜗牛", age: 25, gender: "男"} //删除一下 删除失败 delete user.gender; console.log(user); // {name: "狂奔的蜗牛", age: 25, gender: "男"} |
总结 configurable
设置为 true 则该属性可以被删除和重新定义特性;反之属性是不可以被删除和重新定义特性的,默认值为false(Ps.除了可以给新定义的属性设置特性,也可以给已有的属性设置特性哈
)
最后我们来说说,最重要的两个属性 set
和get
(即存取器描述:定义属性如何被存取),这两个属性是做什么用的呢?我们通过代码来看看
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
var user ={ name: "狂奔的蜗牛" } ; var count = 12; //定义一个age 获取值时返回定义好的变量count Object.defineProperty(user, "age" ,{ get: function (){ return count; } }) console.log(user.age); //12 //如果我每次获取的时候返回count+1呢 var user ={ name: "狂奔的蜗牛" } ; var count = 12; //定义一个age 获取值时返回定义好的变量count Object.defineProperty(user, "age" ,{ get: function (){ return count+1; } }) console.log(user.age); //13 |
接下来我不用解释了吧,你想在获取该属性的时候对值做什么随你咯~
来来来,我们看看 set,不多说上代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
var user ={ name: "狂奔的蜗牛" } ; var count = 12; //定义一个age 获取值时返回定义好的变量count Object.defineProperty(user, "age" ,{ get: function (){ return count; }, set: function (newVal){ count=newVal; } }) console.log(user.age); //12 user.age=145; console.log(user.age); //145 console.log(count); //145 //等等,如果我想设置的时候是 自动加1呢?我设置145 实际上设置是146 var user ={ name: "狂奔的蜗牛" } ; var count = 12; //定义一个age 获取值时返回定义好的变量count Object.defineProperty(user, "age" ,{ get: function (){ return count; }, set: function (newVal){ count=newVal+1; } }) console.log(user.age); //12 user.age=145; console.log(user.age); //146 console.log(count); //146 |
说明 注意:当使用了getter或setter方法,不允许使用writable和value这两个属性(如果使用,会直接报错滴)
get
是获取值的时候的方法,类型为 function
,获取值的时候会被调用,不设置时为 undefined
set
是设置值的时候的方法,类型为 function
,设置值的时候会被调用,undefined
get或set不是必须成对出现,任写其一就可以
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
var user ={ name: "狂奔的蜗牛" } ; var count = 12; //定义一个age 获取值时返回定义好的变量count Object.defineProperty(user, "age" ,{ get: function (){ console.log( "这个人来获取值了!!" ); return count; }, set: function (newVal){ console.log( "这个人来设置值了!!" ); count=newVal+1; } }) console.log(user.age); //12 user.age=145; console.log(user.age); //146 |
【完结】
Object.defineProperty
方法直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象
- value: 设置属性的值
- writable: 值是否可以重写。true | false
- enumerable: 目标属性是否可以被枚举。true | false
- configurable: 目标属性是否可以被删除或是否可以再次修改特性 true | false
- set: 目标属性设置值的方法
- get:目标属性获取值的方法
js中Object.defineProperty()方法的解释的更多相关文章
- js中Object.defineProperty()和defineProperties()
在介绍js中Object.defineProperty()和defineProperties()之前,我们了解下js中对象两种属性的类型:数据属性和访问器属性. 数据属性 数据属性包含一个数据的位置, ...
- vue2.x版本中Object.defineProperty对象属性监听和关联
前言 在vue2.x版本官方文档中 深入响应式原理 https://cn.vuejs.org/v2/guide/reactivity.html一文的解释当中,Object.defineProperty ...
- Vue el与data的两种写法 && Object.defineProperty方法
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...
- Object.defineProperties()和Object.defineProperty()方法
Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象. 语法:Object.defineProperty(obj, pro ...
- jQuery与JS中的map()方法使用
1.jquery中的map()方法 首先看一个简单的实例: $("p").append( $("input").map(function(){ return $ ...
- ES6中Object.assign() 方法
ES6中Object.assign() 方法 1. 对象合并Object.assign 方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象上.如下代码演示: var targ ...
- Object.defineProperty方法 使用
Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象. 语法: Object.defineProperty(obj, pr ...
- Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象。
Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象. 语法EDIT Object.defineProperty(obj, ...
- JavaScript Object.defineProperty()方法详解
Object.defineProperty() 方法直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象. 语法 Object.defineProperty(obj, prop ...
随机推荐
- proxool连接池配置方法
proxool.properties: jdbc-1.proxool.alias=test #jdbc-1.proxool.driver-class=com.mysql.jdbc.Driver #jd ...
- 从“中产梦”中醒来,好好打工吧
"中产"定义 自打"中产阶级/阶层"概念出现,总有人试图给出定义.搞不清何为"中产"却试图定义"中产阶级/阶层",注定是 ...
- GeneXus笔记本—常用函数(上)
国庆放假没事怎么办?写点笔记充会儿电! ≖‿≖✧ 哈哈哈 !!最近在参与公司的其中一个项目中,发现了一些函数自己没见过 也没使用过,但是这些函数都是GeneXus中自带的一些 这此记录的目的就是为 ...
- 2018-8-10-win10-UWP-发邮件
title author date CreateTime categories win10 UWP 发邮件 lindexi 2018-08-10 19:17:19 +0800 2018-2-13 17 ...
- (转载)python判断一个字符串是否是小数
转载自:牛牛杂货铺 最近在写代码的时候,发现一个问题,想判断一个字符串是不是一个合法的小数,发现字符串没有内置判断小数的方法,然后就写了一个判断字符串是否是小数,可以判断正负小数,代码如下: def ...
- wireshark 抓包加密
使用openssl 加密传输数据 #是否使用SLL连接,1是使用SSLCon=1 配置文件配置是否开启ssl
- 《深入学习Redis(2):持久化》笔记
参考 https://www.cnblogs.com/kismetv/p/9137897.html 一.高可用概述 提供正常服务:主从分离,快速容灾技术,数据容量的扩展.数据安全不会丢失. 持久 ...
- 【串线篇】Mybatis之缓存原理
所谓二级缓存是名称空间级别的缓存,什么意思呢? TeacherDao.xml首行 <mapper namespace="com.atguigu.dao.TeacherDao" ...
- 环境变量,env, set
separate: win(;), linux(:) liunx 写 export PYTHONPATH=.:./lib:./libraryexport http_proxy=http://proxy ...
- Spring----事件(Application Event)
1.概述 1.1.Spring的事件 为Bean与Bean之间的消息通信提供了支持: 当一个Bean处理完一个任务后,希望另一个Bean知道并能做出相应的处理,这时我们需要 让另一个Bean ...