对象转原始类型
栏目: JavaScript · 发布时间: 7年前
内容简介：对象转原始类型时, 会发生什么?当操作需要一个字符串时, 对象转换的当操作需要一个数字时, 对象转换的
对象转原始类型时, 会发生什么?
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
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Transcending CSS
Andy Clarke、Molly E. Holzschlag / New Riders / November 15, 2006 / $49.99
As the Web evolves to incorporate new standards and the latest browsers offer new possibilities for creative design, the art of creating Web sites is also changing. Few Web designers are experienced p......一起来看看 《Transcending CSS》 这本书的介绍吧!
