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 分钟前
JavaScript 加载对浏览器渲染的影响
前端·javascript·浏览器
浪裡遊2 小时前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
夏梦春蝉3 小时前
ES6从入门到精通:常用知识点
前端·javascript·es6
我想说一句3 小时前
当饼干遇上代码:一场HTTP与Cookie的奇幻漂流 🍪🌊
前端·javascript
南屿im3 小时前
基于 Promise 封装 Ajax 请求:从 XMLHttpRequest 到现代化异步处理
前端·javascript
杨进军3 小时前
前端线上问题的那些事儿
前端·javascript·前端框架
每天开心4 小时前
深入探索 React Hooks: useState 与 useEffect 的力量 🌟
前端·javascript·ai编程
卸任4 小时前
性能优化大作战:React.memo 在可编辑列表中的奇效
前端·javascript·react.js
WildBlue4 小时前
阮一峰闭包:JavaScript最优雅的"背包"魔法!✨
前端·javascript
Dream耀4 小时前
React Hooks 指南:useState 与 useEffect 的用法与技巧
前端·javascript·react.js