使用 JavaScript 的 toString 方法

发表于   |   分类于   |  

原文：Using JavaScript’s ‘toString’ Method （需翻墙）
译者：涂鸦码龙

是否想知道为什么 alert 一个 JavaScript 对象，得到“[object Object]”文本？缘于 JavaScript 内置 toString 方法。

注意：例子有些地方用了 alert ，没用 console.log ，是为了绕开 console 对 Object 的特殊处理。

1
2
3
4
5
6
7
8
9
10
// Alerts: '[object Object]'
alert({});
// Outputs: "function() {}"
console.log(function() {});
// Outputs:
// "Thu Oct 11 1962 00:00:00 GMT-0400 (Eastern Daylight Time)"
// May vary depending on your clock settings
console.log(new Date("October 11, 1962"));

以上这些有什么共同点？每一个都提供字符串代表它们的值，但是内部的值差异很大。比如，内部的 Date 以毫秒衡量。

这些对象如何提供字符串作代表？它们均有个 prototype 方法：toString，它会把内部的值转换成字符串。

假如我们想创建一个新对象，让它返回字符串代表它的值，不用 toString 的话，代码像这样：

1
2
3
4
5
6
7
8
9
10
11
function Color (r, g, b) {
    this.r = r;
    this.g = g;
    this.b = b;
    this.text = "rgb(" + r + ", " + g + ", " + b + ")";
}
var red = new Color(255, 0, 0);
// Outputs: "rgb(255, 0, 0)"
alert(red.text);

有几个问题，首先，text 属性跟实际的值不同步（如果改变r, g, b 的值）；其次，必须明确调用 red.text ，不能直接用 red 的值。

用 toString 方法重写一下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function Color (r, g, b) {
    this.r = r;
    this.g = g;
    this.b = b;
}
Color.prototype.toString = function () {
    return "rgb(" + this.r + ", " +
                    this.g + ", " +
                    this.b + ")";
};
var red = new Color(255, 0, 0);
// Alerts: "rgb(255, 0, 0)"
alert(red);

把要返回的字符串放到 prototype 的 toString 里面有两个好处：字符串始终与真正的值保持同步，我们可以随时取用字符串的值， JavaScript 解释器会隐含调用 toString 方法。比如：

1
2
3
4
var message = "Red is: " + red;
// Outputs: "Red is: rgb(255, 0, 0)"
console.log(message);