你对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]'