js中Object.defineProperty()方法的不详解

菜菜: “老大,那个, Object.defineProperty 是什么鬼?”

假设我们有个对象 user ; 我们要给它增加一个属性 name , 我们会这么做

var user = {}; user.name="狂奔的蜗牛"; console.log(user);//{name: "狂奔的蜗牛"}

如果想要增加一个sayHi方法叻?

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属性,代码是这样的

var user = {}; Object.defineProperty(user,"name",{ value:"狂奔的蜗牛" }) console.log(user);//{name: "狂奔的蜗牛"}

说明 是的还是那个经典的value属性,他就是设置属性值的。

等等,属性值只能为字符串吗?我们的 number function Object boolean 等呢?

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);

js中Object.defineProperty()方法的不详解

说明 事实证明任何类型的数据都是可以的哦~

问题又来了,如果 user对象已经有了name属性,我们可以通过Object.defineProperty改变这个值吗?

我们来试试

var user = {}; Object.defineProperty(user,"name",{ value:"狂奔的蜗牛" }) console.log(user); user.name="新=>狂奔的蜗牛" console.log(user);

咦??为什么我改了没作用勒??

原因:上边说了descriptor有很多属性,除了value属性还有个 writable【顾名思义属性是否可以被重新赋值】接受数据类型为 boolean(默认为false) true => 支持被重新赋值 false=>只读

哦哦,原来如果我没设置writable值的时候就默认只读啊,所以才改不掉

那我们看看,设置为true,是不是就可以改掉了。

var user = {}; Object.defineProperty(user,"name",{ value:"狂奔的蜗牛", writable:true }) console.log(user); user.name="新=>狂奔的蜗牛" console.log(user);

js中Object.defineProperty()方法的不详解


这个descriptor还有其他的属性吗?enumerable【顾名思义属性是否可以被枚举】接受数据类型为 boolean(默认为false) true => 支持被枚举 false=>不支持

额。。。枚举??什....什么意思?

假设我们想知道这个 user对象有哪些属性我们一般会这么做

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.的方式定义属性会发生什么呢?我们来看下输出

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 属性的特性在第一次设置之后可否被重新定义特性

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 //会报错,如下图

js中Object.defineProperty()方法的不详解


设置为 true

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/e20e014292a386bad49480ca58657c65.html