JS之property和attribute

悠悠 2022-07-13 08:53 178阅读 0赞

我第一次看到这两个的时候也没有太注意他们之间的区别，但直到有一天，我发现我不能再把这两个东西混为一谈了，我一定要整清楚到底是怎么回事，于是乎去了ECMA文档里查了查，在这里附上网址

> [http://www.ecma-international.org/ecma-262/6.0/\#sec-call][http_www.ecma-international.org_ecma-262_6.0_sec-call]  
> 是英文的文档，勉强看的懂，如果有哪里不对，希望大神们指正。

property（属性）我个人翻译成属性而，attribute（特性）我翻译成特性。

property:  
官方的英文文档是这么描述的  
part of an object that associates a key (either a String value or a Symbol value) and a value  
一个对象的一部分，关联了键和值

attribute  
官方的英文文档是这么描述的  
internal value that defines some characteristic of a property  
定义了属性的特征的内部值

我们先将定义仔细看完，之后在举例子详细看看

Property Attributes  
属性的特性  
Attributes are used in this specification to define and explain the state of Object properties. A data property associates a key value with the attributes  
特性被用在规范中用来定义和解释对象属性的详细说明，一个数据属性通过特性关联了键值。  
下表中列举了数据属性的特性，**这是官网的一张截图**

![这里写图片描述][SouthEast]

下面介绍一些访问器的特性  
An accessor property associates a key value with the attributes  
访问器属性关联的键值的特性  
Attributes of an Accessor Property  
访问器属性的特性，下面来自官网的一张截图  
![这里写图片描述][SouthEast 1]  
有get和set特性，还有上面介绍的两个特性

现在我们实地的敲敲代码，试试上面的特性  
首先我们要了解一些方法

Object.defineProperty()//这个方法接受三个参数:属性所在的对象,属性的名字,和一个描述特性的对象(描述符对象)
    Object.getOwnPropertyDescriptor() //接收两个参数(对象,属性名),用来获取属性中特性值
    Object.defineProperties() //这个是批量添加特性，接受了两个参数(对象,属性组)

下面我们来使用以下

我们再来看下set和get这两个特性

Object.defineProperties(person,{
        name:{
            value:'xsh',
            writable:true
        },
        sex:{
            set: function(value){ 
                sex = value+'1'
            },
            get: function(){ 
                return sex
            }
        }
    
     });   
     person.sex = 'dsfsdfsdfsd'
    console.log(person.sex)//dsfsdfsdfsd1，可以看出我们最后多了一个1

除了上面的在ES5多了一种创建对象的方法

Object.create(proto [, propertiesObject ])//大家可能很少注意到这个

使用方法也不是很难，第一个参数是构建时继承的原型，第二个参数就是属性对象

所以总结一下，我感觉property是我们对象里，name，age这些对象，而attribute是描述这些对象的，像value，writable这类的。

[http_www.ecma-international.org_ecma-262_6.0_sec-call]: http://www.ecma-international.org/ecma-262/6.0/#sec-call
[SouthEast]: /images/20220713/84ac875403cd43b6843efbaf9a1c8bd3.png
[SouthEast 1]: /images/20220713/afa02b11721d4d14bcdcfb14b4f015c8.png