深入理解JavaScript中toString()与valueOf()的区别与调用机制

toString() 和 valueOf() 是 JavaScript 中用于处理值显示与运算的核心方法。所有 Object 类型的数据默认都内置了这两个函数。

例如，我们定义一个 Object 类型的数据：

const obj = {
    name: "duxin"
}
console.log(obj.valueOf()); // { name: 'duxin' }

toString() 方法

toString() 的主要作用是将对象转换为字符串，并返回 Object 类型数据的默认返回值 "[object Object]"。

如果在定义对象时重写 toString() 函数，可以显著提高返回值的可读性，例如：

const obj = {
    name: "duxin",
    toString:function(){
        return this.name;
    }
}
console.log(obj.valueOf()); // { name: 'duxin' }
console.log(obj.toString()); // duxin

以下类型均实现了自定义的 toString() 函数：

• Array 的 toString() 返回以逗号分隔的字符串；
• Function 的 toString() 返回函数自身的文本定义；
• Date 的 toString() 返回时间字符串；

在 JavaScript 中，Object、Array、Function 和 Date 等类型都实现了自定义的 toString() 函数。

• Object 类型数据的 toString() 默认返回 "[object Object]"。当我们创建新类时，可以重写此函数以返回更具可读性的结果。
• Array 的 toString() 返回由逗号分隔的数组成员字符串。虽然数组也是对象，但它覆盖了 Object.toString 方法，通过连接数组元素并返回字符串（行为等同于 Array.join()），从而返回字符串而非对象。
• Function 的 toString() 返回函数的文本定义。
• Date 的 toString() 返回具有可读性的时间字符串。

valueOf() 方法

valueOf() 函数返回引用类型的原始值；若没有原始值，则返回 "{}"（即空对象的字面量）。

• Array 的 valueOf() 返回数组本身；
• Function 的 valueOf() 返回函数本身；
• Date 的 valueOf() 返回时间戳。

在发生数据类型转换时，存在两种场景：

引用数据类型转换为 String 时，首先调用 toString() 函数，若有值则直接返回该字符串；如果对象没有 toString()，则调用 valueOf() 函数，将原始值转为字符串并返回；如果两者都无法获取原始值，则抛出类型转换异常。

var arr = [];
arr.toString = function () {
     console.log('调用了toString()函数');
     return [];
};
arr.valueOf = function () {
     console.log('调用了valueOf()函数');
     return [];
};
console.log(String(arr));

在执行 String(arr) 时，先尝试将数组转为字符串，调用的是 toString()，但其结果无法转为 string；

接着调用 valueOf() 函数，其返回值也是一个空数组，同样无法转为字符串，因此最终抛出类型转换异常。

引用类型转换为 Number 时，首先判断对象是否含有 valueOf() 函数。如果有，则调用 valueOf() 并将其返回值转为数字返回；如果没有 valueOf()，则调用 toString() 并将返回值转为数字返回。如果两者都无法获取原始值，则抛出类型转换异常。

• Object 类型数据的 valueOf() 默认返回 "{}"，即一个空的对象字面量。
• Array 的 valueOf() 返回数组本身。
• Function 的 valueOf() 返回函数本身。
• Date 的 valueOf() 返回指定日期的时间戳。

小结：

• toString() 返回字符串，而 valueOf() 返回原始值；若无原始值，则返回对象本身。
• undefined 和 null 都没有 toString() 和 valueOf() 方法。
• Date 类型的 toString() 返回表示时间的字符串；valueOf() 返回从1970年1月1日至今的毫秒数（时间戳）。
• Number 类型的 toString() 方法可以接收转换基数，返回不同进制的字符串形式数值；而 valueOf() 方法无法接受转换基数。

特殊情况

如果一个引用类型的值既存在 toString() 函数又存在 valueOf() 函数，那么在隐式转换时会调用哪个函数？这里可以概括为两种场景：引用类型转换为 String 类型，以及引用类型转换为 Number 类型。

1、引用类型转换为 String 类型

引用类型数据在转换为 String 类型时，通常用于数据展示，转换时遵循以下规则：

如果对象具有 toString() 函数，则优先调用 toString()。如果它返回的是原始值，则直接将该原始值转换为字符串表示并返回。反之，则调用 valueOf() 函数；如果 valueOf() 返回的是原始值，则将该结果转换为字符串表示并返回。如果通过 toString() 或 valueOf() 都无法获得原始值，则直接抛出类型转换异常。

2、引用类型转换为 Number 类型

引用类型数据在转换为 Number 类型时，通常用于数据运算，转换时遵循以下规则：

如果对象具有 valueOf() 函数，则优先调用 valueOf()。如果 valueOf() 返回原始值，则直接将该原始值转换为数字表示并返回。反之，则调用 toString() 函数；如果 toString() 返回的是原始值，则将该结果转换为数字表示并返回。如果通过 toString() 或 valueOf() 都无法获得原始值，则直接抛出类型转换异常。

到此这篇关于js中toString()与valueOf()的使用的文章就介绍到这了,更多相关js toString() valueOf()内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！