原来JS还可以这样拆箱转换详解_F11 - 专业站长和开发者的学习网站

分享到

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

JavaScript 来源：脚本之家作者：程序猿何大叔发布时间：2019-02-03 14:18:10 人浏览

摘要

本篇文章介绍原来JS还可以这样拆箱转换详解。前言在读 Winter 大佬的《重学前端》栏目时，重温了 JS 的「拆箱转换」。「装箱转换」与「拆箱转换」以前都是了解的，今天来看，自己所谓的了解也真是一知半解。在阅读 Winter 老师写的内容后，对「拆箱转换」

本篇文章介绍原来JS还可以这样拆箱转换详解。

前言

在读 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) { ... };
						
			结语

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

您可能感兴趣的文章 :

原文链接 :

Tag : JS(248)转换(10)

Fabric.js实现变换视窗的示例介绍

引言 fabric.js可以通过viewportTransform属性配置画布的视窗属性。听上去很高级的样子，但其实这是原生canvas就已经存在的东西，fabric.js的vie
Vue.js前端路由和异步组件的介绍

文章目标 P6 针对react/vue能够根据业务需求口喷router的关键配置，包括但不限于：路由的匹配规则、路由守卫、路由分层等；能够描述清楚
Vue.js状态管理及SSR解析介绍

前端状态管理出现的意义及解决的问题随着前端应用的逐步复杂，我们的组件中需要使用越来越多的状态。有的时候我们需要使用子组件将
React项目中使用Redux的react-redux

背景在前面文章一文理解Redux及其工作原理中，我们了解到redux是用于数据状态管理，而react是一个视图层面的库如果将两者连接在一起，可
javascript手机验证、邮箱验证、密码验证的正则表

javascript【手机验证】、【邮箱验证】、【密码验证】的正则表达式的封装：【手机验证】：以下代码是验证手机号码的正则表达式的方法，
Jest如何支持异步及时间函数的实现

异步支持在前端开发中，我们会遇到很多异步代码，那么就需要测试框架对异步必须支持，那如何支持呢？ Jest 支持异步有两种方式：回调
JavaScript对象新增方法defineProperty与keys的使用说明

这两个方法可以让我们更方便的操作对象，获取对象属性，赋值修改等等操作，最重要的是，这些方法可以让我们设置无法修改对象属性值
vue+elementUI封装一个根据后端变化的动态table(完整

效果图：使用组件，启用自动生成 :auto=true 自动生成-编辑（包括请求已经实现了）新增和删除也是一样 ps:如有额外的按钮可以用插槽实现
js数组去重常见的方法汇总(7种)

1、借助ES6提供的Set结构 new Set() 简单好用强烈推荐直接给一个新的数组里面，利用es6的延展运算符 1 2 3 4 5 6 7 8 9 var arr = [1,9,8,8,7,2,5,3,3,3,
Vue移动端实现调用相机扫描二维码或条形码的全

一、开发前的准备实现二维码或条形码的扫描识别比较普遍的做法是去调用微信 JS-SDK 的扫一扫功能（详见概述 | 微信开放文档），或者支