原来JS还可以这样拆箱转换详解


Posted in Javascript onFebruary 01, 2019

前言

在读 Winter 大佬的《重学前端》栏目时,重温了 JS 的「拆箱转换」。「装箱转换」与「拆箱转换」以前都是了解的,今天来看,自己所谓的了解也真是一知半解。在阅读 Winter 老师写的内容后,对「拆箱转换」这个知识点还是不甚清楚,因此我再去深入地了解一番,参考资料详见文末的「参考链接」。

被我们忽略的表象

首先,我们来看一下例子:

const a = {
 name: 'a',
 toString () {
  console.log(this);
  console.log('toString');
  return { name: 'toString' };
 },
 valueOf () {
  console.log(this);
  console.log('valueOf');
  return { name: 'valueOf' };
 }
};

a * 2;
// {name: "a", toString: ƒ, valueOf: ƒ}
// valueOf
// {name: "a", toString: ƒ, valueOf: ƒ}
// toString
// Uncaught TypeError: Cannot convert object to primitive value

a + "";
// {name: "a", toString: ƒ, valueOf: ƒ}
// valueOf
// {name: "a", toString: ƒ, valueOf: ƒ}
// toString
// Uncaught TypeError: Cannot convert object to primitive 

alert(a);
// {name: "a", toString: ƒ, valueOf: ƒ}
// toString
// {name: "a", toString: ƒ, valueOf: ƒ}
// valueOf
// Uncaught TypeError: Cannot convert object to primitive value

可以看到,toString 和 valueOf 的执行顺序并不固定,而是根据某个条件来决定的,那么是根据什么呢?那就是在拆箱转换时,调用了对象的 ToPrimitive 内部函数时,其会根据执行上下文,自动传入一个转换类型参数,暂时给它命名为 hint。

ToPrimitive

在 JavaScript 标准中,规定了 ToPrimitive 函数,它是对象类型到基本类型转换的实现者(即,拆箱转换);但这是一个内部算法,是编程语言在内部执行时遵循的一套规则。

对象到 String 和 Number 的转换都遵循“先拆箱再转换”的规则。通过拆箱转换,把对象变成基本类型,再从基本类型转换为对应的 String 或者 Number。

但是对于不同的操作,拆箱转换的内部实现也有所区别,正如上面的例子所示。

「拆箱转换」的调用规则及顺序如下:

  • 检查对象中是否有用户显式定义的 [Symbol.toPrimitive] 方法,如果有,直接调用;
  • 如果没有,则执行原内部函数 ToPrimitive,然后判断传入的 hint 值,如果其值为 string,顺序调用对象的 toString 和 valueOf 方法(其中 toString 方法一定会执行,如果其返回一个基本类型值,则返回、终止运算,否则继续调用 valueOf 方法);
  • 如果判断传入的 hint 值不为 string,则就可能为 number 或者 default 了,均会顺序调用对象的 valueOf 和 toString 方法(其中 valueOf 方法一定会执行,如果其返回一个基本类型值,则返回、终止运算,否则继续调用 toString 方法);

来看一下第一种情况:

const b = {
 [Symbol.toPrimitive] (hint) {
  console.log(`hint: ${hint}`);
  return {};
 },
 toString () {
  console.log('toString');
  return 1;
 },
 valueOf () {
  console.log('valueOf');
  return 2;
 }
};

alert(b); // hint: string 
b + ''; // hint: default
b + 500; // hint: default
+b; // hint: number
b * 1; // hint: number

第二、三种情况:

const c = {
 toString () {
  console.log('toString');
  return 1;
 },
 valueOf () {
  console.log('valueOf');
  return 2;
 }
};

alert(c); // 打印出 toString 并 alert 出 1
c + ''; // 先后打印出 valueOf,"2"
c + 500; // 先后打印出 valueOf,502
+c; // 先后打印出 valueOf,2
c * 1; // 先后打印出 valueOf,2

那么关于 hint 可取的三种值,都有什么含义?又什么情况对应什么值?

确定 hint 取值

string

当在希望是字符串操作,也即发生对象到字符串的转换时,传入内部函数 ToPrimitive 的参数值即为 string:

// output
alert(obj);

// using object as a property key
anotherObj[obj] = 123;

number

当在希望是数值操作,也即发生对象到数值的转换时,传入内部函数 ToPrimitive 的参数值即为 number:

