Object.defineProperty方法
2018-09-11 10:01
405 查看
vue.js的双向数据绑定就是通过Object.defineProperty方法实现的,俗称属性拦截器
Object.defineProperty()
方法会直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象
// 语法: /* * @param: obj:需要定义属性的对象; * prop:需要定义或修改的属性; * descriptor:将被定义或修改属性的描述符 */ Object.defineProperty(obj,prop,descriptor)
对象里目前存在的属性描述符主要有两种形式: 数据描述符和存取描述符.
数据描述符: 拥有可写或不可写值的属性*
可选键值: configurable: 当且仅当configurable为true时,改属性描述符才能够被改变,也能被删除 enumerable: 当其值为true时,该属性才能够出现在对象的枚举属性中,默认为false writable: 当且仅当该属性的值为true时,该属性才能被赋值运算符改变, 默认为false。 value: 该属性对应的值,可以是任意有效的javascript的值(数值,对象,函数等),默认为undefined
存取描述符: 由一对getter-setter函数功能来描述的属性*
可选键值: configurable: 当且仅当configurable为true时,改属性描述符才能够被改变,也能被删除 enumerable: 当其值为true时,该属性才能够出现在对象的枚举属性中,默认为false get: 给属性提供getter的方法,如果没有 getter 则为undefined。当我们读取某个属性的时候,其实是在对象内部调用了该 方法,此方法必须要有return语句。该方法返回值被用作属性值。默认为 undefined set:设置属性值的方法, 如果没有 setter 则为 undefined。该方法将接受唯一参数,并将该参数的新值分配给该属性。默认为 undefined。也就是说,当我们设置某个属性的时候,实际上是在对象的内部调用了该方法
note:两者不能同时定义, 否则报错==
实例:
var a = {}; Object.defineProperty(a, 'b', { set: function(newValue) { console.log('赋值操作, 赋值' + newValue); }, get: function() { console.log('取值操作'); return 2; } }); a.b = 1; // 赋值操作,赋值1 a.b; // 取值操作2
Object对象有一个freeze的方法,用于实现对象属性和方法的不可更改
// 使用方法: const arr = [1,2,3,4]; Object.freeze(arr); // 变量arr不可更改 arr.push(5); // 报错:不能添加属性
Object.definePropperty也可以实现规定变量的不可更改
const obj = { key: 'chris', vlaue: 'person' }; Object.defineProperty(obj, 'key', { configurable: false, // 不可删除 writable: false, // 不可写 });
相关文章推荐
- JavaScript使用Object.defineProperty方法实现双数据绑定
- JavaScript Object.defineProperty()方法详解
- javascript中的Object.defineProperty()与getOwnPropertyNames ()方法
- JS中的双向数据绑定及Object.defineProperty方法
- JavaScript Object.defineProperty()方法详解
- js中的Object.defineProperty方法
- ECMA5中的Object.defineProperty()方法
- JS中的双向数据绑定及Object.defineProperty方法
- Object.defineProperty方法
- includes方法 使用 Object.defineProperty 扩展 ,解决不兼容问题
- 22、ECMA5给原型对象重新设置构造器的方法Object.defineProperty(p1,p2,p3)
- 面试题:(考察Object.defineProperty(obj,prop,descriptor) 的get方法)
- Object.defineProperty()的set方法除了用于双向绑定还能干嘛?
- ECMAScript5 Object的新属性方法(包含Object.create()、Object.defineProperty()等)
- js中神奇的Object.defineProperty方法
- Object.defineProperty()定义对象方法
- Object.defineProperty()
- js object.create()、Object.defineproperty()、,Object.keys()...for..in,for..each
- Object.defineProperty()