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

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


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

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

属性及其特性.png

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

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

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

配置你的属性


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

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

属性操作方法.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}

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,088评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,715评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,361评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,099评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 60,987评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,063评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,486评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,175评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,440评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,518评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,305评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,190评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,550评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,152评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,451评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,637评论 2 335

推荐阅读更多精彩内容