| 十分钟理解Object.defineProperty() | 您所在的位置：网站首页 › meta的属性可以修改吗 › 十分钟理解Object.defineProperty() |
十分钟理解Object.defineProperty()
|
1. 对象的定义与赋值
经常使用的定义与赋值方法obj.prop =value或者obj['prop']=value let Person = {}; Person.name = "Jack"; Person["gender"] = "female"; console.log(Person.name); // Jack console.log(Person.gender); // female console.log(Person); // {name: 'Jack', gender: 'female'} 2. Object.defineProperty()语法说明Object.defineProperty()的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性 Object.defineProperty(obj, prop, desc) obj 需要定义属性的当前对象 prop 当前需要定义的属性名 desc 属性描述符一般通过为对象的属性赋值的情况下，对象的属性可以修改也可以删除，但是通过Object.defineProperty()定义属性，通过描述符的设置可以进行更精准的控制对象属性。 3. 属性的特性以及内部属性javacript 有三种类型的属性 命名数据属性：拥有一个确定的值的属性。这也是最常见的属性 命名访问器属性：通过getter和setter进行读取和赋值的属性 内部属性：由JavaScript引擎内部使用的属性，不能通过JavaScript代码直接访问到，不过可以通过一些方法间接的读取和设置。比如，每个对象都有一个内部属性[[Prototype]]，你不能直接访问这个属性，但可以通过Object.getPrototypeOf()方法间接的读取到它的值。虽然内部属性通常用一个双吕括号包围的名称来表示，但实际上这并不是它们的名字，它们是一种抽象操作，是不可见的，根本没有上面两种属性有的那种字符串类型的属性 4. 属性描述符通过Object.defineProperty()为对象定义属性，有两种形式，且不能混合使用，分别为数据描述符，存取描述符，下面分别描述下两者的区别： 1. 数据描述符 --特有的两个属性（value,writable）注意：当使用了writable和value属性，不允许使用getter或setter这两个方法 writable: 描述对象是否可写(是否只读) 当我们之间在一个对象上定义某个属性时, writable默认为true 当我们通过属性描述符定义一个属性时, writable默认为false let Person = {} Object.defineProperty(Person, 'name', { value: 'jack', writable: true // 是否可以改变 }) let Person = {}; Object.defineProperty(Person, "name", { value: "Jack", // writable默认值是false, 不能改变属性的值 }); Person.name = "rose"; console.log(Person.name); // Jack ------------------------------------------------------------------------------------------- let Person = {}; Object.defineProperty(Person, "name", { value: "Jack", writable: true, // 可以改变value值 }); Person.name = "rose"; console.log(Person.name); // rose注意，如果描述符中的某些属性被省略，会使用以下默认规则： 注意：当使用了getter或setter方法，不允许使用writable和value这两个属性 get：一个给属性提供getter的方法，如果没有getter则为undefined。该方法返回值被用作属性值。默认为undefined。 set：一个给属性提供setter的方法，如果没有setter则为undefined。该方法将接受唯一参数，并将该参数的新值分配给该属性。默认值为undefined。 let Person = {} let temp = null Object.defineProperty(Person, 'name', { get: function () { return temp }, set: function (val) { temp = val } }) let Person = {}; let temp = null; Object.defineProperty(Person, "name", { get: function () { return temp; }, set: function (val) { temp = val; }, }); Person.name = "Jack"; console.log(Person.name, temp); // Jack Jack temp = "rose"; console.log(Person.name, temp); // rose rose 3. 存取器描述当使用存取器描述属性的特性的时候，允许设置以下特性属性： var obj = {}; Object.defineProperty(obj, "newKey", { get: function () {} | undefined, set: function (value) {} | undefined, configurable: true | false, enumerable: true | false, });getter/setter: 当设置或获取对象的某个属性的值的时候，可以提供getter/setter方法。 getter 是一种获得属性值的方法 setter是一种设置属性值的方法。在特性中使用get/set属性来定义对应的方法。 var obj = {}; var initValue = "hello"; Object.defineProperty(obj, "key", { get: function () { //当获取值的时候触发的函数 return initValue; }, set: function (value) { //当设置值的时候触发的函数,设置的新值通过参数value拿到 initValue = value; }, }); //获取值 console.log(obj.key); //hello //设置值 obj.key = "change value"; console.log(obj.key); //change value注意：get或set不是必须成对出现，任写其一就可以。如果不设置方法，则get和set的默认值为undefined 4. 数据描述符和存取描述均具有以下描述符 configrable 描述属性是否配置，以及可否可以通过delete删除(是否可配置) 当我们之间在一个对象上定义某个属性时, configrable默认为true 当我们通过属性描述符定义一个属性时, configrable默认为false enumerable 描述属性是否会出现在for in 或者 Object.keys()的遍历中(是否枚举) 当我们之间在一个对象上定义某个属性时, enumerable默认为true 当我们通过属性描述符定义一个属性时, enumerable默认为false 1. configrable 代码片段分析configurable:false不能删除属性: let Person = {}; Object.defineProperty(Person, "name", { value: "Jack", configurable: false, }); console.log(delete Person.name); // Cannot delete property 'name' of #configurable:false不能重新定义属性: let Person = {}; Object.defineProperty(Person, "name", { value: "Jack", configurable: false, }); Object.defineProperty(Person, "name", { value: "rose", // Cannot redefine property: name });在configurable:false但writable为true`的情况下可以修改属性值: let Person = {}; Object.defineProperty(Person, "name", { value: "Jack", configurable: false, writable: true, }); // 通过属性定义的形式可以修改name的值 Object.defineProperty(Person, "name", { value: "rose", }); console.log(Person.name); // rose // 通过赋值的形式可以修改name的值 Person.name = 'zgc' console.log(Person.name);在configurable:true但writable为false的情况下可以通过属性定义的形式可以修改name的值: let Person = {}; Object.defineProperty(Person, "name", { value: "Jack", configurable: true, writable: false, }); // 通过属性定义的形式可以修改name的值 Object.defineProperty(Person, "name", { value: "rose", }); console.log(Person.name); // rose // 通过赋值的形式不可以修改, 因为writable为flse Person.name = "zgc"; console.log(Person.name); 2. enumerable 代码片段分析 let Person = {}; Object.defineProperty(Person, "name", { value: "Jack", configurable: false, writable: false, // 默认值 }); Person.gender = "male"; Object.defineProperty(Person, "age", { value: 24, enumerable: true, }); console.log(Object.keys(Person)); // ['gender', 'age'] for (let k in Person) { console.log(k); // gender, age }注意：以下二种区别 let Person = {}; Person.gender = "male"; // 等价于 Object.defineProperty(Person, "gender", { value: "male", configurable: true, enumerable: true, writable: true, }); Object.defineProperty(Person, "age", { value: 24, }); // 等价于 Object.defineProperty(Person, "age", { value: 24, configurable: false, enumerable: false, writable: false, });来源：深入浅出Object.defineProperty() |
【本文地址】
公司简介
联系我们