Object.defineProperty()解读【分享一】

发表于 other 分类,标签:

<!DOCTYPE HTML>

<html>

<head>

<meta charset="UTF-8">

<title>defineProperty简单介绍</title>

</head>

<body>

<h3>Object.defineProperty()</h3>

<p>Object.defineProperty(obj, prop, descriptor)</p>

<p>obj:必需。目标对象 </p>

<p>prop:必需。需定义或修改的属性的名字</p>

<p>descriptor:必需。目标属性所拥有的特性</p>

<p>返回值:</p>

<p>传入函数的对象。即第一个参数obj</p>


<script type="text/javascript">


var  a={};

Object.defineProperty(a,'name',{

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

configurable:false, // 是否可以删除目标属性或是否可以再次修改属性的特性(writable, configurable, enumerable)。默认不允许 false

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

value:"吴惟刚", //属性对应的值,可以使任意类型的值,默认为undefined

});


console.log('枚举属性类似for-in:',Object.keys(a))  //  判断是否可枚举  enumerable =true/false

a.name="王会锋" 

console.log('判断是否可以更改值:',a.name)  // 判断是否可更改  writable =true/false


/*

* // 这段代码用来检测 configurable的值,会报错,因为上面设置 configurable 设置为了false。

Object.defineProperty(a,'name',{

enumerable:false, // 是否可以枚举,默认不允许 false


// 是否可以删除目标属性或是否可以再次修改属性的特性(writable, configurable, enumerable)。

//设置为true可以被删除或可以重新设置特性;设置为false,不能被可以被删除或不可以重新设置特性。默认为false。

// 这个属性起到两个作用:

//1.目标属性是否可以使用delete删除

//2.目标属性是否可以再次设置特性

configurable:true,


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

value:"张三",

});


// 报错 Cannot redefine property: name

console.log(a.name)

*/

console.log('\n')

console.log('\n')

console.log('\n')

var  b={};

var  _val="吴惟刚";

// 注意:当使用了get或set方法,不允许使用writable和value这两个属性

// get或set不是必须成对出现,任写其一就可以。如果不设置方法,则get和set的默认值为undefined

//configurable和enumerable同上面的用法。


Object.defineProperty(b,'name',{

enumerable:false, // 是否可以枚举,默认不允许 false

configurable:false, // 是否可更改,默认不允许 false

set:function(newValue){

console.log('设置的新值:'+newValue);

_val=newValue;

},

get:function(){

console.log('调用取值的方法,返回的值:')

return _val;

}


});

// 取值

console.log(b.name)

// 设置新值

b.name="王会锋";

// 重新取值

console.log(b.name)

//兼容性

//在ie8下只能在DOM对象上使用,尝试在原生的对象使用 Object.defineProperty()会报错。

</script>

</body>

</html>


0 篇评论

发表我的评论