JavaScript中valueOf函数与toString方法深入理解

JavaScript中的对象可以通过自身的函数或方法转换为原始值。其中，valueOf函数和toString方法都可以用来实现此目的。本文将深入探讨valueOf函数与toString方法的区别、使用场景、如何自定义和优先级等问题，并通过示例说明它们的使用方法。

区别

valueOf

valueOf函数是所有继承了Object.prototype的对象都拥有的一个方法，该方法的返回值表示该对象的原始值。默认情况下，valueOf函数返回对象本身。如果需要将对象转换为其他类型的值，就需要对valueOf函数进行自定义。

toString

toString方法同样是所有继承了Object.prototype的对象都拥有的一个方法，该方法的返回值表示该对象的字符串表示。默认情况下，toString方法返回"[object Object]"。同样地，需要对toString方法进行自定义才能将对象转换为其他类型的字符串值或表述。

使用场景

valueOf

1. 字符串对象：

   javascript
let str = new String('hello');
let value = str.valueOf(); // 'hello'

   由于字符串对象的valueOf函数会自动调用toString方法，所以上面的value值为字符串"hello"而非一个字符串对象。

2. 数字对象：

   javascript
let num = new Number(17);
let value = num.valueOf(); // 17

3. 布尔对象：

   javascript
let bool = new Boolean(true);
let value = bool.valueOf(); // true

toString

1. 数组对象：

   javascript
let arr = [1,2,3,4,5];
let str = arr.toString(); // '1,2,3,4,5'

2. 数字对象：

   javascript
let num = new Number(17);
let str = num.toString(); // '17'

3. 日期对象：

   javascript
let date = new Date();
let str = date.toString(); // 'Thu Nov 18 2021 15:47:44 GMT+0800 (China Standard Time)'

自定义

valueOf

对于某些对象，其valueOf函数默认返回的值可能不是我们期望的，此时需要对该函数进行自定义。以计算机游戏中的角色对象为例，我们可以让其名字属性作为对象的原始值。

function Role(name, level) {
  this.name = name;
  this.level = level;
}

Role.prototype.valueOf = function() {
  return this.name;
}

let role = new Role('Tom', 20);
console.log(role + ' is at level ' + role.level); // 'Tom is at level 20'

上面的代码中，我们将Role对象的valueOf函数重新定义为返回其名字属性的值。这样，在将Role对象转换为字符串时，会得到角色的名字，而非默认的"[object Object]"。

toString

同样地，对于某些对象，其toString方法默认返回的值可能不是我们期望的，此时需要对该方法进行自定义。以日期对象为例，我们可以让其返回我们更喜欢的日期格式。

Date.prototype.toString = function() {
  let year = this.getFullYear();
  let month = this.getMonth() + 1;
  let date = this.getDate();
  return year + '-' + month + '-' + date;
}

let date = new Date();
console.log(date.toString()); // '2021-11-18'

上面的代码中，我们将Date对象的toString方法重新定义为返回"YYYY-MM-DD"格式的日期字符串。这样，在将Date对象转换为字符串时，会得到我们更喜欢的日期格式，而非默认的"[object Date]"。

优先级

在JavaScript中，valueOf函数的优先级高于toString方法。也就是说，在需要将一个对象转换为原始值或字符串值时，JS会优先寻找valueOf函数，如果该函数不存在或返回undefined，则寻找toString方法。举个例子：

let obj = {
  valueOf: function() { return 17; },
  toString: function() { return 'hello'; }
};

console.log(obj + ''); // 17

上面的代码中，obj对象的valueOf函数返回17，toString方法返回"hello"。当将obj对象转换为一个字符串时，JS会优先寻找valueOf函数，并返回17。

结语

通过本文的讲解，我们了解了JavaScript中valueOf函数和toString方法的区别、使用场景和自定义方法，并掌握了它们的优先级问题。在实际编写JavaScript代码时，根据所需场景合理地使用这两个函数和方法，能够让我们更加灵活地操作不同类型的对象与值。