JavaScript知识点讲解——包装类

JavaScript中的包装类是指可以将基本数据类型(如字符串、数值和布尔值)转换为对象的类。这些类分别是:String、Number和Boolean。

当基本类型的值调用其对应包装类的方法时,JavaScript会自动将基本类型的值转换为该包装类的对象,并在该对象上调用方法。调用完成后,对象会被销毁,重新变成基本类型的值。

数据类型

  • 原始类型:值直接存在调用栈中

在JavaScript中,原始类型指的是不能被修改的简单数据类型,包括:

  1. 数字(Number)
  2. 布尔值(Boolean)
  3. 字符串(String)
  4. 空值(Null)
  5. 未定义(Undefined)
  6. ES6引入的Symbol类型

这些原始类型的值直接存储在变量或常量中,并被保存在调用栈中。它们的值不能被修改,操作它们会返回一个新的值。

需要注意的是,NullUndefined是JavaScript中的特殊类型,表示空值和未定义的值。它们的使用场景略有不同,Null通常用于显式地表示一个空值,而Undefined则表示一个未定义的值。

  • 引用类型:值存在堆中,在调用栈里存放的只是堆中的引用地址

在JavaScript中,引用类型是一种复杂的数据类型,它可以存储多个值或者其他对象,并且可以通过引用来访问和操作这些值或对象。

常见的引用类型包括:

  1. 对象(Object)
  2. 数组(Array)
  3. 函数(Function)
  4. 正则表达式(RegExp)

引用类型的特点是它们的值存储在堆内存中,而变量中存储的只是对堆内存中的地址的引用。这意味着对引用类型的操作实际上是在操作引用,而不是直接操作值本身。

需要注意的是,在JavaScript中,函数也是一种特殊的对象,可以拥有属性和方法。因此,函数也可以被认为是一种引用类型。

对象的创建

  1. 对象字面量(Object Literal):使用大括号 {} 创建一个对象,并在大括号内部定义属性和方法。
  2. 构造函数(Constructor):通过定义一个构造函数,使用 new 关键字创建对象的实例。构造函数通常以大写字母开头,习惯上与类名相似
  3. 原型链(Prototype):使用原型链创建对象时,可以将共享的属性和方法定义在构造函数的原型对象上,从而实现对象之间的共享。
  4. ES6中的类(Class):ES6引入了类的概念,可以使用关键字 class 定义一个类,并使用 new 关键字创建对象的实例。

new的过程

  1. 创建一个新对象:当使用 new 关键字调用构造函数时,会创建一个新的空对象。
  2. 将新对象的原型链接到构造函数的原型:新创建的对象会被赋予一个特殊的内部属性 [[Prototype]](在一些浏览器中也可以通过 __proto__ 访问),该属性会指向构造函数的 prototype 属性。
  3. 在新对象上执行构造函数:将构造函数内部的 this 指向新创建的对象,并执行构造函数内部的代码。在构造函数内部可以给新对象添加属性和方法。
  4. 返回新对象:如果构造函数内部没有显式返回其他对象,则会默认返回新创建的对象实例。
ini 复制代码
function Person(name, age) {
this.name = name;
this.age = age;
}
var person1 = new Person("Alice", 25);

在上述示例中,new Person("Alice", 25) 的过程包括:

  1. 创建一个新的空对象 {}
  2. 将新对象的 [[Prototype]] 原型链接到 Person.prototype
  3. 在新对象上执行 Person 构造函数,将 this 指向新对象,并给新对象添加 nameage 属性。
  4. 返回新对象 person1
相关推荐
天宇&嘘月2 小时前
web第三次作业
前端·javascript·css
小王不会写code3 小时前
axios
前端·javascript·axios
luckyext4 小时前
HBuilderX中,VUE生成随机数字,vue调用随机数函数
前端·javascript·vue.js·微信小程序·小程序
小小码农(找工作版)4 小时前
JavaScript 前端面试 4(作用域链、this)
前端·javascript·面试
鱼樱前端5 小时前
深入JavaScript引擎与模块加载机制:从V8原理到模块化实战
前端·javascript
yangjiajia1234566 小时前
vue3 ref和reactive的区别
前端·javascript·vue.js
诚信爱国敬业友善6 小时前
Vue 基础二(进阶使用)
前端·javascript·vue.js
なし.7 小时前
【Web前端开发精品课 HTML CSS JavaScript基础教程】第二十四章课后题答案
前端·javascript·css·html
随风起舞17 小时前
node.js里的bind,apply, call的区别是什么
前端·javascript·node.js