// explicit conversion
let num = Number(obj);

// maths (except binary plus)
let n = +obj; // unary plus
let delta = date1 - date2;

// less/greater comparison
let greater = user1 > user2;

default

当在一些不确定需要将对象转换成什么基础类型的场景下,传入内部函数 ToPrimitive 的参数值即为 default:

// binary plus
let total = car1 + car2;

// obj == string/number/symbol
if (user == 1) { ... };

结语

如果亲爱的读者们在本文中发现了什么错误,或者有什么不同的意见,还请留言,一起讨论,一起将隐藏的、晦涩的点提出来,然后解决掉。

参考链接

  • 《重学前端》——极客时间APP
  • Object to primitive conversion
  • ToPrimitive

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js下将字符串当函数执行的方法
Jul 13 Javascript
JavaScript高级程序设计(第3版)学习笔记7 js函数(上)
Oct 11 Javascript
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
Nov 03 Javascript
关闭浏览器时提示onbeforeunload事件
Dec 25 Javascript
脚本合并提升javascript性能示例
Feb 24 Javascript
javascript插件开发的一些感想和心得
Feb 28 Javascript
jQuery的内容过滤选择器学习教程
Apr 18 Javascript
JavaScript Math 对象常用方法总结
Apr 28 Javascript
js轮播图代码分享
Jul 14 Javascript
jQuery 表单序列化实例代码
Jun 11 jQuery
extract-text-webpack-plugin用法详解
Feb 14 Javascript
layui实现数据表格隐藏列的示例
Oct 25 Javascript
微信小程序拍照和摄像功能实现方法示例
Feb 01 #Javascript
微信小程序常用简易小函数总结
Feb 01 #Javascript
使用Angular自定义字段校验指令的方法示例
Feb 01 #Javascript
angular中如何绑定iframe中src的方法
Feb 01 #Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
Feb 01 #Javascript
JS集合set类的实现与使用方法示例
Feb 01 #Javascript
详解如何使用webpack打包多页jquery项目
Feb 01 #jQuery
You might like
一些常用的php简单命令代码集锦
2007/09/24 PHP
PHP XML备份Mysql数据库
2009/05/27 PHP
浅析十款PHP开发框架的对比
2013/07/05 PHP
php+js实现异步图片上传实例分享
2014/06/02 PHP
浅析php如何实现App常用的秒发功能
2016/08/03 PHP
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
2010/05/06 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
2013/01/02 Javascript
Java/JS获取flash高宽的具体方法
2013/12/27 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
2014/08/11 Javascript
javascript获取select值的方法分析
2015/07/02 Javascript
JQuery动态添加Select的Option元素实现方法
2016/08/29 Javascript
解决node.js安装包失败的几种方法
2016/09/02 Javascript
jQuery事件绑定用法详解
2016/09/08 Javascript
jQuery实现Select下拉列表进行状态选择功能
2017/03/30 jQuery
利用vscode编写vue的简单配置详解
2017/06/17 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
2018/02/05 Javascript
利用jqgrid实现上移下移单元格功能
2018/11/07 Javascript
了解在JavaScript中将值转换为字符串的5种方法
2019/06/06 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
2020/05/29 Javascript
python多线程并发让两个LED同时亮的方法
2019/02/18 Python
Python逐行读取文件内容的方法总结
2020/02/14 Python
深入了解Python装饰器的高级用法
2020/08/13 Python
Janie and Jack美国官网:GAP旗下的高档童装品牌
2019/09/09 全球购物
瑞典在互联网上最大的宠物商店:Animail
2020/10/31 全球购物
应用英语专业自荐信
2014/01/26 职场文书
医学类个人求职信范文
2014/02/05 职场文书
同事吵架检讨书
2014/02/05 职场文书
物理研修随笔感言
2014/02/14 职场文书
爱护公物标语
2014/06/24 职场文书
教育系统干部作风整顿心得体会
2014/09/09 职场文书
个人查摆问题整改措施
2014/10/04 职场文书
2014年技术员工作总结
2014/11/18 职场文书
普通员工辞职信范文
2015/05/12 职场文书
大学三好学生主要事迹范文
2015/11/03 职场文书
python读取pdf格式文档的实现代码
2021/04/01 Python
使用opencv-python如何打开USB或者笔记本前置摄像头
2022/06/21 Python