js的属性
js的属性分为数据属性和存取器属性:
1.数据属性
数据属性包含一个数据值的位置,在这个位置可以读取和写入值。在数据属性下又有4个描述行为的特征:
(1)writable:表示能否修改属性的值,默认值为true
(2)enumerable:表示能否通过for-in循环返回属性从而从新定义属性,代表属性是否可以枚举,默认值为true。
(3)configurable:表示能否通过delete删除属性从而从新定义属性,默认值也为true。
(4)value:包含这个属性的数据值,读取属性值的时候从这个位置读取,写入数据时将数据在这个位置保存,这个特性的默认值为undefined。
以上的4个特征我们可以通过object.prototype进行检测,这里我们使用obj.propertyIsEnumerable来检测一下定义的x属性是否可以枚举。下面时检测的代码,我们通过构造器定义了一个obj对象,然后给obj对象一个属性x并赋值为1,然后通过obj.propertyIsEnumerable来检测是否可以枚举,如果可以枚举那么控制台上显示的时true反之false。
下面时检测代码:
// A code block
var foo = 'bar';
// An highlighted block
var foo = 'bar';
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对象的属性</title>
</head>
<body>
<script>
function foo(){};
var obj=new foo();
obj.x=1;
obj.y=2;
console.log('x' in obj);
console.log(obj.hasOwnProperty('x'));
console.log(obj.propertyIsEnumerable('x'))
</script>
</body>
</html>
检测的结果是console控制台输出了true说明x属性可以进行枚举
注:属性是对象自己的并且可枚举的返回值true
如果我们在对象中添加一个原型对象,让对象来继承这个原型对象,那么这个对象的该属性默认值并不是true。比如将上述代码改为
下面展示一些 内联代码片
。
// A code block
var foo = 'bar';
// An highlighted block
var foo = 'bar';
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对象的属性</title>
</head>
<body>
<script>
function foo(){};
foo.prototype.z=3;
var obj=new foo();
obj.x=1;
obj.y=2;
console.log(obj.propertyIsEnumerable('x'))
console.log(obj.propertyIsEnumerable('z'))
</script>
</body>
</html>
我们同时来检测obj自身的对象x以及继承的对象z,发现x是可枚举的,但是z是不可枚举的,这个例子就简单的印证了这一点
其他的4个特性也可以通过这种方式得到印证。
定义4个特性
上面我们讲了js的属性有4个特性,那么我们如何来定义这些特性呢,js也提供了object.defineProperty()来给对象添加/修改一个属性并指定该属性的配置,即4个特性。
这是使用该方法定义的对象,同时添加了属性值x=12.
var obj={};
Object.defineProperty(obj,‘x’,{value:12});
console.log(obj.x);
利用控制台输出结果如下
但是当我们想修改x的值时我们会发现x的值没有改变。我们将x的值改为456,但是控制台显示的值还是12.
下面展示一些 内联代码片
。
// A code block
var foo = 'bar';
// An highlighted block
var foo = 'bar';
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对象的属性</title>
</head>
<body>
<script>
var obj={};
Object.defineProperty(obj,'x',{value:12});
console.log(obj.x);
obj.x=456;
onsole.log(obj.x);
</script>
</body>
</html>
这是因为他们的4个特征通过这种方式的默认值为false,所以我们需要自己定义他们的值来使他们的特征能够使用。所以当我们把他的writable改为true时,他的属性值就可以被更改
下面展示一些 内联代码片
。
// A code block
var foo = 'bar';
// An highlighted block
var foo = 'bar';
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对象的属性</title>
</head>
<body>
<script>
var obj={};
Object.defineProperty(obj,'x',{
value:12,
writable:true
});
console.log(obj.x);
obj.x=456;
console.log(obj.x);
</script>
</body>
</html>
此时就达到了修改的效果,其余的3个特征也是通过这样的方法来进行存操作。但是在检测是否可枚举时我们也可以通过object.keys()进行检测,使用的形式是:object.keys(对象名);就可以来检测该对象是否可以枚举。