做者:John Au-Yeung
译者:前端小智
来源:medium
点赞再看,养成习惯本文
GitHub
https://github.com/qq44924588... 上已经收录,更多往期高赞文章的分类,也整理了不少个人文档,和教程资料。欢迎Star和完善,你们面试能够参照考点复习,但愿咱们一块儿有点东西。前端
除了普通的对象属性赋值和遍历以外,咱们还可使用 JavaScript 对象执行许多其余操做。在本文中,咱们将了解如何使用它们,包括访问内部属性、操做属性描述符和继承只读属性。git
JavaScript 对象没法以常规方式访问的内部属性。内部属性名由双方括号[[]]
包围,在建立对象时可用。github
内部属性不能动态地添加到现有对象。面试
内部属性能够在某些内置 JavaScript 对象中使用,它们存储ECMAScript规范指定的内部状态。数组
有两种内部属性,一种操做对象的方法,另外一种是存储数据的方法。例如:浏览器
[[Prototype]]
— 对象的原型,能够为null或对象[[Extensible]]
— 表示是否容许在对象中动态添加新的属性[[PrivateFieldValues]]
— 用于管理私有类字段数据属性包含了一个数据值的位置,在这个位置能够读取和写入值。也就是说,数据属性能够经过 对象.属性
访问,就是我么日常接触的用户赋什么值,它们就返回什么,不会作额外的事情。微信
数据属性有4个描述其行为的特性(为了表示内部值,把属性放在两对方括号中),称为描述符对象。工具
属性 | 解释 | 默认值 |
---|---|---|
[[Configurable]] | 可否经过delete删除属性从而从新定义属性; 可否修改属性的特性; 可否把属性修改成访问器属性 |
true |
[[Enumerable]] | 可否经过for-in循环返回属性 | true |
[[Writable]] | 可否修改属性的值 | true |
[[Value]] | 包含这个属性的数据值 | undefined |
value
描述符是属性的数据值,例如,咱们有如下对象 :this
let foo = { a: 1 }
那么,a
的value
属性描述符为1
。spa
writable
是指该属性的值是否能够更改。 默认值为true
,表示属性是可写的。 可是,咱们能够经过多种方式将其设置为不可写。
configurable
的意思是能够删除对象的属性仍是能够更改其属性描述符。 默认值为true
,这意味着它是可配置的。
enumerable
意味着它能够被for ... in
循环遍历。 默认值为true
,说明能经过for-in
循环返回属性
将属性键添加到返回的数组以前,Object.keys
方法还检查enumerable
描述符。 可是,Reflect.ownKeys
方法不会检查此属性描述符,而是返回全部本身的属性键。
Prototype
描述符有其余方法,get
和set
分别用于获取和设置值。
在建立新对象, 咱们可使用Object.defineProperty
方法设置的描述符,以下所示:
let foo = { a: 1 } Object.defineProperty(foo, 'b', { value: 2, writable: true, enumerable: true, configurable: true, });
这样获得foo
的新值是{a: 1, b: 2}
。
咱们还可使用defineProperty更改现有属性的描述符。 例如:
let foo = { a: 1 } Object.defineProperty(foo, 'a', { value: 2, writable: false, enumerable: true, configurable: true, });
这样当咱们尝试给 foo.a
赋值时,如:
foo.a = 2;
若是关闭了严格模式,浏览器将忽略,不然将抛出一个错误,由于咱们将 writable
设置为 false
, 表示该属性不可写。
咱们还可使用defineProperty
将属性转换为getter
,以下所示:
'use strict' let foo = { a: 1 } Object.defineProperty(foo, 'b', { get() { return 1; } })
当咱们这样写的时候:
foo.b = 2;
由于b
属性是getter
属性,因此当使用严格模式时,咱们会获得一个错误:Getter 属性不能从新赋值。
继承的只读属性不能再赋值。这是有道理的,由于咱们这样设置它,它是继承的,因此它应该传播到继承属性的对象。
咱们可使用Object.create
建立一个从原型对象继承属性的对象,以下所示:
const proto = Object.defineProperties({}, { a: { value: 1, writable: false } }) const foo = Object.create(proto)
在上面的代码中,咱们将proto.a
的 writable
描述符设置为false
,所以咱们没法为其分配其余值。
若是咱们这样写:
foo.a = 2;
在严格模式下,咱们会收到错误消息。
咱们能够用 JavaScript 对象作不少咱们可能不知道的事情。
首先,某些 JavaScript 对象(例如内置浏览器对象)具备内部属性,这些属性由双方括号包围,它们具备内部状态,对象建立没法动态添加。
JavaScript对象属性还具备属性描述符,该属性描述符使咱们能够控制其值以及能够设置它们的值,仍是能够更改其属性描述符等。
咱们可使用defineProperty
更改属性的属性描述符,它还用于添加新属性及其属性描述符。
最后,继承的只读属性保持只读状态,这是有道理的,由于它是从父原型对象继承而来的。
代码部署后可能存在的BUG无法实时知道,过后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给你们推荐一个好用的BUG监控工具 Fundebug。
原文:https://medium.com/@amesimmon...
文章每周持续更新,能够微信搜索「 大迁世界 」第一时间阅读和催更(比博客早一到两篇哟),本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录,整理了不少个人文档,欢迎Star和完善,你们面试能够参照考点复习,另外关注公众号,后台回复福利,便可看到福利,你懂的。