1. 概念
1. mdn定义的defineProperty
2. Object.defineProperty() 方法
1. 会直接在一个对象上定义一个新属性,或者修改一个已经存在的属性,
2. 并返回这个对象。
2. 语法
1. Object.defineProperty(obj, prop, descriptor)
2. 参数:
1. obj 需要定义属性的对象。
2. prop 需定义或修改的属性的名字。
3. descriptor 将被定义或修改的属性的描述符。
3. 返回值
1. 返回传入函数的对象,即第一个参数obj
3. 学习这个属性的目的
1. 该方法允许精确添加或修改对象的属性。
2. 一般情况下,
1. 我们为对象添加属性是通过赋值来创建并显示在属性枚举中
2. (for...in 或 Object.keys 方法), 但这种方式添加的属性值可以被改变,
3. 也可以被删除。而使用 Object.defineProperty() 则允许改变这些额外细节的默认设置。
3. 在写框架的时候
1. 例如,默认情况下,使用 Object.defineProperty() 增加的属性值是不可改变的。
4. 注意:
1. 第三个参数都会为第二个参数(属性的操作)
2. 第二个参数可以是之前已经存在的,也可以是新增加的,对属性的用法的限制
5. 第三个参数对象的取值
1. configurable : true,可以被删除的;默认是false,不可以被删除的;
2. enumerable : true, 可以对第二个参数的属性进行遍历;false默认值,不可以;
3. value : 该属性对应的值。默认为 undefined//新增的就是直接赋值,对象中就存在的就是修改
4. writable :
1. 当且仅当该属性的 writable 为 true 时,该属性才能被赋值运算符改变。
2. 默认为 false。
5. get 和 set
1. 5.1 get
1. 一个给属性提供 getter 的方法,
2. 如果没有 getter 则为 undefined。
3. 该方法返回值被用作属性值
4. undefined
2. set
1. 一个给属性提供 setter 的方法,
2. 如果没有 setter 则为 undefined。
3. 该方法将接受唯一参数,并将该参数的新值分配给该属性。
4. 默认为 undefined。
6. 代码
1. 正常的直接进行创建一个对象
1. 利用对象的动态操作特性进行给对象操作属性
2. 代码
/* * 一般情况下: * 动态给对象添加属性 * 添加的属性值可以被改变 * */ /*var obj = {}; obj.name = 'waxun'; obj['age'] = 18; //Object {name: "waxun", age: 18} console.log(obj);*/
2. 使用可以自己控制
1. 代码
/* * Object.defineProperty() * */ var obj = { age : 18 }; var nameV;//只是一个给set和get的一个中间变量 Object.defineProperty(obj,'name',{ // configurable : false, // enumerable : false, // value : 'waxun', // writable : false, get : function(){ console.log('get方法被调用'); return nameV;//进行返回set进行设置的值 }, set : function(newVal){ console.log('set方法被调用'); nameV = newVal; } }); //Object {age: 18, name: undefined} //给obj添加了name属性,值为undefiend // console.log(obj); //Object {} 设置configurable : true,可以被删除的 /* delete obj['name']; //Object {age: 18, name: undefined} console.log(obj); */ //Object {age: 18, name: undefined},true还是打印原来的值,不可以被删除 /* delete obj['name']; //Object {name: undefined} delete obj['age']; console.log(obj);*/ //Object {age: 18, name: undefined} //enumerable : true18 undefined/false 只打印18 /* console.log(obj); for(var k in obj){ console.log(obj[k]); }*/ //Object {age: 18, name: "waxun"} // console.log(obj); //writable true:可写,Object {age: 18, name: "kaguo"} //false :Object {age: 18, name: undefined},不可以进行赋值运算 // obj.name = 'kaguo'; // console.log(obj); //get //get方法被调用 waxun //直接在获得通过defineProperty定义的属性的时候,就进行get获取值的操作,并且将get的返回值给 //第二参数的属性赋值 //set 和 get 的配合使用 //set方法被调用,将右边的kaguo,调用 set方法进行设置值 obj.name = 'kaguo'; //通过取值的方式,调用get方法,进行取值 get方法被调用 console.log(obj.name);