JavaScript面向对象程序设计—属性详解

2019年5月22日 159次阅读 来源: 查查查查查查克

属性(property)及其特性(attribute)

JS中的对象，实际上就是一组无序键值对组成的一个集合。键就是属性，值就是属性值，属性值可以是一个基本数据类型值，可以是一个函数，也可以是一个对象。

事实上，无论某个属性值保存的是什么，它的内部结构都是一致的。属性（property）的内部由一组特性（attribute）组成，用来描述和规范这个属性的值和行为。特性也被称为描述符。

《JavaScript面向对象程序设计—属性详解》 属性及其特性.png

可以看到，属性分为两种：数据属性和访问器属性，它们各自所拥有的特性也不完全一样。

何为数据属性？顾名思义，数据属性的主要作用就是保存数据，而且其内部也确实提供了一个专门用来保存属性值的位置——[[Value]]。显然，我们定义的绝大多数属性都是数据属性。（事实上，访问器属性不能直接定义，只能通过Object.defineProperty()和Object.defineProperties()进行定义）

何为访问器属性？其实，对属性值的读取和赋值都是一种“访问”。对于数据属性，这种访问是直接操作[[Value]]特性位置保存的东西；而对于访问器属性，则是通过“访问器”进行的访问。这个“访问器”指的就是[[Get]]和[[Set]]，它们分别是两个函数。也就是说，访问器属性内部并不直接保存属性值，当你试图读取某个访问器属性的值时，会调用[[Get]]中定义的函数，当你试图写入时，则会调用[[Set]]中定义的函数并传入你的参数。当然了，我们很少会用到访问器属性，除非我们确实需要定义这样一个具有特殊行为的属性：当我为该属性赋值时可以根据我传入的值按照某种规则自动修改另一个属性的值。

配置你的属性

了解了属性及其特性后，我们来看看该怎么操作它们。

操作属性特性主要通过以下三个方法：

《JavaScript面向对象程序设计—属性详解》 属性操作方法.png

我们来设想几个场景和例子。

当我们希望实现一个只读的数据属性，比如我们定义了一个AK-47自动步枪的对象：

var ak47 = {};
ak47.name = 'AK-47自动步枪';
ak47.capacity = 30;

AK-47的弹匣容量是30发，这是怎么都不会变的，因此我们最好将其设置为一个只读的属性，所以我们这样写：

var ak47 = {};
ak47.name = 'AK-47自动步枪';
Object.defineProperty(ak47, 'capacity', {
    value: 30,
    writable: false,    //[[Writable]]特性的描述符，表示是否允许修改该属性的值
});
console.log(ak47.capacity);    //30
ak47.capacity = 60;
console.log(ak47.capacity);    //30

上面的代码还包含了测试，通过验证，弹匣容量capacity这个属性的确变成了一个只读属性，其值固定为30，任何对这个属性的赋值操作都会被忽略。不过，在严格模式下尝试对只读属性重新赋值时会报错。

Object.defineProperties()与Object.defineProperty()作用一致，只不过使用前者可以同时操作多个属性：

var ak47 = {};
Object.defineProperties(ak47, { 
    name:{
        value:'AK-47自动步枪'
    },
    capacity:{
        value: 30,
        writable: false
    }
});

再来考虑一下访问器属性的使用。假设我们在2016年出版了一本书，按照合同，每隔一年我们都会对其进行升级，也就是说2016年为第一版，2017年为第二版。。。

var book = {};
book.publishYear = 2016;
book.edition = 1;
Object.defineProperty(book, 'year', {
    get: function(){
        return this.publishYear;
    },
    set: function(someYear){
        if(someYear > 2016){
            this.publishYear = someYear;
            this.edition += someYear - 2016;
        }
    }
});
book.year = 2018;
console.log(book.edition);    //3

可以看到，运用访问器属性，我们仅仅通过改变年份的值就实现了对这个book对象的动态维护。有意思的是，这使得我们在定义对象的时候就直接整合进了业务逻辑的东西。虽然这很不常用。

例子不胜枚举，不过说白了就是，无论是数据属性还是访问器属性，都是通过Object.defineProperty()或Object.defineProperties()这两个方法对属性进行“配置”。

至于Object.getOwnPropertyDescriptor()方法，其作用则是取得某个属性的完整的“配置”：

var person = {};
person.name = 'Chuck';
var descriptor = Object.getOwnPropertyDescriptor(person, 'name');
console.log(descriptor);    //Object {value: "Chuck", writable: true, enumerable: true, configurable: true}

当然了，从这个方法返回的描述符对象也可立即看出该属性是数据属性还是访问器属性。

    原文作者：查查查查查查克
    原文地址: https://www.jianshu.com/p/61d104a8e8a5
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