浅谈JavaScript的defineProperty

Object.defineProperty定义新属性或修改原有的属性。

defineProperty

语法:

Object.defineProperty(obj, prop, descriptor)
参数说明:
obj:必需。目标对象
prop:必需。需定义或修改的属性的名字
descriptor:必需。目标属性所拥有的特性

四大特征

每个属性都有四大特征
value 实际存储属性值
writable 是否可以修改 默认是true
enumerable 是否可被for in遍历 仅仅只能控制 for in 无法控制访问
configurable 是否可修改其他属性特征 是否可删除该属性

获取变量的特性

Object.getOwnPropertyDescriptor(obj,prop’);
obj:必需。目标对象
prop:必需。需定义或修改的属性的名字

操作

var obj = {
        id : 1001,
        name : 'Eric',
        age : 10
    }
value

属性对应的值,可以使任意类型的值,默认为undefined
设置value属性

Object.defineProperty(obj,"name",{
	    value:"hello"
	});
	console.log( obj.name );  //hello
writable

属性的值是否可以被重写。设置为true可以被重写;设置为false,不能被重写。默认为false。

第一种情况:writable设置为false,不能重写.严格模式下回报错

Object.defineProperty(obj,"name",{
	    writable:false
	});
//更改name 的值
obj.name="change";
console.log( obj.name );  //Eric

第一种情况:writable设置为true,可以重写.

Object.defineProperty(obj,"name",{
	    writable:true
	});
	obj.name="change";
	console.log( obj.name );  //change
enumerable

此属性是否可以被枚举(使用for…in或Object.keys())。设置为true可以被枚举;设置为false,不能被枚举。默认为false。

第一种情况:enumerable设置为false,不能被枚举。

Object.defineProperty(obj,"name",{
    enumerable:false
})
//枚举对象的属性
for( var key in obj ){
    console.log( key );  // id   age
}

第二种情况:enumerable设置为true,可以被枚举。

	Object.defineProperty(obj,"name",{
	    enumerable:true
	});
//枚举对象的属性
	for( var key in obj ){
	    console.log( key );   // id  name  age
	}
configurable

是否可以删除目标属性或是否可以再次修改属性的特性(writable, configurable, enumerable)。设置为true可以被删除或可以重新设置特性;设置为false,不能被可以被删除或不可以重新设置特性。默认为false。
这个属性起到两个作用:
目标属性是否可以使用delete删除
目标属性是否可以再次设置特性

  • 第一种作用:是否可以删除的作用
    第一种情况:configurable设置为false,不能被删除 严格模式下报错
Object.defineProperty(obj,"name",{
	    configurable:false
	});
	//删除属性
	delete obj.name;
	console.log( obj );
	console.log( obj.name ); //Eric

第二种情况:configurable设置为true,可以被删除。

Object.defineProperty(obj,"name",{
	    configurable:true
	});
	//删除属性
	delete obj.name;
	console.log( obj );
	console.log( obj.name ); //undefined

  • 第二种作用:是否可以再次修改特性
    第一种情况:configurable设置为false,不能再次修改特性。 报错
Object.defineProperty(obj,"name",{
    value:"hello",
    writable:false,
    enumerable:false,
    configurable:false
});
 
//重新修改特性
Object.defineProperty(obj,"name",{
    value:"hello",
    writable:true,
    enumerable:true,
    configurable:true
});
console.log( obj.name); //报错:Uncaught TypeError: Cannot redefine property: newKey

第二种情况:configurable设置为true,可以再次修改特性。

Object.defineProperty(obj,"name",{
    value:"hello",
    writable:false,
    enumerable:false,
    configurable:true
});
 
//重新修改特性
Object.defineProperty(obj,"name",{
    value:"hello",
    writable:true,
    enumerable:true,
    configurable:true
});
console.log( obj.name); //hello
批量设置属性的四大特征
    Object.defineProperties(jack,{
        id:{
            writable:false,
            configurable:false
        },
        name:{
            configurable:false
        },
       age:{
            enumerable:false,
            configurable:false
        }
    });

你可能感兴趣的:(浅谈JavaScript的defineProperty)