自定义 `toString()` 与 `valueOf()` 方法在原型链中的覆盖

好的，各位观众老爷们，欢迎来到“原型链历险记”！今天咱们要聊点刺激的，聊聊 toString() 和 valueOf() 这俩哥们儿，以及它们在原型链里“改头换面”的故事。准备好了吗？系好安全带，我们要起飞咯！🚀

第一幕：初识 toString() 和 valueOf()，这俩是啥玩意儿？

在开始之前，咱们得先搞清楚，toString() 和 valueOf() 到底是个啥。简单来说，它们是 JavaScript 对象自带的两个方法，就像每个公民都有自己的身份证一样。

toString()： 顾名思义，它的主要任务就是把一个对象“变”成字符串。当你试图把一个对象用字符串的方式展示出来时，JavaScript 就会自动调用这个方法。比如，你想把一个数字显示在网页上，或者用 console.log() 打印出来，toString() 就默默地在背后工作。

就像灰姑娘变身一样，把原本平平无奇的对象，变成闪闪发光的字符串！✨
valueOf()： 这个家伙比较低调，它的作用是返回对象的原始值。这个原始值通常是数字、字符串或者布尔值。在某些需要对对象进行运算的场合（比如加减乘除），JavaScript 就会尝试调用 valueOf() 来获取对象的原始值进行计算。

这就像孙悟空的火眼金睛，能够看穿对象的本质，直取其原始值！ 🐒

举个栗子：

let myNumber = 10;
let myString = "Hello";
let myBoolean = true;
let myObject = { name: "Alice", age: 30 };

console.log(myNumber.toString());   // 输出 "10"
console.log(myString.valueOf());   // 输出 "Hello"
console.log(myBoolean.toString());  // 输出 "true"
console.log(myObject.toString());  // 输出 "[object Object]" (默认行为)
console.log(myObject.valueOf());   // 输出 { name: "Alice", age: 30 } (默认行为)

从上面的例子可以看出，对于基本类型（数字、字符串、布尔值），toString() 和 valueOf() 都有默认的行为。而对于对象，默认的 toString() 返回 "[object Object]"， valueOf() 返回对象本身。这显然不是我们想要的，尤其是对于复杂的对象，我们需要自定义它们的行为。

第二幕：原型链登场，toString() 和 valueOf() 的寻根之旅

现在，轮到我们今天的主角——原型链登场了！原型链是 JavaScript 中实现继承的关键机制。每个对象都有一个原型对象，而原型对象本身又可以有自己的原型对象，这样就形成了一个链条，直到达到 null 为止。

当我们访问一个对象的属性或方法时，JavaScript 引擎会首先在这个对象自身查找。如果找不到，就会沿着原型链向上查找，直到找到为止，或者到达链条的末端（null）。

重点来了！ toString() 和 valueOf() 这两个方法，默认情况下，都定义在 Object.prototype 上。这意味着，所有的 JavaScript 对象，如果没有在自身或者原型链的其他地方定义这两个方法，都会继承 Object.prototype 上的默认实现。

这就好像，所有的公民，如果没有自己的身份证，就默认使用国家提供的通用身份证一样。身份证上写着“中华人民共和国公民”。

用表格来总结一下：

方法	默认定义位置	默认行为
`toString()`	`Object.prototype`	返回 `"[object Object]"`
`valueOf()`	`Object.prototype`	返回对象本身 (通常情况下是原始值的包装对象)

第三幕：自定义 toString() 和 valueOf()，让对象焕发新生

重头戏来了！现在，我们要学习如何自定义 toString() 和 valueOf() 方法，让我们的对象拥有更加个性化的行为。

1. 直接在对象上定义：

这是最简单粗暴的方式，直接在对象上定义这两个方法，就可以覆盖原型链上的默认实现。

let myObject = {
  name: "Bob",
  age: 40,
  toString: function() {
    return "My name is " + this.name + ", and I am " + this.age + " years old.";
  },
  valueOf: function() {
    return this.age;  // 返回年龄作为原始值
  }
};

console.log(myObject.toString());  // 输出 "My name is Bob, and I am 40 years old."
console.log(myObject + 5);       // 输出 45 (因为 valueOf 返回了年龄)

在这个例子中，我们直接在 myObject 上定义了 toString() 和 valueOf() 方法，覆盖了 Object.prototype 上的默认实现。现在，myObject 的 toString() 方法会返回一个描述对象的字符串，而 valueOf() 方法会返回对象的年龄。

2. 在构造函数的原型上定义：

如果你想让所有通过某个构造函数创建的对象都拥有相同的 toString() 和 valueOf() 方法，可以在构造函数的原型上定义它们。

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.toString = function() {
  return "Person: " + this.name + " (" + this.age + ")";
};

Person.prototype.valueOf = function() {
  return this.age;
};

let alice = new Person("Alice", 30);
let bob = new Person("Bob", 40);

console.log(alice.toString());  // 输出 "Person: Alice (30)"
console.log(bob.toString());    // 输出 "Person: Bob (40)"
console.log(alice + 10);       // 输出 40
console.log(bob > 35);         // 输出 true

在这个例子中，我们分别在 Person.prototype 上定义了 toString() 和 valueOf() 方法。这样，所有通过 Person 构造函数创建的对象（比如 alice 和 bob），都会继承这些方法。

3. 使用 ES6 的 Class 语法：

如果你喜欢 ES6 的 Class 语法，也可以在 Class 中定义 toString() 和 valueOf() 方法。

class Animal {
  constructor(name, species) {
    this.name = name;
    this.species = species;
  }

  toString() {
    return `Animal: ${this.name} (${this.species})`;
  }

  valueOf() {
    return this.name.length; //返回名字的长度
  }
}

