Object.defineProperty()

参考:https://segmentfault.com/a/1190000007434923

定义:
方法会直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象。
语法  
Object.defineProperty(obj,prop,descriptor)  
#### 参数
obj
需要定义属性的对象。  
prop
需定义或修改的属性的名字。  
descriptor
将被定义或修改的属性的描述符。  
返回值  
==返回传入函数的对象,即第一个参数obj==

```
value: 设置属性的值
writable: 值是否可以重写。true | false
enumerable: 目标属性是否可以被枚举。true | false
configurable: 目标属性是否可以被删除或是否可以再次修改特性 true | false
```

一、writable  default : false
当writable 为false 时 属性值不允许被修改

var  obj={};
Object.defineProperty(obj,"a",
{
value:1
});
obj.a++;
console.dir(obj.a); // 1 02:
var obj={};
Object.defineProperty(obj,"a",
{
value:"shangyy,
writable:true
});
obj.a="huyating";
console.dir(obj.a); //huyating

二、 enumerable  默认为false 是否允许属性被遍历

var  obj={uname:"shangyy",age:18};
Object.defineProperty(obj,"a",
{
value:1,
writable:false,
enumerable:false
});
console.dir(Object.keys(obj)); // 0: "uname" 1: "age" var obj={uname:"shangyy",age:18};
Object.defineProperty(obj,"a",
{
value:1,
writable:false,
enumerable:false
});
console.dir(Object.keys(obj)); // 0: "uname" 1: "age" 2:"a"

三、configurable  
是否可以删除目标属性或是否可以再次修改属性的特性(writable, configurable, enumerable)。设置为true可以被删除或可以重新设置特性;设置为false,不能被可以被删除或不可以重新设置特性。默认为false。

这个属性起到两个作用:

目标属性是否可以使用delete删除

目标属性是否可以再次设置特性
var obj = {}

#### 001 测试目标属性是否能被删除
```

//第一种情况:configurable设置为false,不能被删除。
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false,
    enumerable:false,
    configurable:false
});
//删除属性
delete obj.newKey;
console.log( obj.newKey ); //hello

//第二种情况:configurable设置为true,可以被删除。
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false,
    enumerable:false,
    configurable:true
});
//删除属性
delete obj.newKey;
console.log( obj.newKey ); //undefined
```
002 测试是否可以再次修改特性
```

//第一种情况:configurable设置为false,不能再次修改特性。
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false,
    enumerable:false,
    configurable:false
});

//重新修改特性
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:true,
    enumerable:true,
    configurable:true
});
console.log( obj.newKey ); //报错:Uncaught TypeError: Cannot redefine property: newKey

//第二种情况:configurable设置为true,可以再次修改特性。
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false,
    enumerable:false,
    configurable:true
});

//重新修改特性
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:true,
    enumerable:true,
    configurable:true
});
console.log( obj.newKey ); //hello
```

#### ****getter或setter
==注意:当使用了getter或setter方法,不允许使用writable和value这两个属性==  
注意:get或set不是必须成对出现,任写其一就可以。如果不设置方法,则get和set的默认值为undefined

var obj = {};
var initValue = 'hello';
Object.defineProperty(obj,"newKey",{
get:function (){
//当获取值的时候触发的函数
return initValue;
},
set:function (value){
//当设置值的时候触发的函数,设置的新值通过参数value拿到
initValue = value;
}
});
//获取值
console.log( obj.newKey ); //hello //设置值
obj.newKey = 'change value';
console.log( obj.newKey ); //change value

