javascript属性的特性和对象的特征_代码属性值特征-CSDN博客

本文链接：https://blog.csdn.net/destiny1234544/article/details/106673810

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>