对象和包装类


theme: smartblue

前言

当JavaScript对象和包装类走进一家程序员的聚会时,场面立刻热闹起来。

JavaScript对象是那种个性鲜明的家伙,他们像是大都市中的艺术家,总是充满创意和想法。他们自豪地展示着自己的功能,从创建动态网页到处理用户交互,无所不能。一个对象挺着胸膛大声宣称:“我可以轻松操纵DOM,改变网页的结构和样式,让用户体验焕然一新!”另一个对象自信地补充道:“是的,还有我可以处理Ajax请求,让网页与服务器无缝交互,实现真正的动态性!”JavaScript对象们自豪地展示着自己的技能,仿佛在舞台上展示才艺一般。

而包装类则是那种低调内敛的存在,他们虽然不张扬,却在编程世界中扮演着至关重要的角色。一个包装类谦逊地说:“我可能不像对象那样引人注目,但我能做一些特别的事情。”另一个包装类笑着解释道:“是的,比如当需要把字符串转换成数字,或者把数字转换成字符串时,我就会出现,给数据一个合适的‘外衣’。”包装类们虽然不像对象那样光鲜亮丽,却默默地支撑着整个程序的运行。

在这个聚会上,对象和包装类互相欣赏彼此的独特魅力。对象们羡慕包装类的稳重可靠,而包装类则羡慕对象的创造力和灵活性。两者虽然角色不同,但却共同构成了JavaScript编程世界的精髓。

在一杯杯代码调试和函数调用中,对象和包装类开始建立起深厚的友谊。他们相互学习,相互支持,共同创造出了一个个令人惊叹的项目。在这个聚会结束之时,他们深深地明白,虽然角色不同,但每个人都是编程世界中不可或缺的一部分。于是,他们笑着握手,约定下次再相聚,继续共同探索编程的奥秘。

1.初识对象

Dingtalk_20240512100524.jpg

除了对象最基本的属性特征之外,我们了解到对象还有一种用中括号声明的写法,如果不加引号就表示他是一个变量,加了引号就表示是一个字符串属性。

Dingtalk_20240512100742.jpg

我们访问对象上并不存在的属性不会报错,为我们后面讲解包装类埋下伏笔。

2.创建对象的3种方式

我们可以用声明字面量的形式去创建一个对象,也可以使用构造函数去创建,还可以自定义一个构造函数去创建。

3.包装类

首先我们需要明确一点,原始值是不能拥有属性和方法的,只有对象才能拥有。那么为什么这里的打印结果不会报错,而是undefined呢?那就必须要提到包装类的概念了。首先不管是字符串还是数字,v8引擎在解析代码时都会使用其对应的构造函数去创建,也就是说本质上都是对象。然后我们在添加属性时,也会被加上,后面v8就会反应过来,我们明明是声明为了一个数字,根本没有当作一个对象,那么它就会把这个属性给删除掉,最后报错。这就是包装类的执行过程。

Dingtalk_20240512103255.jpg

而这段代码中我们直接使用了构造函数创建对象,那么就和v8一致,因此是可以访问它的属性,而我们乘以2的时候又会把它当作数字来计算,因此正常打印。

针对于字符串时,因为字符串内置了length的属性,因此不管我们用什么方法去创建这个都可以访问到length这个属性。

接下来让我们进行一个总结,针对第一段代码,我们由于v8的机制,访问不了,最终显示undefined,第二段代码可以正常访问,而第三段代码由于内置length属性也可以正常访问。

4.包装类进阶

我们来看接下来这段代码,数组的属性我们可以修改,并且在最终打印的同时长度确实变为了2,而为什么字符串类型的不可以呢?原因是length是字符串对象的内置属性,我们把length改为2的时候,这个时候的length和内置属性的length不是同一个,这个时候又会执行包装类的过程。最终访问的length也一样是内置属性。依然为5.

5.阿里面试题

最后让我们用一个阿里的面试题首尾,大家能知道这道题最后的打印结果是多少嘛?我们逐步剖析,首先str为abc,然后加1,为字符串abc1,在判断类型的时候,test为字符串String,那么它的长度为6,因此我们执行if语句里的内容,这个时候我们运用包装类的知识,就知道打印结果为undefined了。

6.小结

当涉及JavaScript对象和包装类时,有几个关键点需要注意:

  1. JavaScript对象的灵活性: 对象是JavaScript中的核心概念之一,它们允许开发人员创建和操作各种数据类型和结构,包括数组、函数、甚至是自定义对象。
  2. 对象的属性和方法: 对象由属性和方法组成,属性是对象的特征,而方法则是对象的行为。通过访问这些属性和方法,可以对对象进行操作和控制。
  3. 包装类的作用: 包装类是JavaScript中一种特殊的类,用于将基本数据类型(如字符串、数字、布尔值)包装成对象,以便在需要时进行操作。
  4. 字符串、数字和布尔值的包装类: JavaScript提供了String、Number和Boolean等包装类,它们分别用于将字符串、数字和布尔值包装成对象,从而可以调用对象的方法和属性。
  5. 自动装箱和拆箱: JavaScript引擎在必要时会自动将基本数据类型转换为对应的包装对象,这个过程称为自动装箱;而在需要时将包装对象转换为基本数据类型的过程称为拆箱。
  6. 包装类的方法和属性: 每种包装类都提供了一系列的方法和属性,用于对数据进行操作和处理。例如,String对象提供了charAt()、indexOf()等方法,用于操作字符串数据。
  7. 包装类的不可变性: 包装类对象是不可变的,即一旦创建就不能修改其值。但是,可以通过调用对象的方法来获取修改后的值。
  8. 隐式转换和显式转换: JavaScript中经常发生隐式类型转换,而包装类可以帮助开发人员进行显式类型转换,以确保数据的正确性和一致性。
  9. 对象和包装类的关系: 对象和包装类虽然有着不同的特点和用途,但它们之间也存在着一定的联系和依赖关系。开发人员可以根据具体的需求选择使用对象还是包装类。
  10. 性能考虑: 尽管包装类提供了便利的方法和属性,但在性能方面可能会比直接操作基本数据类型稍慢,因此在性能敏感的场景中需要注意使用方式。

这是一个从 https://juejin.cn/post/7368413596954705947 下的原始话题分离的讨论话题