共计 4264 个字符,预计需要花费 11 分钟才能阅读完成。
valueOf 和 toString 是 Object.prototype 的方法。一般很少直接调用,但是在使用对象参与运算的时候就会调用这两个方法了。我想大部分人都存在以下疑问:
- valueOf 和 toString 哪个优先级较高?
- 是不是所有场景都会调用 valueOf 和 toString
概念解释
- valueOf: 返回对象的原始值表示
- toString: 返回对象的字符串表示
在介绍下面的内容之前先了解一下转换规则,下面的内容解释都是基于这个规则表来的:
valueOf 转换规则
valueOf 是 Object.prototype 的方法,由 Object 来的对象都会有该方法,但是很多内置对象会重写这个方法,以适合实际需要。
说到原始值就必须说到原始类型,JS 规范中 原始类型 如下:
- Boolean
- Null
- Undefined
- Number
- String
非原始值 (也就是对象) 重写规则如下:
对象 | valueOf 返回值 |
---|---|
Array | 数组本身 |
Boolean | 布尔值 |
Date | 返回毫秒形式的时间戳 |
Function | 函数本身 |
Number | 数字值 |
Object | 对象本身 |
String | 字符串值 |
以下规则是经过验证的,如果对验证过程不关心,可以只看转换规则。
建议看一下验证过程,这样可以加深理解
对象转换为布尔值
- 直接转换为 true(包装类型也一样),不调用 valueOf 和 toString
对象转换为数字
在预期会将对象用作数字使用时,比如参与算术运算等等操作,对象转换为数字会依次调用 valueOf 和 toString 方法,具体规则如下:
- 如果对象具有
valueOf
方法且返回原始值(string、number、boolean、undefined、null),则将该原始值转换为数字(转换失败会返回 NaN),并返回这个数字 - 如果对象具有
toString
方法且返回原始值(string、number、boolean、undefined、null),则将该原始值转换为数字(转换失败会返回 NaN),并返回这个数字 - 转换失败,抛出 TypeError
对象转换为字符串
- 如果对象具有
toString
方法且返回原始值(string、number、boolean、undefined、null),则将该原始值转换为字符串,并返回该字符串 - 如果对象具有
valueOf
方法且返回原始值(string、number、boolean、undefined、null),则将该原始值转换为字符串,并返回该字符串 - 转换失败,抛出 TypeError
toString 转换规则
对象 | toString 返回值 |
---|---|
Array | 以逗号分割的字符串,如 [1,2] 的 toString 返回值为 ”1,2″ |
Boolean | “True” |
Date | 可读的时间字符串,如 ”Tue Oct 15 2019 12:20:56 GMT+0800 (中国标准时间)” |
Function | 声明函数的 JS 源代码字符串 |
Number | “ 数字值 ” |
Object | “[object Object]” |
String | “ 字符串 ” |
验证对象到原始值的转换
光看 valueOf 和 toString 没啥东西可说,日常开发中也很少直接调用,但是当我们将对象当做原始值来使用时会发生转换,而且转换过程还略微有点迷糊。
对象转换为 Boolean
为了能够直观的看到 JS 内部的转换过程,我把 valueOf 和 toString 都简单重写了,加了日志。
// 保存原始的 valueOf
var valueOf = Object.prototype.valueOf;
var toString = Object.prototype.toString;
// 添加 valueOf 日志
Object.prototype.valueOf = function () {console.log('valueOf');
return valueOf.call(this);
};
// 添加 toString 日志
Object.prototype.toString = function () {console.log('toString');
return toString.call(this);
};
var a = {};
var b = new Boolean(false);
if (a) {console.log(1);
}
if(b) {console.log(2);
}
以上例子的输出如下:
1
2
未调用 valueOf 和 toString,符合 [对象到布尔值] 的转换规则
对象转换为 Number
例子 1
// 保存原始的 valueOf
var valueOf = Object.prototype.valueOf;
var toString = Object.prototype.toString;
// 添加 valueOf 日志
Object.prototype.valueOf = function() {console.log('valueOf');
return valueOf.call(this);
};
// 添加 toString 日志
Object.prototype.toString = function() {console.log('toString');
return toString.call(this);
};
var a = {};
console.log(++a);
输出如下:
valueOf
toString
NaN
分析
- valueOf 方法返回的是对象本身,不是原始值,继续执行
- toString 方法返回的是 ”[object Object]”,是原始值(字符串),将字符串转换为数字 NaN
例子 2
// 保存原始的 valueOf
var valueOf = Object.prototype.valueOf;
var toString = Object.prototype.toString;
// 添加 valueOf 日志
Object.prototype.valueOf = function () {console.log('valueOf');
return "1"; // 强制返回原始值
};
// 添加 toString 日志
Object.prototype.toString = function () {console.log('toString');
return toString.call(this);
};
var a = {};
console.log(++a);
输出如下:
valueOf
2
分析
- valueOf 返回原始值(字符串),直接将该字符串转换为数字,得到 1
对象转换为字符串
在预期会将对象用作字符串时,比如一个字符串拼接了字符串,传入了一个对象,此时会发生转换。
// 保存原始的 valueOf
var valueOf = Object.prototype.valueOf;
var toString = Object.prototype.toString;
// 添加 valueOf 日志
Object.prototype.valueOf = function () {console.log('valueOf');
return valueOf.call(this);
};
// 添加 toString 日志
Object.prototype.toString = function () {console.log('toString');
return toString.call(this);
};
var a = {};
alert(a);
输出如下:
toString
// 弹出[object Object]
分析
- 调用 toString 方法,返回了字符串 ”[object Object]”,对象最终转换为该字符串
例子 2
// 保存原始的 valueOf
var valueOf = Object.prototype.valueOf;
var toString = Object.prototype.toString;
// 添加 valueOf 日志
Object.prototype.valueOf = function () {console.log('valueOf');
return valueOf.call(this);
};
// 添加 toString 日志
Object.prototype.toString = function () {console.log('toString');
return this;
};
var a = {};
alert(a);
输出如下:
toString
valueOf
Uncaught TypeError: Cannot convert object to primitive value
at 1.js:16
分析
- 调用 toString 方法,返回的不是原始值,继续执行
- 调用 valueOf 方法,返回的不是原始值,继续执行
- 抛出 TypeError
【番外】使用加号运算符连接字符串和对象时的处理
在测试对象到字符串转换时发现如下代码的表现和预期并不一致:
// 保存原始的 valueOf
var valueOf = Object.prototype.valueOf;
var toString = Object.prototype.toString;
// 添加 valueOf 日志
Object.prototype.valueOf = function () {console.log('valueOf');
return valueOf.call(this);
};
// 添加 toString 日志
Object.prototype.toString = function () {console.log('toString');
return toString.call(this);
};
console.log("a" + {});
输出如下:
valueOf
toString
a[object Object]
疑问
"a"+ {}
应该是预期把 {}
当做字符串使用,应该先调用 toString 方法的,实际情况却不是这样。
结论
通过查找资料得到的结论如下:
- 如果有一个是对象,则遵循对象对原始值的转换过程(Date 对象直接调用 toString 完成转换,其他对象通过 valueOf 转化,如果转换不成功则调用 toString)
- 如果两个都是对象,两个对象都遵循步骤 1 转换到字符串
- 两个数字,进行算数运算
- 两个字符串,直接拼接
- 一个字符串一个数字,直接拼接为字符串
面试题
var a = {};
var b = {};
var c = {};
c[a] = 1;
c[b] = 2;
console.log(c[a]);
console.log(c[b]);
题解
由于对象的 key 是字符串,所以 c[a]
和c[b]
中的 a
和b
会执行 [对象到字符串] 的转换。
根据转换规则, a
和 b
都转换为了 [object Object]
,所以c[a]
和c[b]
操作的是同一个键。
答案是 输出两个 2
,c 对象的最终结构如下:
{'[object Object]':2
}