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

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

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