JavaScript浅析 -- 属性描述对象

其实关于属性描述对象,阮大大有篇文章已经写得很详细了,不过作为必学知识点,也避免阮大大的网站再被攻击后看不到,自己还是做下笔记,印象更深刻些,想了解更多的可以戳原文查看。

一、属性描述对象

1. 属性描述对象

属性描述对象,是 JavaScript 里用来描述对象属性的一种数据结构,每个属性都有对应的一个属性描述对象。它具有6个元属性,结构如下:

{
  value: 'hello world',
  writable: true,
  enumerable: true,
  configurable: true,
  get: undefined,
  set: undefined
}
2. 属性描述对象的获取

(1) Object.getOwnPropertyDescriptor(obj, propName)可以获取对象目标属性的属性描述对象,第一个参数是目标对象,第二个参数是目标对象的目标属性。

var obj = {};
obj.content = 'hello world';
Object.getOwnPropertyDescriptor(obj, 'content');
/* {
  value: 'hello world',
  writable: true,
  enumerable: true,
  configurable: true
} */

(2)Object.getOwnPropertyDescriptors(obj)可以获取对象所有属性的属性描述对象的对象集合。可以获取自身所有无论是否可以遍历,不会获取继承的属性

var obj = {};
obj.content = 'hello world';
obj.name = 'example';
Object.getOwnPropertyDescriptors(obj);
/* {
  content: {
    value: 'hello world',
    writable: true,
    enumerable: true,
    configurable: true
  },
  name: {
    value: 'example',
    writable: true,
    enumerable: true,
    configurable: true
  }
} */
3. 属性描述对象的定义

(1)Object.defineProperty(obj, propName, descriptorObj)可以定义对象的目标属性的属性描述对象。第一个参数目标对象,第二个参数是属性名(字符串),第三个参数是属性描述对象,最终返回修改后的对象。

var obj = Object.defineProperty({}, 'content', {
  value: 'hello world',
  writable: true,
  enumerable: true,
  configurable: true
});

obj.content // "hello world"

(2)Object.defineProperties(obj, descriptorsObj)可以定义对象多个属性的属性描述对象,然后返回修改后的对象。用法如下:

var obj = Object.defineProperties({}, {
  content: {
    value: 'hello world',
    writable: true,
    enumerable: true,
    configurable: true
  },
  name: {
    value: 'example',
    writable: true,
    enumerable: true,
    configurable: true
  }
});

obj.content // "hello world"
obj.name // "example"

二、元属性

属性描述对象里的属性,即为元属性,有6个:value、writable、enumerable、configurable、get、set,下面一一讲解。

1. value

value 是属性的值,可以为任意类型。下面的写法是等价的:

var obj = {};
obj.content = 'hello world';
obj.content; // "hello world"

// 相当于
Object.defineProperty(obj, 'content', {value: 'hello'});
Object.getOwnPropertyDescriptor(obj, 'content').value; // "hello"

只要 configurablewritable 其中一个为 truevalue 可以被改写。

var o1 = Object.defineProperty({}, 'content', {
  value: 'hello',
  writable: true,
  configurable: false
});
o1.content = 'hello world'; // 成功

var o2 = Object.defineProperty({}, 'content', {
  value: 'world',
  writable: false,
  configurable: true
});
o2.content = 'hello world'; // 成功
2. writable

writable 表示该属性是否可以被改写,是一个布尔值。为 true 表示可以被改写,false 反之。注意,正常模式下,对 writablefalse 的属性赋值不会报错,只会静默失败。但是,严格模式下会报错,即使是对该属性重新赋予一个同样的值。

var obj = {};
Object.defineProperty(obj, 'content', {
  value: 'hello',
  writable: false // 如果增加一个 configurable 为 true 则仍可以被改写
});

obj.content // "hello"
obj.content = 'hello world';
obj.content // "hello"
3. enumerable

enumerable 表示该属性是否可枚举,是一个布尔值。当属性不可枚举即 enumerablefalse 时,该属性不会被 for-in、Object.keys()、JSON.stringify()遍历。该元属性的诞生是因为的 in 不仅可以遍历自身属性还可以遍历继承的属性,为了不让其遍历继承属性,所以增加了 enumerable 并规定了 in 只可遍历可枚举属性,且继承的属性都是不可枚举的。

