前言
在读 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: "a", toString: ""; // {name: "a", toString: "a", toString: "a", toString: "a", toString: "color: #ff0000">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
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。
js,拆箱转换
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]