4

这篇博文的主要目的是为了填坑,很久之前我发表了一篇名为关于JavaScript对象中的一切(一) — 对象属性的文章,想要谈一谈JavaScript对象,可那时只是贴了一张关于这个主题的思维导图,今天我会针对这一主题进行展开,将JavaScript对象一些平常不太常用的知识系统的整理出来,方便阅读者的记忆与理解。在看完本篇文章后,你大可跳转回这篇博文,并保存思维导图,以加强记忆。

对于对象的一般认识

在开始正题之前,让我们先凭直觉回忆一下我们对JavaScript对象的一般认识:

  1. 对象是一个引用类型值;
  2. 创建对象的方式有两种形式:“字面量形式”与“构造函数形式”;
  3. 对象的属性可以随时修改,且一旦改动,所有引用对象的地方,其属性值均会被改变(这也是引用类型的特点);
  4. 对象可以通过原型链实现继承;

以上这些应该是JavaScript开发者对“对象”这一概念最基本的认识。但实际上,JavaScript给予了开发者以更细致颗粒度操作/设置对象及其属性的能力,这些能力是什么?如何运用?这就是接下来我们要谈到的话题。


对象与属性

让我们保持耐心,再梳理一下对象与属性的关系:对象是属性的集合,当对象的属性是函数时,我们将其称之为“方法”

我们不妨建立这样的心智模型:对象是一只蓝色的(这里的颜色特别重要,因为实际上,变量本身也是一只大章鱼,但她的身体却是红色的?)大章鱼,章鱼的每一只触手都握着一个属性的内存地址卡片,当要读取对象中的属性时,章鱼的触手会随着卡片上的地址拿到相应的数据值,并返还给用户(就是你)。

接下来,让我们从对象与属性两个角度切入,谈谈一些我们可能平常不太接触到的知识。


对象的内部方法与特征属性

让我们先定义这两个名词:

  • 内部方法是指:JavaScript于对象内部定义的,用户不可访问/修改的方法;
  • 特征属性是指:用来描述对象/属性一些特性(如是否可配置?是否可迭代)的属性;

简单来说,JavaScript中对象和属性都“藏”有一些我们不太常用的属性和方法,我们的目的就是揪出它们,分析它们的用法和意义,然后对JavaScript对象有一个完整清晰的认识。

让我们先从JavaScript对象的内部方法说起:

JavaScript对象有以下三个内部方法:

  1. [[Put]]:用来创建对象属性,当新建对象属性时被调用,就像命令蓝色章鱼长出一只触角,握住一张内存地址卡片;
  2. [[Set]]:用来修改对象属性的值,当修改对象属性时被调用,可以想象为命令蓝色章鱼的某个触角放下已有的内存地址卡片,改换另一张;
  3. [[Delete]]:用来删除对象属性的值,当使用delete关键字删除对象属性时被调用,可以想象为砍掉蓝色章鱼的一只触角(别担心,蓝色章鱼并不在意);

讲到这里我们可以很好的说明当设定某对象属性值为null时会发生什么了,那只蓝色章鱼的触角还在,只是拿了一张空白卡片!

let obj1 = {
    x: null,
}
console.log(obj1.x) // null

let obj2 = {
    y: null,
}
delete obj2.y
console.log(obj.y) // undefined(当访问对象不存在的属性时,一律得到undefined值)

接着我们来谈谈对象的特征属性

很遗憾对象的特征属性并不如属性那么多,我们这里先介绍一个,名为:[[Extensible]],它的值是一个布尔值,用来表示对象本身是否可以被修改,简单来说,便是是否可以添加属性(实际上,还有一个内部的[[proto]]特征属性)。

为了配置这个属性,JavaScript给了我们一个专门的方法:Object.preventExtensions(),同时,为了检测一个对象是否是可扩展的,JavaScript还给我们提供了Object.isExtensible()方法,让我们看看它们的用法:

let obj = {
    x: 1,
}

console. log(Object.isExtensible(obj))   // true

Object.preventExtensions(obj)

console.log(Object.isExtensible(obj))   // false

obj.y = 2

console.log('y' in obj)   //false

可见,通过这个特征属性,我们可以创建一个比较保守的不可扩展对象,当我们了解属性的特征属性后,在本文最后你会看到,我们最终是如何制造出一个封闭性极强的对象的(不仅不可扩展,连属性也不能被改变)。

让我们小结一下:JavaScript对象有三个内部方法和一个特征属性,他们分别是:

  1. 内置方法:[[Put]][[Set]][[Delete]]
  2. 特征属性:[[Extensible]]

在下一篇文章中,我们会一起梳理对象属性的一些不为人知的小秘密,休息一下,然后我们继续。







? Hey!喜欢这篇文章吗?别忘了在下方? 点赞让我知道。


libinfs
1.7k 声望2.5k 粉丝

🚀 Web应用设计师 & 开发工程师 | 🎸 吉他爱好者 | 📚 终生学习者 | ✨ 极简主义信仰者 | ✍️ 科技专栏作家 | 🎨 图形学新手 | 🔍 AI技术狂热追踪者