js中不同的“toString“

你对toString了解多少？

在js中toString是一个很常用的方法，顾名思义是转换成字符串，我们来看看以下的例子。

引入

const arr = [2, 3, 4];
arr.toString();
Array.toString(arr);
Array.prototype.toString.call(arr);
Object.prototype.toString.call(arr);

输出

const arr = [2, 3, 4];
arr.toString(); // '2,3,4'
Array.toString(arr); // 'function Array() { [native code] }'
Array.prototype.toString.call(arr); // '2,3,4'
Object.prototype.toString.call(arr); // '[object Array]'

思考

与想象的结果是否一致呢？这里会涉及到一些关于原型链的知识。

分析

我们逐行分析一下：
直接调用数组的toString方法，其返回值是一个表示指定的数组及其元素的字符串，而不是像大多数人想的：数组也是一个对象，所以应该返回’[object Object]’，说明这里调用的并不是对象的toString方法。
我们先跳到第三行，其返回值与第一行一致，直接比较两方法，也是一致的。

const arr = [2, 3, 4];
arr.toString === Array.prototype.toString; // true

那也就解答了刚刚数组调用的并不是他继承自对象上的方法，他调用的是他作为数组实例的隐式原型上的方法：

const arr = [2, 3, 4];
arr.toString === arr.__proto__.toString; // true
arr.__proto__.toString === Array.prototype.toString; // true

也就是说，数组类继承了对象类的方法，但是对toString这个方法进行了重写，toString的真正位置在数组类的显式原型上（Array.prototype）。

提出疑问

那么第二行为什么输出了一个如此奇怪的结果呢？

其实这里也很有意思，Array.toString(arr)其实调用的是Array作为类的方法，类这个概念在ES6之前，被称为构造函数，所以Array.toString方法，本质上是作为函数去调用的，其返回值是表示函数源代码的一个字符串。

Array.toString === Function.prototype.toString; // true

而这个方法本质也是不接受参数的，所以无论在Array.toString()中传什么，得到的结果都是一样的，Array.toString(arr)更像是思维定式的调用结果。

原型链

我们回到原型链的角度来讨论刚刚的问题：
在数组原型链三角中，三者都能调用toString方法，但是他们调用的toString方法则各有异同。
作为数组实例arr = [1,2,3]，本身是没有toString方法的，他会去隐式原型上寻找toString方法，发现上面有toString方法，所以调用的是该方法。

arr.__proto__.toString === Array.prototype.toString; // true

而构造函数Array，他作为Function类的实例，调用的其实是Array的隐式原型上的方法，本质上其实是Function类的显式原型（prototype）上的toString方法。

Array.__proto__.toString === Function.prototype.toString; // true

作为数组类Array的显示原型，Array.prototype则是自身上就有toString方法，我们可以通过console.dir查看：

console.dir(Array);

在Array的prototype上能够找到toString方法。

原型链的更上层

现在我们还剩最后一行的输出：

const arr = [2, 3, 4];
Object.prototype.toString.call(arr); // '[object Array]'

这其实要提到typeof使用上的一个缺陷，最显著的就是typeof null显示的是object，这也是很多同学不能理解的地方，null作为原型链的最上层，怎么使用typeof的时候反而显示更下层的object呢？
这其实是js设计时是用32位比特来存储值，对象的前三位与null都是0，所以造成了这个偏差。
而我们使用Object.prototype.toString.call，则可以得到一个更完美的“typeof”：

const typeOf = _ =>  Object.prototype.toString.call(_);
typeof null; // 'object'
typeOf(null); // '[object Null]'