五分钟快速搞定 Object.defineProperty

Object.defineProperty() 的作用很简单,就是为对象定义属性。

常见的对象定义与赋值

我们经常使用 obj.prop = value 或者 obj['prop'] = value 来定义与赋值方法

let Person = {}
Person.name = 'Jack'
Person['gender'] = 'female'

Object.defineProperty()

Object.defineProperty() 的作用就是直接在一个对象上定义一个新属性,或者修改一个已经存在的属性。

Object.defineProperty(obj, prop, descriptor)
  • obj:需要定义属性的当前对象
  • prop:当前需要定义的属性名
  • descriptor:属性描述符
Object.defineProperty() 结构图示

案例:

// 1.添加属性
let obj = {};
Object.defineProperty(obj, 'name', {value:'steve'});
obj.name;  // 'steve'

// 2.修改现有属性,重返18岁
obj.age = 27;
Object.defineProperty(obj, 'age', {value:18});
obj.age;// 18

在常见的属性赋值方式(.语法[] 语法)中,对象属性可以修改也可以删除。但是通过 Object.defineProperty() 为对象定义的属性,我们可以对描述符进行设置,从而更精准地控制对象的属性。

属性的特性以及内部属性

JavaScript 有三种类型的属性:

  1. 数据属性:拥有一个确定的值的属性(这也是最常见的属性)。
  2. 访问器属性:通过 gettersetter 进行读取和赋值的属性。
  3. 内部属性:由 JavaScript 引擎内部使用的属性,不能通过 JavaScript 代码直接访问到(例如:[[Scopes]]),不过可以通过一些方法间接的读取和设置。
内部属性

每个对象都有一个内部属性[[Prototype]],你不能直接访问这个属性,但可以通过 Object.getPrototypeOf() 方法间接的读取到它的值。虽然内部属性通常用一个双括号包围的名称来表示,但实际上这并不是它们的名字,它们是一种抽象操作,是不可见的,你在对象中根本就找不到上面那种字符串类型的属性。

属性描述符(descriptor)

通过 Object.defineProperty() 为对象定义属性,有两种形式,且不能混合使用。分别为数据描述符,存取描述符,下面分别描述下两者的区别:

注意:不可同时指定 数据描述符存取描述符。Cannot both specify accessors and a value or writable attribute。

数据描述符:

  • value:属性值
  • writable:是否可写(该属性值是否可改变,如果不设置,默认为 false,不可改变)
let Person = {}
Object.defineProperty(Person, 'name', {
   value: 'jobs',
   writable: false
})
Person.name = 'steve'
console.log(Person.name)  // jobs

存取描述符:

  • get:一个给属性提供 getter 的方法,如果没有 getter 则为 undefined。该方法返回值被用作属性值。默认为 undefined。
  • set:一个给属性提供 setter 的方法,如果没有 setter 则为 undefined。该方法将接受唯一参数,并将该参数的新值分配给该属性。默认值为 undefined。
let Person = {}
let temp = null

Object.defineProperty(Person, 'name', {
  get: function () {
    return temp
  },
  set: function (val) {
    temp = val
  }
})
temp = 'steve'
console.log(Person.name)  // steve

数据描述符和存取描述均具有以下描述符:

  • configrable:设置属性可否再配置、可否删除
  • enumerable:设置该属性的 key 是否可以被 for in 或者 Object.keys() 遍历
let Person = {}

Object.defineProperty(Person, 'name', {
  value: 'jobs',
  configurable:false,
  writable: true,
})

delete Person.name  // false

// 重新修改 Person 类的 class 属性配置,报错,Cannot redefine property!
Object.defineProperty(Person, 'name', {
   value: 2,
})

当一个属性的 configurable 被设置为 false 之后,我们则不能重新定义这个属性,也不能删除这个属性。

一个小意外:当 configurablefalse 时,我们可以把 writable 的状态由 true 改为 false,但是无法由 false 改为 true。当 configurabletrue 时,writable 的状态可以随意更改。

let Person = {}

Object.defineProperty(Person, 'name', {
  value: 'jobs',
  writable: true,
  enumerable:false
})

Object.keys(Person)  // []
for(let key in Person){console.log(key)}  // undefined

当一个属性的 enumerable 被设置为 false 之后,我们则遍历不出这个属性。

注意:如果描述符中的某些属性被省略,会使用如下的默认规则。

属性名 默认值
value undefined
writable false
enumerable false
configurable false
get undefined
set undefined

普通定义 与 Object.defineProperty() 的关系:

defineProperty 定义:

let Person = {}
Object.defineProperty(Person, 'name', {})
// 等价于
Object.defineProperty(Person, 'name', {
  value: undefined,
  writable: false,
  enumerable:false,
  configurable:false
})

普通定义:

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

推荐阅读更多精彩内容