当代码动了「欲」念:JS对象的构造、new生与包装类的爱抚

78 阅读4分钟

Hello ,屏幕前的小伙伴们大家好!欢迎大家来到 Sigma老师今天的编程小课堂。

在这堂课开始之前,老师想问问大家你真的了解自己的对象吗?

这个时候有的小伙伴就会说,老师我可没有对象(︶︹︶) ,欸,同学我要纠正你这个想法,你有,而且有很多个对象,因为在 JS 这门语言中 万物皆对象

哦?主公,此话怎讲?愿闻其详。

想必小伙伴们一定还记得 JS 中的数据类型吧。什么Σ(°ロ°),你不会忘记了吧。没关系,谁叫 Sigma 老师宠学生呢\ (^o^)/,让我们一起复习一下吧。

数据类型
  • 原始类型 :string,num,boolean,undifined,null,symbol,bigInt.
  • 引用类型:function,array,object.

好的,开始聊聊咱们今天的主角 -- 对象

对象

同学们,回想一下,咱们是怎样创建对象来着? 好,牛同学已经迫不及待地说出来了

const person = {
    name: '小牛'
    age: 18
}

\(★^∀^★)/ 值得奖励,牛同学课后记得找班长领100块钱。

好,那么上面这种创建方法我们称作 创建对象字面量

大家是不是见过这样的一段代码呢?

const obj = new Object() //构造函数
obj.name = '小牛'
obj.age = 18

那这两段代码有什么区别吗?

咱们console.log(obj) 输出一下会发现和上面那个代码的结果是一样的,也形成了一个的对象

这种创建对象的方式称为 new Object()

注意这里的O要大写

我们通常把第一行的函数称为构造函数

第三种方法与第二种类似

function Person () {}
const obj = new Person()

咱们console.log(obj) 输出一下会得到一个{},而看到{},我们就知道了这是一个对象

这种方法我们称作 new 调用自定义的构造函数

构造函数

这个时候有小伙伴会发出疑问了,构造函数和普通函数有什么区别呢?

其实和普通函数没有区别,只是调用方法不同

当一个函数被 new 调用时,称为构造函数

当我们想批量化创建对象时,可以使用构造函数

new 干了什么?

有很多小伙伴在看到第二和第三种创建对象的那个 new 时就会有疑问,这个new是干啥的呀?

首先,new 不是单独使用的,而是和 this 配套使用的,那是怎么个使用法呢?

小伙伴们看下面这个代码

function Car(color) {
this.name = 'su7'
this.height = '1445'
this.long ='4997'
this.weight = '1980'
this.color = color
}

const Car = mew Car('purple')

console.log(car1);

其实咱们写的这段代码效果和下面这段代码是一样的

function Car {
name : 'su7'
height :'1445'
long :'4997'
weight : '1980'
color : purple
}

所以由此可见,new 在这个函数中干的事情是

  1. 创建一个 this 对象

  2. 执行构造函数中的代码,就是给 this 对象添加属性值

  3. 返回这个 this 对象

包装类

这是啥意思啊?

在 JS 这门语言中,原始类型一定无法添加属性和方法,属性和方法是对象独有的 但是用户要访问一些属性怎么办呢?

例如

const str = 'hello'
console.log(str.length)

用户想知道这个字符串的长度,但是无法获取怎么办呢?

解决方法是把原始类型临时包装起来,临时包装形成一个对象,在他身上(原型)添加一些属性,好让用户可以直接访问到,而JS官方早就给每个原始类型和引用类型写好了一大堆用户可能要访问到的一些属性整理成了函数可以直接访问到,并且这些函数一般用其对应的类型名字(首字母大写),例如 str 对应是String(),num 对应的是Number。

所以,一些我们看起来很正常的代码,V8实际执行起来不一样哟

上面那几行代码在V8眼中是这样的


// 当你访问 str.length 时,V8引擎:
// 1. 检测到对原始值访问属性
// 2. 创建包装对象:const temp = new String(str)
// 3. 访问属性:temp.length  
// 4. 返回结果后:temp = null (销毁包装)

所以包装类的特点有这些

  1. 当用户定义一个字面量,V8 默认执行的还是 new xxx()
  2. 一个包装类的实例对象,在参与运算时,会自动拆箱成原始类型
  3. 因为 js 是弱类型语言,所以只有在赋值语句执行时才会判断值的类型(typeof),当这个值被判定为原始类型时,就会自动将包装对象上添加的属性移除

有什么问题,可以在评论区讨论咯。