// 可利用 enumerable 设置不想被遍历的属性
var obj = Object.defineProperties({}, {
  content: {
    value: 'hello',
    enumerable: true
  },
  phone: {
    value: '13512345678',
    enumerable: false
  }
});
JSON.stringify(obj); // "{"content":"hello"}"
4. configurable

configurable 表示改属性的元属性是否可配置,是一个布尔值。当其为 false 时,value、enumerable、configurable 不可被更改,writable 只能从 true 改为 false;且此时该属性无法被删除。

var obj = Object.defineProperty({}, 'content', {
  value: 'hello',
  writable: true,
  configurable: false
});
obj.content = 'hello world'; // 成功

// 由于设置了 configurable 为false,所以再次更改配置会报错
Object.defineProperty(obj, 'content', {
  value: 'world',
  writable: false,
  configurable: true
}); // Uncaught TypeError: Cannot redefine property: content

// 改动一下 configurable 就可以设置成功了,因为上面说的:
// 1.value 只要 writable 或 configurable 之一为 true 则可改;
// 2.writable 在不可配置情况下能 true 改 false
Object.defineProperty(obj, 'content', {
  value: 'world',
  writable: false,
  configurable: false
});  // 成功
5. 存取器 get 和 set

setget 属性的值是一个函数,分别对应存取函数 settergetter。一旦定义了存取函数,那么存取该属性的时候都会先执行对应的存取函数,所以可以用该属性做一些存取限制。

var obj = Object.defineProperty({}, 'content', {
  get: function () { // 不接受参数
    return 'getter';
  },
  set: function (value) { // 只接受一个参数,即要赋值的value
    console.log('setter: ' + value);
  }
});

obj.content // "getter"
obj.content = 'hello' // "setter: hello"

存取器还有另一种写法可以直接定义在对象里,类似于 function 的声明方式。而且一般会搭配一个内在变量(非必要,只是用来存值放对象内外没差别)一起使用,该变量一般以 _$ 开头以区分对象的其他属性。

var obj = {
  $age: 18, // 用来存操作age的临时变量,可以随意命名,但建议与属性名相同方便对应
  get age() {
    return ++this.$age;
  },
  set age(val) {
    if (val < this.$age) {
      alert('新值必须大于旧值');
    } else {
      this.$age = age;
    }
  }
}

obj.age; // 19
obj.age; // 20
obj.age = 18; // 赋值失败,提示新值必须大于旧值,age还是20

将对象的属性赋值给另一个对象属性时,不会复制存取函数,而是直接复制函数的返回值。比如将上面例子中的 age 赋值给另一个对象的属性时,只会复制21,所以下次调用的话不会返回22。

var obj2 = {};
obj2.age = obj.age; // 调用obj.age在之前的20之上加1变成21
obj2.age; // 再次调用还是21,因为getter函数没被复制过来

// 可利用下面的函数解决上述问题,注意如果只复制 age 的描述对象没用,因为 $age 没被复制过来,对 age 读取会返回 NaN
var copy = function (to, from) {
  for (var property in from) {
    if (!from.hasOwnProperty(property)) continue;
    Object.defineProperty(
      to,
      property,
      Object.getOwnPropertyDescriptor(from, property)
    );
  }

  return to;
}
copy(obj2, obj);
obj2.age;

注意,一旦定义了存取函数 settergetter,则不能将 writable 属性设置为 true,或者再同时定义 value 属性。

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

推荐阅读更多精彩内容

  • 概述 JavaScript提供了一个内部数据结构,用来描述一个对象的属性的行为,控制它的行为。这被称为“属性描述对...
    zjh111阅读 723评论 0 0
  • 概述 JavaScript提供了一个内部数据结构,用来描述一个对象的属性的行为,控制它的行为。这被称为“属性描述对...
    许先生__阅读 478评论 0 1
  • 1 Object 对象 教程:https://wangdoc.com/javascript/stdlib/obje...
    智勇双全的小六阅读 1,554评论 0 0
  • 函数和对象 1、函数 1.1 函数概述 函数对于任何一门语言来说都是核心的概念。通过函数可以封装任意多条语句,而且...
    道无虚阅读 4,521评论 0 5
  • 今天,忙着给公司策划“新24孝文化”活动,找了首歌《天之大》,先听毛阿敏版,不太有感觉,后来发现有童声版,一听,泪...
    蔷薇季阅读 322评论 0 0