对象转原始类型
栏目: JavaScript · 发布时间: 5年前
内容简介:对象转原始类型时, 会发生什么?当操作需要一个字符串时, 对象转换的当操作需要一个数字时, 对象转换的
对象转原始类型时, 会发生什么?
let o = { valueOf() { return 0; }, }; console.log(+o); // 0 console.log(1 + o); // 1 console.log(1 - o); // 1 console.log('' + o); // '0' console.log(`${o}`); // '[object Object]'
结论
-
当操作需要一个字符串时,
hint
=string
, 当操作需要一个数字时,hint
=number
, 当运算符不确定时hint
=default
. -
如果存在
obj[Symbol.toPrimitive](hint)
, 就直接调用 -
如果
hint
是string
, 先调用obj.toString()
, 没有再调用obj.valueOf()
-
如果
hint
是number
, 先调用obj.valueOf()
, 没有再调用obj.toString()
-
如果
hint
是default
,Date
按照hint=string
处理, 其它按照hint=number
处理 -
如果
toString
或者valueOf
返回的不是原始类型, 则忽略该调用, 转向下一个调用, 如果没有下一个调用, 则报错, 但是toPrimitive
必须返回原始类型, 否则报错
详解
根据上下文, 会有以下转换 hint
string
当操作需要一个字符串时, 对象转换的 hint
为 string
.
// alert(参数是字符串) alert(obj); confirm(obj); // 对象的属性是字符串 anotherObj[obj] = 123;
number
当操作需要一个数字时, 对象转换的 hint
为 number
.
// 明确转换成数字 Number(obj); // 转换成数字(非加法) +obj; // 数学运算(加法除外) 1 - obj; 1 * obj; 1 / obj;
因为历史原因大小比较的 hint
也是 number
// hint 为 number obj1 > obj2;
default
当运算符不确定时, 对象转换的 hint
为 default
.
// 比如加法, 可以是数字相加, 也可以是字符串相加 1 + obj; '1' + obj; // == 弱相等比较 // obj == string/number/symbol obj == '1'; obj == 1;
通常, 内置对象(除了 Date 外), default
转换 和 number
转换是相同的
_Date 的 default
转换 和 string
相同 Date.prototype[@@toPrimitive]
_
转换步骤
-
如果存在
obj[Symbol.toPrimitive](hint)
, 就直接调用 -
如果
hint
是string
, 先调用obj.toString()
, 没有再调用obj.valueOf()
-
如果
hint
是number
, 先抵用obj.valueOf()
, 没有再调用obj.toString()
example
Symbol.toPrimitive
type primitiveType = null | undefined | number | boolean | string | symbol; type hintType = 'string' | 'number' | 'default'; obj[Symbol.toPrimitive] = function(hint: hintType): primitiveType { console.log(`hint is: ${hint}`); return hint == 'string' ? '一个字符串' : 0; };
toString / valueOf
let user = { name: 'John', money: 1000, // for hint="string" toString(): string { return `{name: "${this.name}"}`; }, // for hint="number" or "default" valueOf(): number { return this.money; }, }; alert(user); // toString -> {name: "John"} alert(+user); // valueOf -> 1000 alert(user + 500); // valueOf -> 1500
let obj = { toString() { return '2'; }, }; // 加法, 调用 `default` hint, `default` 和 `number` 转换相同, // 先调用 valueOf 方法, 因为不存在, 所以调用 toString 方法, 返回 "2" // "2" + 2 = "22" alert(obj + 2); // "22" // 存在 valueOf, 所以 2+2 = 4 let obj = { toString() { return '2'; }, valueOf() { return 2; }, }; alert(obj + 2); // 4
let d = new Date(); let d2 = d.getTime() - 1; // 加法, 调用 `default` hint, Date 的 `default` 和 `string` 相同 alert(1 + d); // 1Fri Feb 15 2019 20:59:00 GMT+0800 (China Standard Time) // 减法, 调用 `number` hint alert(d - d2); // 1
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- JS中数据类型、内置对象、包装类型对象、typeof关系
- 《JavaScript面向对象精要》之一:基本类型和引用类型
- javascript 数据类型 ——对象的引用
- JavaScript基础学习——面向对象部分(属性类型)
- 你知道 JavaScript 中的错误对象有哪些类型吗?
- Chrome 66 Beta 发布:CSS 类型对象模型变化
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
移动交互设计精髓
班格 (Cameron Banga)、温霍尔德 (Josh Weinhold) / 傅小贞、张颖鋆 / 电子工业出版社 / 2015-4-1 / CNY 89.00
越来越多的人正涌入移动应用领域,而设计和体验将是移动应用成败的关键。作者通过上百款应用的设计实践,系统化地梳理了移动应用的设计方法论,在理解用户、跨平台和适配设计、移动组件应用、界面视觉感染力、简约设计等方面都进行了深入阐述。此外,作者还介绍了一些非常实用的移动设计工具,分享了设计师该如何与开发工程师协同工作,以及如何收集用户反馈、甄别版本迭代的更新需求等。 《移动交互设计精髓——设计完美的......一起来看看 《移动交互设计精髓》 这本书的介绍吧!