JavaScript 对象包装器 下载APP
章节索引 :

对象包装器

对象包装器也被称为 包装器包装对象.

所有包装器都是内置对象,如 NumberStringBoolean 等。

1. 装箱

通常在对一个变量赋值的时候,都会直接给定一个字面量。

var string = '996 say no!';

console.log(typeof string); // 输出:"string"

通过类型的检测,可以知道他是一个字符串。

但又可以访问到一些属性,比如 length

var string = '996 say no!';

console.log(typeof string); // 输出:"string"
console.log(string.length); // 输出:11

照道理讲只有对象才能访问到属性,字符串字面量只是一个值而已。

这里就是因为 JavaScript 内部的拆装箱的机制。

当把一个字面量像对象一样操作的时候,JavaScript 会进行装箱操作。

可以把上面这份代码理解成下面这份:

var string = '996 say no!';

console.log(typeof string); // 输出:"string"
console.log((new String(string)).length); // 输出:11

其中的 new String 就是装箱操作,String 就是字符串的对象包装器。

这样将字符串转换成了对象,就能访问到其属性了。

需要注意的是,对一个字面量包装后不会修改原始值,上述例子中的 string 变量的值依然是字符串字面量,不会变成对象,所以每一次对一个字面量做访问属性或方法的操作时,都会做一次装箱操作。
许多开发者会考虑频繁装箱的性能影响,其实通常是不必要的,一是现在计算机和浏览器的处理执行速度很快了,几乎可以忽略不计装箱的开销,另外就是业务开发中在没有明确的性能要求下,是不考虑性能的,以完成业务逻辑为主。

2. 拆箱

拆箱操作很多时候是隐式转换过程中发生的。

如将字符串进行对象相等操作:

var obj = {
  toString: function() {
    return '996';
  },
};

console.log(
  '996' == obj,
); // 输出:true

上述例子,在字符串字面量 996 和对象 obj 进行比较的时候,会尝试将右侧的对象转化成字符串,即调用 toString 方法(在 ES6 中则会先看有没有部署 Symbol.toPrimitive 方法)。

这个即使拆箱的过程。

3. 小结

理解对象包装器的作用,可以更好的理解内置对象的用途。

前置知识
什么是JavaScript 开发与学习环境准备 调试方案
基础
JavaScript 变量 JavaScript 数据类型 JavaScript if 语句 JavaScript for 语句 JavaScript 算数运算符 JavaScript 比较运算符 JavaScript 逻辑运算符 JavaScript 表达式 JavaScript 函数 JavaScript 对象 JavaScript 字符串 JavaScript 数字 JavaScript 数组 JavaScript switch 语句 JavaScript while 语句 JavaScript break与continue JavaScript with document.cookie
内置对象
JavaScript Function JavaScript Math JavaScript Date JavaScript RegExp JavaScript JSON
JavaScript 与 DOM
什么是DOM DOM和JavaScript的关系 获取和操作 DOM 节点 JavaScript DOM与事件 JavaScript DOM 事件绑定 JavaScript DOM 事件对象 JavaScript DOM 事件流 JavaScript DOM 事件优化 JavaScript DOM 自定义事件
表单处理
使用 JavaScript 校验表单
BOM
BOM window 对象 常用的 BOM 相关对象 BOM 常用属性和方法
AJAX
JavaScript AJAX
进阶知识
JavaScript 异常处理 JavaScript 三元运算符 JavaScript 逗号操作符 JavaScript void JavaScript typeof JavaScript delete JavaScript debugger JavaScript getter &setter JavaScript 原型 JavaScript new操作符和构造函数 JavaScript instanceof JavaScript this JavaScript 严格模式 JavaScript 作用域 JavaScript 闭包 JavaScript 变量提升 JavaScript 对象包装器
常用库
jQuery Lodash moment.js swiper
进阶指南
ECMAScript6 Node.js Babel CSS 预处理器 代码规范 TypeScript Web Components 小程序 Vue / React / Angular JavaScript 关键字
常见疑点与误区
分号问题 对象属性访问问题 this 使用问题 浮点数精度问题 独一无二的 NaN 避免全局污染 控制台观察对象问题 根据环境选择语言特性
扩展
相关资源