原来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 相关文章推荐
javascript对象的property和prototype是这样一种关系
Mar 24 Javascript
基于jquery ajax 用户无刷新登录方法详解
Apr 28 Javascript
基于jQuery实现网页进度显示插件
Mar 04 Javascript
javascript滚轮事件基础实例讲解(37)
Feb 14 Javascript
javascript实现数据双向绑定的三种方式小结
Mar 09 Javascript
EL表达式截取字符串的函数说明
Sep 22 Javascript
jQuery中库的引用方法
Jan 06 jQuery
基于webpack.config.js 参数详解
Mar 20 Javascript
Vue中 key keep-alive的实现原理
Sep 18 Javascript
Vue项目引进ElementUI组件的方法
Nov 11 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
Nov 30 Javascript
vue接口请求加密实例
Aug 11 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 smarty 二级分类代码和模版循环例子
2011/06/01 PHP
php简单生成一组与多组随机字符串的方法
2017/05/09 PHP
php unlink()函数使用教程
2018/07/12 PHP
基于php+MySql实现学生信息管理系统实例
2020/08/04 PHP
jquery下为Event handler传递动态参数的代码
2011/01/06 Javascript
jquery清空textarea等输入框实现代码
2013/04/22 Javascript
js简单实现删除记录时的提示效果
2013/12/05 Javascript
DIV始终居中的js代码
2014/02/17 Javascript
学习Bootstrap滚动监听 附调用方法
2016/07/02 Javascript
详解JavaScript RegExp对象
2017/02/04 Javascript
Vue中的字符串模板的使用
2018/05/17 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
2018/08/13 Javascript
js中实例与对象的区别讲解
2019/01/21 Javascript
Vue 中 filter 与 computed 的区别与用法解析
2019/11/21 Javascript
JS写滑稽笑脸运动效果
2020/05/28 Javascript
js实现有趣的倒计时效果
2021/01/19 Javascript
python实现从字符串中找出字符1的位置以及个数的方法
2014/08/25 Python
Python接收Gmail新邮件并发送到gtalk的方法
2015/03/10 Python
Python while、for、生成器、列表推导等语句的执行效率测试
2015/06/03 Python
Python 制作糗事百科爬虫实例
2016/09/22 Python
通过源码分析Python中的切片赋值
2017/05/08 Python
python调用百度语音REST API
2018/08/30 Python
python语音识别实践之百度语音API
2018/08/30 Python
Python Django 封装分页成通用的模块详解
2019/08/21 Python
TensorFlow命名空间和TensorBoard图节点实例
2020/01/23 Python
Python守护进程实现过程详解
2020/02/10 Python
利用CSS3的flexbox实现水平垂直居中与三列等高布局
2016/09/12 HTML / CSS
纯css3实现的动画按钮的实例教程
2014/11/17 HTML / CSS
心理健康心得体会
2014/01/02 职场文书
优秀教师先进事迹材料
2014/12/15 职场文书
督导岗位职责
2015/02/04 职场文书
加入学生会自荐书
2015/03/05 职场文书
逃课检讨书范文
2015/05/06 职场文书
房屋所有权证明
2015/06/19 职场文书
2015年办税服务厅工作总结
2015/07/23 职场文书
祝福语集锦:送给毕业同学祝福语
2019/11/21 职场文书