四、Object.defineProperty总结的更多相关文章

  1. 深入了解Object.defineProperty

    原来写文章都是一次写两三个小时写完,偶尔看到一个人的博客了解到还有草稿箱这个功能,所以以后写文章的时候就舒服多了哈哈,可以存起来再发,不需要一口气写完了 最近一直在看JavaScript高级程序设计, ...

  2. 深入理解 Object.defineProperty 及实现数据双向绑定

    Object.defineProperty() 和 Proxy 对象,都可以用来对数据的劫持操作.何为数据劫持呢?就是在我们访问或者修改某个对象的某个属性的时候,通过一段代码进行拦截行为,然后进行额外 ...

  3. JS属性描述符之Object.defineProperty()定义对象属性特性

    一.Object.defineProperty的作用 用来给对象新增属性,和修改对象中的属性. 二.JS对象中的描述符 js对象中两种属性描述符:数据描述符和存取描述符(访问描述符). 注意事项: 1 ...

  4. Vue双向绑定的实现原理系列(一):Object.defineproperty

    了解Object.defineProperty() github源码 Object.defineProperty()方法直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象. ...

  5. javascript-object对象属性操作之Object.defineProperty

    一.基本用法简介 声明一个简单的对象,如下 var obj = { name: 'ldld' } 我们可以用Object.defineProperty来声明这个对象 var obj = {} Obje ...

  6. 双向绑定Proxy VS Object.defineProperty

    Vue3.0的双向绑定将使用Proxy代替Object.defineProperty,据尤大说,速度提升了1倍. 本文我们来探讨一下Proxy对比Object.defineProperty究竟有哪些优 ...

  7. javascript之Object.defineProperty的奥妙

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

  8. Object.defineproperty实现数据和视图的联动

    Object.defineproperty语法 var o = {}; // 创建一个新对象 // Example of an object property added with definePro ...

  9. Vue 双向数据绑定原理分析 以及 Object.defineproperty语法

    第三方精简版实现 https://github.com/luobotang/simply-vue Object.defineProperty 学习,打开控制台分别输入以下内容调试结果 userInfo ...

随机推荐

  1. 11.scrapy框架持久化存储

    今日概要 基于终端指令的持久化存储 基于管道的持久化存储 今日详情 1.基于终端指令的持久化存储 保证爬虫文件的parse方法中有可迭代类型对象(通常为列表or字典)的返回,该返回值可以通过终端指令的 ...

  2. Loj 3058. 「HNOI2019」白兔之舞

    Loj 3058. 「HNOI2019」白兔之舞 题目描述 有一张顶点数为 \((L+1)\times n\) 的有向图.这张图的每个顶点由一个二元组 \((u,v)\) 表示 \((0\le u\l ...

  3. WPF自定义控件(四)の自定义控件

    在实际工作中,WPF提供的控件并不能完全满足不同的设计需求.这时,需要我们设计自定义控件. 这里LZ总结一些自己的思路,特性如下: Coupling UITemplate Behaviour Func ...

  4. Linux三剑客-SED

    1.Sed是什么 Sed:字符流编辑器,Stream Editor 2.Sed功能与版本 处理日志文件,日志,配置文件等 增加.删除.修改.查询 sed --version 可以通过man sed 来 ...

  5. 将逗号分隔的字符串转换为Python中的列表

    给定一个字符串: 它是由逗号分隔的几个值的序列: mStr = '192.168.1.1,192.168.1.2,192.168.1.3' 如何将字符串转换为列表? mStr = ['192.168. ...

  6. 解决y7000笔记本ubuntu下wifi无法连接问题

    查看wifi与蓝牙硬件开关,发现ideapad的硬件模块都是关闭的 rfkill list all 打开终端 输入 sudo gedit /etc/rc.local 写入以下内容 进行保存 #!/bi ...

  7. forall 与 for loop 案例

    create table a_tab(ver number,id number);create table b_tab(ver number,id number);set timing on DECL ...

  8. Linux:Day6(上) egrep、条件测试

    egrep及扩展的正则表达式: egrep = grep -E 扩展正则表达式的元字符: 或者:a | b 练习: 1.显示当前系统root.centos或user1用户的默认shell和UID: 2 ...

  9. 【ES6】export和important使用区别

    export命令 export { name1, name2, …, nameN }; export { variable1 as name1, variable2 as name2, …, name ...

  10. 8.oop-多态

    一.继承1.定义:子类继承父类,会继承父类的属性和方法2.语法:extends关键字 子类 extends 父类3.特点:java中的继承是单一继承,子类只能继承一个父类,但是父类可以有多个子类4.用 ...