玩转JS基础——包装类型

简介: 在 ES 中,数据的分类分为基本数据类型和引用类型。

包装类型

在 ES 中,数据的分类分为基本数据类型引用类型

按照最新 ES 标准定义,基本数据类型(primitive value)包括 undefined、null、boolean、number、symbol、string

引用类型包括 Object、Array、Date、RegExp 等。

基本数据类型和引用类型这两个类型其中一个很明显的区别是,引用类型有自己内置的方法,也可以自定义其他方法用来操作数据,而基本数据类型不能像引用类型那样有自己的内置方法对数据进行更多的操作。

但基本数据类型真的就不能使用方法吗?对于部分基本类型来说确实是这样的。

但是有 3 个是 ES 提供了对应的特殊引用类型(包装类型)Boolean、Number、String

基本包装类型,和其他引用类型一样,拥有内置的方法可以对数据进行额外操作。如下:

var str = 'hello'; // string 基本类型
var s2 = str.charAt(0);
console.log(s2); // h

上面的 string 是一个基本类型,但是它却能调用 charAt( )  的方法。

其主要是因为在执行第二行代码时,后台会自动进行下面的步骤:

  1. 自动创建 String 类型的一个实例(和基本类型的值不同,这个实例就是一个基本包装类型的对象)
  2. 调用实例(对象)上指定的方法
  3. 销毁这个实例

用代码的方式解释就是如下:

//我们平常写程序的过程:
var str = 'hello'; // string 基本类型
var s2 = str.charAt(0); // 在执行到这一句的时候 后台会自动完成以下动作 :
(
    var _str = new String('hello'); // 1 找到对应的包装对象类型,然后通过包装对象创建出一个和基本类型值相同的对象
    var s2 = _str.charAt(0); // 2 然后这个对象就可以调用包装对象下的方法,并且返回结给 s2.
    _str = null;  //    3 之后这个临时创建的对象就被销毁了, str =null; 
)
console.log(s2); // h 
console.log(str); // hello

基本类型的值虽然没有方法可以调用,但是后台临时创建的包装对象上有内置方法可以让我们调用方法,因此这样我们就可以对字符串、数值、布尔值这三种基本数据类型的数据进行更多操作。

而什么时候后台会自动创建一个对应的基本包装类型的对象,取决于当前执行的代码是否是为了获取他的值。

每当读取一个基本类型的值,也就是当我们需要从内存中获取到他的值时(这个访问过程称为读取模式),这时后台就会自动创建一个基本包装类型的对象。例如:

var test = 'hhh'
console.log(test) // 读取模式,后台自动创建基本包装类型对象
var test2 = test // 赋值给变量 test2,也需要读取 test 的值,同上

基本包装类型的对象和引用类型的对象最大的一个区别是,对象的生存期不同,导致的一个结果就是,基本包装类型无法自定义自己的方法。

对于引用类型的数据,在执行流离开当前作用域之前都会保存在内存中,而对于自动创建的基本包装类型的对象,只存在于一行代码的执行瞬间,执行完毕就会立即被销毁。\
如下:

var str = 'test'
str.test = 'hhh'
console.log(str.test) //undefined

上面第二行代码给自动创建的 String 实例对象添加了 test 属性,虽然此刻代码执行时他是生效的,但是在这行代码执行完毕后该 String 实例就会立刻被销毁,String 实例的 test 属性也就不存在了。

当执行第三行代码时,由于是读取模式,又重新创建了新的 String 实例,而这个新创建的 String 实例没有 test 属性,结果也就是 undefined

用代码的方式解释就是如下:

var str = 'hello';
str.number = 10; //假设我们想给字符串添加一个属性 number ,后台会有如下步骤
(
    var _str = new String('hello'); // 1 找到对应的包装对象类型,然后通过包装对象创建出一个和基本类型值相同的对象
    _str.number = 10; // 2 通过这个对象调用包装对象下的方法 但结果并没有被任何东西保存
    _str =null; // 3 这个对象又被销毁
)
console.log(str.number); // undefined  当执行到这一句的时候,因为基本类型本来没有属性,后台又会重新重复上面的步骤
(
   var str = new String('hello');// 1 找到基本包装对象,然后又新开辟一个内存,创建一个值为 hello 对象
   str.number = undefined;// 2 因为包装对象下面没有 number 这个属性,所以又会重新添加,因为没有值,所以值是未定义;然后弹出结果
   str =null; // 3 这个对象又被销毁
)

那么我们怎么才能给基本类型添加方法或者属性呢?

答案是在基本包装对象的原型下面添加,每个对象都有原型。

//给字符串添加方法  要写到对应的包装对象的原型下才行
var str = 'hello';
String.prototype.last= fuction(){ 
    return this.charAt(this.length);
}; 
str.last(); // 5 执行到这一句,后台依然会偷偷的干这些事
(
    var _str = new String('hello');// 找到基本包装对象,new一个和字符串值相同的对象,
    _str.last();  // 通过这个对象找到了包装对象下的方法并调用 
    _str =null; //  这个对象被销毁
)
相关文章
|
21天前
|
JavaScript
常见函数的4种类型(js的问题)
常见函数的4种类型(js的问题)
11 0
|
1月前
|
JSON JavaScript 前端开发
解决js中Long类型数据在请求与响应过程精度丢失问题(springboot项目中)
解决js中Long类型数据在请求与响应过程精度丢失问题(springboot项目中)
40 0
|
23天前
|
JavaScript 前端开发
JavaScript 中如何检测一个变量是一个 String 类型?
JavaScript 中如何检测一个变量是一个 String 类型?
21 2
|
3月前
|
JSON JavaScript 前端开发
抓住异常,解救你的代码世界:你应该了解的 JavaScript 异常类型
抓住异常,解救你的代码世界:你应该了解的 JavaScript 异常类型
|
3月前
|
JavaScript 前端开发
JavaScript一种新的数据结构类型Map
JavaScript一种新的数据结构类型Map
|
4月前
|
存储 JavaScript 前端开发
JavaScript 中松散类型的理解
JavaScript 中松散类型的理解
|
20天前
|
JavaScript 前端开发
JavaScript数组的功能内置类型
数组是JavaScript的内置类型,JavaScript数组的功能特别强大。下面简单介绍一下JavaScript数组。
|
23天前
|
存储 JavaScript 前端开发
JavaScript 中松散类型的理解
JavaScript 中松散类型的理解
26 3
|
1月前
|
Web App开发 iOS开发
编程笔记 html5&css&js 026 HTML输入类型(2/2)
编程笔记 html5&css&js 026 HTML输入类型(2/2)
|
1月前
|
移动开发 数据安全/隐私保护 HTML5
编程笔记 html5&css&js 025 HTML输入类型(1/2)
编程笔记 html5&css&js 025 HTML输入类型(1/2)