使用 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);

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

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