我的编程空间,编程开发者的网络收藏夹
学习永远不晚

JavaScript 原始值与包装对象

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

JavaScript 原始值与包装对象

前言

随着 JavaScript 越来越流行,越来越多地开发者开始接触并使用 JavaScript。

同时我也发现,有不少开发者对于 JavaScript 最基本的原始值和包装对象都没有很清晰的理解。

那么本篇文章,就由渣皮来给大家详细介绍一下它们。

话不多说,Let's go!

正文

原始类型 (Primitive types)

原始类型也被称为“基本类型”。

目前在 JavaScript 中有以下几种原始类型:

  • string(字符串)
  • number(数字)
  • boolean(布尔)
  • null(空)
  • undefined(未定义)
  • bigint(大整数,ES6)
  • symbol(标志?ES6)

如下:

  1. typeof 'chenpipi';  // "string" 
  2. typeof 12345;       // "number" 
  3. typeof true;        // "boolean" 
  4. typeof null;        // "object" 
  5. typeof undefined;   // "undefined" 
  6. typeof 12345n;      // "bigint" 
  7. typeof Symbol();    // "symbol" 

 特别注意

typeof null 虽然返回 "object",但是这不代表 null 就是对象,这其实是 JavaScript 的一个 Bug,且从 JavaScript 诞生以来便如此。

在 JavaScript 最初的实现中,JavaScript 中的值是由一个表示类型的标签和实际数据值表示的。对象的类型标签是 0。由于 null 代表的是空指针(大多数平台下值为 0x00),因此,null 的类型标签是 0,typeof null 也因此返回 "object"。

The history of “typeof null”:https://2ality.com/2013/10/typeof-null.html

原始值 (Primitive values)

原始值也就是原始类型的值(数据)。

A primitive value is data that is not an object and has no methods.

原始值是一种没有任何方法的非对象数据。

也就是说,string、number 和 boolean 等原始类型的值本身是没有任何属性和方法的。

 这个时候嗅觉敏锐的小伙伴是不是已经察觉到有什么不对劲了?

是孜然!我加了孜然!(手动狗头并划掉)

这里有一个非常有意思的点,但是在讨论这个问题之前,先让我们认识下包装对象。

包装对象 (Wrapper objects)

除了 null 和 undefined 外的原始类型都有其相应的包装对象:

  • String(字符串)
  • Number(数字)
  • Boolean(布尔)
  • BigInt(大整数,ES6)
  • Symbol(标志?ES6)

对象 (Object)

对象是引用类型。

首先,包装对象本身是一个对象,也是函数。

  1. String instanceof Object;   // true 
  2. String instanceof Function; // true 

构造函数 (Constructor)

实例 (Instance)

其中 String、Number 和 Boolean 均支持使用 new 运算符来创建对应的包装对象实例。

