Object.defineProperty()
作用 :
Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象
语法:
Object.defineproperty( object,‘ propName ’ ,descriptor);
参数详解:
object :要定义属性的对象,返回的也是
propName :要定义或修改的属性的名称。
descriptor:要定义或修改的属性描述符,属性描述符
属性描述符:
- value:包含这个属性的数据值。默认值为undefined。
<script>
var obj = {}
//给obj添加name属性 使用了value描述符
Object.defineProperty(obj, "name", {
value:"周一"//此时就给obj对象添加了name属性,描述添加了值为 周一,可读可修改
})
console.log(obj)//----->{name:"周一"}
</script>
- configurable:表示能否通过delete删除属性从而重新定义属性,能否修改属性的特性,或者能否把属性修改为访问器属性,默认值为true。
<script>
var p1={
name:"鱼"
}
//不可删除
Object.defineProperty(p1,"name",{
configurable : false,
})
console.log(p1); //{ name: '鱼' }
delete obj.name;
console.log(p1); //{ name: '鱼' }
//不可修改
var obj ={}
//给obj name属性 使用了configurable描述符
Object.defineProperty(obj, "name", {
configurable: false, //为false,禁止配置
})
Object.defineProperty(obj, "name", {
//!!!!!!!!!!!!!描述属性值,报错,因为configurable为false不可修改
value: "周一",
})
console.log(obj) //----->{name:"undefined"}
// 注意:如果属性描述符有 writable 或 configurable 有一个为 true,则 value 也允许修改。
var obj2 = {}
//给obj name属性 使用了configurable描述符
Object.defineProperty(obj2, "name", {
configurable: false, //为false,禁止配置
writable:true,//强制设置属性可写
})
Object.defineProperty(obj2, "name", {
//已强制设置属性可写,所以不会报错
value: "周一",
})
console.log(obj2)//----->{name:"周一"}
</script>
- enumerable:表设置属性是否可枚举,即是否允许使用 for/in 语句或 Object.keys() 函数遍历访问,默认为 true。
var obj = {}
//给obj name属性 使用了enumerable描述符
Object.defineProperty(obj, "name", {
value: "水煮鱼", //添加了描述符
enumerable:false,//false设置属性不可枚举即不可被for in
})
for(var i in obj){
console.log(i);//!!!!!无效果
}
- writable:表示能否修改属性的值。默认值为true。
var obj = {}
//给obj name属性 使用了writable描述符
Object.defineProperty(obj, "name", {
value: "水煮鱼", //添加了描述符
writable:false,//false设置属性不可修改
})
obj.name="周一"
console.log(obj)//----->{name:"水煮鱼"}
- set():属性的 setter 函数,如果没有 setter,则为 undefined。当属性值被修改时,会调用此函数。该方法接受一个参数(也就是被赋予的新值),会传入赋值时的 this 对象。
- get():取值 getter 函数,默认为 undefined,当访问该属性时,会调用此函数,执行时不传入任何参数,但是会传入this对象(由于继承关系,这里的this并不一定是定义该属性的对象)。该函数的返回值会被用作属性的值。
<script>
var obj = {
fristName: "水煮",
lastName: "鱼",
age: 18,
}
Object.defineProperty(obj, "fullName", {
// 当读取属性的时候自动调用,将函数的返回值作为fullName的属性值
get() {
//console.log(this);//----->此时的this指向obj
return this.fristName + "-" + this.lastName
},
// 当修改了属性值的时候自动调用,用来监视属性值的变化,
set(value) {
//value-----obj.fullName
const arr=value.split('-')
this.fristName=arr[0]
this.lastName=arr[1]
},
})
console.log(obj.fullName)//----->如我们所想 输出水煮—鱼
obj.fristName = "麻辣"
console.log(obj.fullName);//---->此时 打印出的是麻辣—鱼
obj.fullName="糖醋-排骨"
console.log(obj.fristName , obj.lastName);//糖醋 排骨
</script>
!!!!!!!!!!!get和value不可同时使用