【javascript】ES5规范中的数据属性和访问器属性理解

最新推荐文章于 2023-08-30 09:30:38 发布

原创最新推荐文章于 2023-08-30 09:30:38 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

web前端专栏收录该内容

6 篇文章

订阅专栏

ES5中，将对象定义为一组“无序属性的集合”，一个对象，往往会包含多个属性，这些属性包括基本值、对象和函数。理解对象，首先要知道如何创建对象，在这篇文章中，首先介绍两种创建对象的最基本的方法：new Object()和对象字面量。

一、对象创建

new一个Object的方式：

 var obj = new Object();
     obj.number_props = 12;
     obj.string_props = 'abc';
     obj.method_props = function () {
         console.info("对象方法");
     }
创建的第一个obj对象，有三个属性，一个基本值属性，一个函数属性。

对象字面量：

var person = {
    "name": 'xiaoli',
    "age": 12,
    "teacher": obj,
    "sayHi": function () {
         console.info(this.name);
     }
 }
创建的person属性中，除了基本属性和函数属性之外，还有一个obj的对象属性。

二、ES5中的属性类型

每个属性，都有特定的属性类型，根据Object.getOwnPropertyDescriptor方法可以访问到每个属性的特性值，如果该特性值里包含value属性，即该属性为数据属性，如果该特性值里包含get、set属性，则该属性为访问器属性。

var descriptor = Object.getOwnPropertyDescriptor(obj,"number_props");  

//descriptor是个对象

Object.defineProperty(obj,'access_props',{
    set: function() {
         console.info('访问器属性的set方式');
     }
});

数据属性，含有的特性，如上图所示的属性列表，即configurable、enumerable、value、writable四个，在javascript中不能直接访问他们，因此用[[configurable]]这种形式表示。

在属性定义的过程中，可以设置对应的特性值，以达到不同的目的。

【configurable】: 标识能否删除属性，或者能否重新定义该对象的属性。设置为true的情况下可以重新定义属性，其他几个属性再次不介绍了。

 Object.defineProperty(animal,'category',
        { configurable: true,        
          configurable: false,
          value: 'cat'               
          value: 'cat' });

访问器属性，访问器属性含有一对set、get方法，该属性不能直接定义，必须通过defineProperty来定义。访问器属性最大的一个用途是，通过设置set方法，能够随时修改其他属性的值。

Object.defineProperty(animal,'year',{
   get:function () {
       return this._year;  （最终的year属性通过get方法获得，依赖于_year）
   },
   set: function (newYear) {
        if (newYear > 2018) {
            this._year = newYear-2; （year属性控制_year）
            this.edtion+= newYear-2018; (edtion依赖year)
        }
       }
   });

 animal.year = 2019;
 console.info(animal._year);
 console.info(animal.edtion);
 console.info(animal.year);

反馈结果：