例如 String 的声明(节选):

  1. interface StringConstructor { 
  2.   new(value?: any): String; 
  3.   (value?: any): string; 
  4.   readonly prototype: String; 
  5. declare var String: StringConstructor; 

使用 new 运算符得到的数据是对象(Object):

  1. // 字符串 
  2. typeof 'pp';                      // "string" 
  3. typeof new String('pp');          // "object" 
  4. new String() instanceof Object;   // true 
  5. // 数字 
  6. typeof 123;                       // "number" 
  7. typeof new Number(123);           // "object" 
  8. new Number() instanceof Object;   // true 
  9. // 布尔 
  10. typeof true;                      // "boolean" 
  11. typeof new Boolean(true);         // "object" 
  12. new Boolean() instanceof Object;  // true 

我们可以调用包装对象实例的 valueOf() 函数来获取其原始值:

  1. // 字符串 
  2. let s = new String('pp'); 
  3. s.valueOf();                // "pp" 
  4. typeof s.valueOf();         // "string" 
  5. // 数字 
  6. let n = new Number(123); 
  7. n.valueOf();                // 123 
  8. typeof n.valueOf();         // "number" 
  9. // 布尔 
  10. let b = new Boolean(true); 
  11. b.valueOf();                // true 
  12. typeof b.valueOf();         // "boolean" 

“异类” (Attention)

而 BigInt 和 Symbol 都属于“不完整的类”,不支持 new 运算符。

例如 BigInt 的声明(节选):

  1. interface BigIntConstructor { 
  2.   (value?: any): bigint
  3.   readonly prototype: BigInt
  4. declare var BigInt: BigIntConstructor; 

可以看到 BigInt 的声明中没有 new 运算符相关函数。

普通函数 (Function)

包装对象也可以作为普通函数来使用。

其中 String()、Number() 和 Boolean() 函数都可以用来对任意类型的数据进行显式类型转换。

另外 Object() 函数也可用于显式类型转换,但本文不再展开。

String

示例代码:

  1. typeof String();    // "string" 
  2. String();           // "" 
  3. String('pp');       // "pp" 
  4. String(123);        // "123" 
  5. String(true);       // "true" 
  6. String(false);      // "false" 
  7. String(null);       // "null" 
  8. String(undefined);  // "undefined" 
  9. String([]);         // "" 
  10. String({});         // "[object Object]" 

小贴士 1

当我们使用 String() 函数来转换对象时,JavaScript 会先访问对象上的 toString() 函数,如果没有实现,则会顺着原型链向上查找。

举个栗子:执行 String({ toString() { return 'pp'; } }) 返回的结果是 "pp",并非 "[object Object]"。

所以 String() 函数并不能够用来判断一个值是否为对象(会翻车)。

小贴士 2

常用的判断对象的方式为 Object.prototype.toString({}) === '[object Object]'。

举个栗子:执行 Object.prototype.toString({ toString() { return 'pp'; } }) 返回的是 "[object Object]"。

Number

 示例代码:

  1. typeof Number();    // "number" 
  2. Number();           // 0 
  3. Number('');         // 0 
  4. Number('pp');       // NaN 
  5. Number(123);        // 123 
  6. Number(true);       // 1 
  7. Number(false);      // 0 
  8. Number(null);       // 0 
  9. Number(undefined);  // NaN 
  10. Number([]);         // 0 
  11. Number({});         // NaN 

小贴士

对于 Number() 函数来说,可能最实用的转换就是将 true 和 false 转换为 1 和 0 吧。

Boolean

示例代码:

  1. typeof Boolean();   // "boolean" 
  2. Boolean();          // false 
  3. Boolean('');        // false 
  4. Boolean('pp');      // true 
  5. Boolean(0);         // false 
  6. Boolean(1);         // true 
  7. Boolean(null);      // false 
  8. Boolean(undefined); // false 
  9. Boolean([]);        // true 
  10. Boolean({});        // true 

小贴士

某些情况下,我们会在数据中使用 0 和 1 来表示真假状态,此时就可以使用 Boolean() 进行状态的判断。

BigInt

BigInt() 函数用于将整数转换为大整数。

该函数接受一个整数作为参数,传入参数若为浮点数或任何非数字类型数据都会报错。

 示例代码:

  1. BigInt(123);        // 123n 
  2. BigInt(123n);       // 123n 
  3. typeof 123n;        // "bigint" 
  4. typeof BigInt(123); // "bigint" 

BigInt & Number

需要注意的是,BigInt 和 Number 是不严格相等(宽松相等)的。

示例代码:

  1. 123n === 123; // false 
  2. 123n == 123;  // true 

Symbol

Symbol() 函数用于创建一个 symbol 类型的值。

该函数接受一个字符串作为描述符(参数),如果传入其他类型的值则会被转换为字符串(除了 undefined)。

注意,每一个 symbol 值都是独一无二的,即使它们的描述符都是一样的。

且 symbol 类型的数据只能通过 Symbol() 函数来创建。

示例代码:

  1. // 后面的返回值是 Devtools 模拟出来的,并非实际值 
  2. Symbol('pp');                   // Symbol(pp) 
  3. Symbol(123);                    // Symbol(123) 
  4. Symbol(null);                   // Symbol(null
  5. Symbol({});                     // Symbol([object Object]) 
  6.  
  7. // 类型 
  8. typeof Symbol('pp');            // "symbol" 
  9. Symbol('pp') === Symbol('pp');  // false 
  10.  
  11. // 描述符 
  12. Symbol('pp').description;       // "pp" 
  13. Symbol(123).description;        // "123" 
  14. Symbol({}).description;         // "[object Object]" 
  15. Symbol().description;           // undefined 
  16. Symbol(undefined).description;  // undefined 

原始值不是对象 (Primitive not Object)

有意思的来了~

没有属性和方法 (No properties, no functions)

本文前面有提到:「原始值是一种没有任何方法的非对象数据。」

我们都知道对象(Object)上可以有属性和方法。

但是字符串不是对象,所以你不能给字符串增加属性。

 做个小实验:

  1. let a = 'chenpipi'
  2. console.log(a.length);  // 8 
  3. // 尝试增加新的属性 
  4. a.name = '吴彦祖'
  5. console.log(a.name);    // undefined 
  6. // 尝试修改已有的属性 
  7. typeof a.slice;         // "function" 
  8. a.slice = null
  9. typeof a.slice;         // "function" 

渣皮小剧场

此时一位头铁的小伙伴使用了反驳技能。

渣皮你别在这忽悠人了,我平时写 Bug 哦不写代码的时候明明可以调用到字符串、数字和布尔值上的方法!

 比如下面这段代码,能够正常执行并得到符合预期的结果:

  1. // 字符串 
  2. let s = 'chenpipi'
  3. s.toUpperCase();      // "CHENPIPI" 
  4. 'ChenPiPi'.slice(4);  // "PiPi" 
  5. // 数字 
  6. let n = 123; 
  7. n.toString();         // "123" 
  8. (123.45).toFixed(2);  // "123.5" 
  9. // 布尔值 
  10. let b = true
  11. b.toString();         // "true" 
  12. false.toString();     // "false" 

无用小知识

有没有发现,数字的字面量后面不能直接调用函数?例如执行 123.toString() 会报 SyntaxError(语法错误)。

这是因为数字(浮点数)本身会用到小数点 .,而调用函数也需要用小数点,这时就出现了歧义(字符串和布尔值就没有这种烦恼)。

对于这种情况,我们可以使用括号 () 将数字包裹起来,如 (123).toString();或者使用两个连续的小数点 .. 来调用函数,如 123..toString()。

 奇了怪了

那么既然字符串不是对象,那么为什么字符串会有属性和方法呢?

转念一想,数字就是数字,数字身上怎么会有方法呢?

这确实不符合逻辑,但是这又与实际相矛盾。

咋回事呢???

替身使者 (I can't translate this)

答案揭晓~

 暗中操作

以字符串(string)为例,当我们在代码中读取字符串的属性或者方法时, JavaScript 会静默地执行下面的操作:

  1. 将字符串通过 new String() 的方式来创建一个临时的包装对象实例;
  2. 通过创建的对象来执行我们的代码逻辑(读取属性或执行函数);
  3. 临时对象不再使用,可以被销毁。

如下面的栗子:

  1. let a = 'chenpipi'
  2. console.log(a);   // "chenpipi" 
  3. // ------------------------------ 
  4. let b1 = a.length; 
  5. console.log(b1);  // 8 
  6. // 上面的代码相当于: 
  7. let b2 = (new String(a)).length; 
  8. console.log(b2);  // 8 
  9. // ------------------------------ 
  10. let c1 = a.toUpperCase(); 
  11. console.log(c1);  // "CHENPIPI" 
  12. // 上面的代码相当于: 
  13. let c2 = (new String(a)).toUpperCase(); 
  14. console.log(c2);  // "CHENPIPI" 

数字(number)和布尔值(boolean)同理,但数字通过 new Number() 来创建临时对象,而布尔值则通过 new Boolean() 来创建。

除了上面的例子,最有力的证明,就是他们的构造函数:

  1. 'chenpipi'.constructor === String;  // true 
  2. (12345).constructor === Number;     // true 
  3. true.constructor === Boolean;       // true 

这一切都是 JavaScript 在暗中完成的,且过程中产生的临时对象都是一次性的(用完就丢)。

原来如此

芜湖,这么一来就说得通了!

这也就能解释为什么我们能够访问字符串上的属性和方法,却不能增加或修改属性。

那是因为我们实际操作的目标其实是 JavaScript 创建的临时对象,而并非字符串本身!

所以我们的增加或修改操作实际上是生效了的,只不过是在临时对象上生效了!

 就像这样:

  1. // 代码中: 
  2. let a = 'chenpipi'
  3. a.name = '吴彦祖'
  4. console.log(a.name);  // undefined 
  5.  
  6. // 相当于: 
  7. let a = 'chenpipi'
  8. (new String(a)).name = '吴彦祖'
  9. console.log(a.name);  // undefined 
  10.  
  11. // 相当于: 
  12. let a = 'chenpipi'
  13. let temp = new String(a); 
  14. temp.name = '吴彦祖'
  15. console.log(a.name);  // undefined 

总结 (Summary)

以上,就是本篇文章的全部内容了。

最后我们来总结一下:

  1. 多数原始类型都有相应的包装对象;
  2. 有些包装对象可以被 new,有些不行;
  3. 包装对象一般被用来进行显式的类型转换;
  4. 对象上有属性和方法;
  5. 原始值上没有属性和方法;
  6. 原始值上也不能有属性和方法;
  7. 但我们可以像操作对象一样来操作原始值;
  8. 这是因为 JavaScript 在执行代码的时候偷偷搞小动作;
  9. JavaScript 会用临时的包装对象来替原始值执行操作。

我们平时写代码的时候不太会注意到这件事,实际上这些也不会影响到我们写代码。

所以,这篇文章不就白看啦?

是,也不全是~

知己知彼,百战百胜。

学会以上这些无用小知识,也算是对 JavaScript 有了更深的理解了吧,至少还能用来吹牛皮(手动狗头~)。

相关资料

《JavaScript 高级程序设计(第4版)》

《JavaScript 权威指南(第6版)》

Primitive - MDN:https://developer.mozilla.org/en-US/docs/Glossary/Primitive

The history of “typeof null”:https://2ality.com/2013/10/typeof-null.html

 

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

JavaScript 原始值与包装对象

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

JavaScript 原始值与包装对象

随着 JavaScript 越来越流行,越来越多地开发者开始接触并使用 JavaScript。同时我也发现,有不少开发者对于 JavaScript 最基本的原始值和包装对象都没有很清晰的理解。

JavaScript原始值与包装对象的示例分析

这篇文章主要介绍JavaScript原始值与包装对象的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!JavaScript有什么特点1、js属于一种解释性脚本语言;2、在绝大多数浏览器的支持下,js可以在多种平
2023-06-15

JavaScript对象转原始值是什么

这篇文章主要讲解了“JavaScript对象转原始值是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript对象转原始值是什么”吧!Object.prototype.valu
2023-06-22

JavaScript原始包装类型实例分析

这篇文章主要讲解了“JavaScript原始包装类型实例分析”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript原始包装类型实例分析”吧!引出问题: 如下一段简单的代码,变量a
2023-06-30

JavaScript中怎么将对象转换为原始类型

这篇文章将为大家详细讲解有关JavaScript中怎么将对象转换为原始类型,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。说明1、将原始类型的对象转换为内置的[ToPrimitive]函数。2
2023-06-20

你不知道的JavaScript—探索 JavaScript 对象与原型

JavaScript 对象和原型是该语言的核心特性之一,通过本文的介绍,我们深入探讨了 JavaScript 对象和原型的概念、创建、访问与修改、原型链、原型继承以及实际应用。

JavaScript的原型对象与原型链实例分析

本篇内容介绍了“JavaScript的原型对象与原型链实例分析”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!一、prototype和__pr
2023-07-02

php中值得收藏的PDO对象安装配置与使用

注意:这一步在 PHP 5.3及更高版本中不是必须的,对于 PDO 不再需要做为一个 DLL 文件。
2016-03-15

编程热搜

  • Python 学习之路 - Python
    一、安装Python34Windows在Python官网(https://www.python.org/downloads/)下载安装包并安装。Python的默认安装路径是:C:\Python34配置环境变量:【右键计算机】--》【属性】-
    Python 学习之路 - Python
  • chatgpt的中文全称是什么
    chatgpt的中文全称是生成型预训练变换模型。ChatGPT是什么ChatGPT是美国人工智能研究实验室OpenAI开发的一种全新聊天机器人模型,它能够通过学习和理解人类的语言来进行对话,还能根据聊天的上下文进行互动,并协助人类完成一系列
    chatgpt的中文全称是什么
  • C/C++中extern函数使用详解
  • C/C++可变参数的使用
    可变参数的使用方法远远不止以下几种,不过在C,C++中使用可变参数时要小心,在使用printf()等函数时传入的参数个数一定不能比前面的格式化字符串中的’%’符号个数少,否则会产生访问越界,运气不好的话还会导致程序崩溃
    C/C++可变参数的使用
  • css样式文件该放在哪里
  • php中数组下标必须是连续的吗
  • Python 3 教程
    Python 3 教程 Python 的 3.0 版本,常被称为 Python 3000,或简称 Py3k。相对于 Python 的早期版本,这是一个较大的升级。为了不带入过多的累赘,Python 3.0 在设计的时候没有考虑向下兼容。 Python
    Python 3 教程
  • Python pip包管理
    一、前言    在Python中, 安装第三方模块是通过 setuptools 这个工具完成的。 Python有两个封装了 setuptools的包管理工具: easy_install  和  pip , 目前官方推荐使用 pip。    
    Python pip包管理
  • ubuntu如何重新编译内核
  • 改善Java代码之慎用java动态编译

目录