let dog = new Animal("Buddy", "Dog");
let cat = new Animal("Whiskers", "Cat");

console.log(dog.toString());  // 输出 "Animal: Buddy (Dog)"
console.log(cat.toString());  // 输出 "Animal: Whiskers (Cat)"
console.log(dog > 4);       // 输出 true (因为 "Buddy".length > 4)
console.log(cat + " is cute"); // 输出 "Whiskers is cute"

Class 语法本质上是构造函数的语法糖，所以在 Class 中定义 toString() 和 valueOf() 方法，本质上也是在构造函数的原型上定义它们。

第四幕：toString() 和 valueOf() 的应用场景，秀出你的操作

自定义 toString() 和 valueOf() 方法有很多实用的应用场景。

自定义对象的字符串表示： 让 console.log() 打印出更有意义的信息，方便调试。
对象参与运算： 让对象能够参与加减乘除等运算，比如日期对象的比较。
类型转换： 控制对象在类型转换时的行为，比如在字符串拼接时。

一些具体的例子：

日期对象： 你可以自定义日期对象的 toString() 方法，让它返回特定格式的日期字符串。

let myDate = new Date();
myDate.toString = function() {
  return this.getFullYear() + "-" + (this.getMonth() + 1) + "-" + this.getDate();
};

console.log(myDate.toString()); // 输出类似 "2023-10-27" 的日期字符串

货币对象： 你可以自定义货币对象的 toString() 方法，让它返回带有货币符号的字符串。

function Money(amount, currency) {
  this.amount = amount;
  this.currency = currency;
}

Money.prototype.toString = function() {
  return this.currency + this.amount.toFixed(2); //保留两位小数
};

let price = new Money(19.99, "$");
console.log(price.toString()); // 输出 "$19.99"

坐标对象

function Coordinate(x, y) {
  this.x = x;
  this.y = y;
}

Coordinate.prototype.toString = function() {
  return `(${this.x}, ${this.y})`;
};

Coordinate.prototype.valueOf = function() {
  return Math.sqrt(this.x * this.x + this.y * this.y); // 返回到原点的距离
};

let point = new Coordinate(3, 4);
console.log(point.toString()); // 输出 "(3, 4)"
console.log("距离原点为：" + point); // 输出 "距离原点为：5" (由于字符串拼接，触发 valueOf)
console.log(point > 4); //输出 true (因为到原点的距离5>4)

第五幕：注意事项，避开雷区

虽然自定义 toString() 和 valueOf() 方法很强大，但也需要注意一些事项，避免掉入坑里。

不要随意修改内置对象的 toString() 和 valueOf() 方法： 这可能会影响 JavaScript 的正常运行，甚至导致程序崩溃。
valueOf() 应该返回一个原始值： 如果 valueOf() 返回的不是原始值，JavaScript 可能会继续调用 toString() 方法，导致死循环。
注意类型转换的优先级： 在某些情况下，JavaScript 可能会优先调用 toString() 方法，而不是 valueOf() 方法。具体可以参考 ECMAScript 规范。
考虑性能影响： 如果你的 toString() 和 valueOf() 方法过于复杂，可能会影响程序的性能。尽量保持它们简洁高效。

第六幕：总结，画上圆满的句号

好啦，今天的“原型链历险记”就到此结束了。希望通过今天的讲解，大家对 toString() 和 valueOf() 方法，以及它们在原型链中的覆盖，有了更深入的了解。

记住，掌握了这些技巧，你就可以让你的 JavaScript 对象拥有更加个性化的行为，让你的代码更加优雅、高效。

最后，送给大家一句名言：“代码如人生，需要不断地探索和尝试，才能找到属于自己的路。” 愿大家在编程的道路上越走越远，成为真正的编程大师！😎

(PS: 这篇文章写得我口干舌燥，如果觉得有用，请点个赞，收藏一下，分享给你的朋友们！谢谢大家！🙏)

补充一些更加深入的思考：

Symbol.toPrimitive： 在 ES6 中，引入了一个新的 Symbol Symbol.toPrimitive，它允许你更精细地控制对象在类型转换时的行为。如果你定义了 Symbol.toPrimitive 方法，JavaScript 会优先调用它，而不是 valueOf() 或 toString()。

let myObject = {
  name: "Charlie",
  age: 50,
  [Symbol.toPrimitive](hint) {
    if (hint === 'number') {
      return this.age;
    }
    if (hint === 'string') {
      return `My name is ${this.name}`;
    }
    return true;  // 默认情况
  }
};

console.log(myObject + 10);   // 输出 60 (number hint)
console.log(String(myObject));  // 输出 "My name is Charlie" (string hint)
console.log(myObject == true);   // 输出 true (default hint)

何时应该自定义 toString() 和 valueOf()？
- 当你想让对象在字符串上下文中表现出特定的字符串形式时，自定义 toString()。 例如，格式化日期、货币等。
- 当你想让对象在数值上下文中具有特定的数值意义时，自定义 valueOf()。 例如，坐标对象的距离、货币对象的金额等。
- 当默认的 "[object Object]" 字符串表示对于调试没有意义时，自定义 toString()。
最佳实践：
- 保持 toString() 和 valueOf() 的一致性。 尽量让它们返回相关的值，避免产生混淆。
- 避免副作用。 toString() 和 valueOf() 应该只负责返回表示值，不要修改对象的状态。
- 考虑使用 Symbol.toPrimitive。 如果你需要更精细的控制，可以考虑使用 Symbol.toPrimitive。

希望这些补充信息能够帮助你更全面地理解 toString() 和 valueOf() 的用法。祝你编码愉快！🎉

发表回复 取消回复

发表回复取消回复