研究JavaScript中Object对象属性

全篇共 3251 字。按500字/分钟阅读,预计用时 6.5 分钟。页面总浏览量 21 次,今日浏览量 2 次。

我创作完JS原型链可视化。发现Object在所有构造函数中有着举足轻重的地位。我要研究Object的属性,试图探索和寻找其中可循的规律。

《JS原型链可视化》实验项目体验入口
找到Object模块的位置,它的原型是Function,原型对象是Object.prototype
Object原型对象(Object.prototype)是所有JS内置构造函数原型对象的原型,
Object.prototype === Array.prototype.__proto__
除了prototype属性,Object的其他属性也很重要,
我要深入研究Object的属性。

在Chrome控制台执行console.dir(Object)
控制台输出了Object的全部对象属性。
列出Object全部属性,后面按功能逐一研究:

arguments: (...)
assign: ƒ assign()
caller: (...)
create: ƒ create()
defineProperties: ƒ defineProperties()
defineProperty: ƒ defineProperty()
entries: ƒ entries()
freeze: ƒ freeze()
fromEntries: ƒ fromEntries()
getOwnPropertyDescriptor: ƒ getOwnPropertyDescriptor()
getOwnPropertyDescriptors: ƒ getOwnPropertyDescriptors()
getOwnPropertyNames: ƒ getOwnPropertyNames()
getOwnPropertySymbols: ƒ getOwnPropertySymbols()
getPrototypeOf: ƒ getPrototypeOf()
is: ƒ is()
isExtensible: ƒ isExtensible()
isFrozen: ƒ isFrozen()
isSealed: ƒ isSealed()
keys: ƒ keys()
length: 1
name: "Object"
preventExtensions: ƒ preventExtensions()
prototype: {constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, …}
seal: ƒ seal()
setPrototypeOf: ƒ setPrototypeOf()
values: ƒ values()
__proto__: ƒ ()

JavaScript原型相关

create: ƒ create()
getPrototypeOf: ƒ getPrototypeOf()
preventExtensions: ƒ preventExtensions()
isExtensible: ƒ isExtensible()
prototype: {constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, …}
setPrototypeOf: ƒ setPrototypeOf()
__proto__: ƒ ()

Object也是可以像 new Object() 这样跟普通函数一样被执行的,
所以Object的父类是 Function,这样证明:Object.__proto__ === Function.prototype // true
还可以这样证明:Function.prototype.isPrototypeOf(Object) // true
也可以这样:Object.getPrototypeOf(Object) == Function.prototype // true

凡是普通对象,它的原型都是 Object.prototype
创建普通对象的方式包括:花括号字面量、new关键字、Object.create
Object.create 创建原型为 Object.prototype 的对象的前提是会直接决定对象原型是谁的第一个参数不能为 null。

Object.prorotype对象中的属性可以被任何普通对象调用,
前提当然是该普通对象的原型链上的某个原型对象是 Object.prototype

如果该普通对象的自有属性和 Object.prototype 中的属性发生重名,
根据原型链查询的就近原则,最终不会执行 Object.prototype 上的属性值。

Object.prototype.toString 来说,很多内置构造函数原型对象都重写了 toString 方法。
开发者重写原型链上的某个属性的前提是:你已经清楚的知道自己到底在干什么。

Object.setPrototypeOf 方法干脆让开发者可以更改对象的原型。

一种可以阻止其他开发者扩展对象属性的方法是 Object.preventExtensions
Object.isExtensible判断对象是否可扩展,就是能不能在其上增加新的属性。

JavaScript属性特性相关

freeze: ƒ freeze()
isFrozen: ƒ isFrozen()
seal: ƒ seal()
isSealed: ƒ isSealed()
defineProperty: ƒ defineProperty()
defineProperties: ƒ defineProperties()
getOwnPropertyDescriptor: ƒ getOwnPropertyDescriptor()
getOwnPropertyDescriptors: ƒ getOwnPropertyDescriptors()

使用赋值运算符给对象增加新的属性,或修改已有属性的值,或删除属性。
Object.defineProperty 更精确地给对象创建属性。

属性描述符有两套描述形式:数据描述符、存取描述符,
无论哪一种形式都能描述可配置性和可枚举性:configurable、enumerable,
数据描述符独有的属性:value、writable,
存取描述符独有的属性:get、set。

Object.seal 能将对象封闭,
阻止添加新属性并将所有现有属性标记为不可配置。当前属性的值只要可写就可以改变。
属性是否可删除也在属性可配置性控制的范围内。

Object.freeze 将对象冰冻,比 Object.seal 更加严格。
一个被冻结的对象再也不能被修改;冻结了一个对象则不能向这个对象添加新的属性,不能删除已有属性,不能修改该对象已有属性的可枚举性、可配置性、可写性,以及不能修改已有属性的值。此外,冻结一个对象后该对象的原型也不能被修改。

Object.sealObject.freeze 存在的意义是批量修改对象中属性们的描述符。

Object工具函数

assign: ƒ assign()
entries: ƒ entries()
is: ƒ is()
keys: ƒ keys()
values: ƒ values()

Object.keysObject.values 都是返回给定对象自身可枚举的属性名称、属性值的数组。
Object.entries 则将给定对象的属性名称和属性值以数组的形式返回。

可迭代 Iterable 和可枚举 enumerable 是两个概念。

for…in 语句以任意顺序迭代对象的可枚举属性。
for…of 语句遍历可迭代对象定义要迭代的数据。

发布日期 » 2019年11月28日 周四
原创声明 » 请勿复制转载,谢谢配合。
Airglass.js核心库
JavaScript核心概念
硬件编程、Arduino
文档翻译计划
微信开发
前端脚手架
运维
可视化
生活自有“道”理
视觉设计、用户体验
陈帅华的微信二维码