[阅读MDN]之Array.prototype.toString的过程探究-Toy模板网

这篇具有很好参考价值的文章主要介绍了[阅读MDN]之Array.prototype.toString的过程探究。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、数组toString方法的执行过程

Array原型对象上的toString方法与Object.prototype上的toString方法不同，它进行了重写。Array.prototype.toString会先查看执行时上下文（this）及其原型链上是否具有join方法。

若join方法存在则会在内部执行join方法，类似this.join(',')。
若join方法不存在则会调用Object.prototype.toString方法。

我们通过一个简单的例子便可以验证：

// eg1:
console.log(Array.prototype.toString.call({ join: () => 1 })); // 1

// eg2:
console.log(Array.prototype.toString.call({ join: () => undefined })); // undefined

// eg3:
console.log(Array.prototype.toString.call({ join: 'not a function' })); // [object Object]

上述的第一个例子是如何得到结果1的呢？首先我们要注意到上述的代码将toString的执行时上下文绑定为具有join方法的对象，那么按照上述的执行过程，将执行第一步：执行执行时上下文中的join方法，此时得到join方法的执行结果1，也就是该行代码的结果。

第二个例子可以更有力的证明，Array的原型对象将优先执行join方法，而从第三个例子则可以验证上述的第二个过程，此时的join并不是一个方法，因此将调用Object.prototyp.toString方法。

二、利用join的"数组扁平化"

比较有意思的是我们发现使用数组的join方法能够扁平化一些高维的数组（注意：数组中只能存放基础数据类型！！）为字符串。先举个例子吧：

[1, [2, [3, [4, [5]]]]].join(","); //'1,2,3,4,5'

上述的例子我们将一个高维度的数组转为了一串一维的字符串，如果当我们知道数组中的元素全都为同一个类型时完全可以利用join完成一个简单的扁平化操作：

[1, [2, [3, [4, [5]]]]].join(",").split(",").map(Number); // [1, 2, 3, 4, 5]

当然了，这样的写法缺陷太大了，首先你得明确元素的类型都为同一个元素、且不能有引用类型的属性存在，否则将以[object Object]的形式出现在结果中。

细心的小伙伴在这里应该能猜到为什么使用join能够将一个高维度的数组转为一串简单字符，这是因为join的执行时会将每一个元素都先转为String的形式，因此对于引用类型将执行其身上的toString方法，而在前文提到了数组的toString方法本质上是调用的join方法，那么这就形成了一个"小递归"。过程如下：

[1, [2, [3, [4, [5]]]]].join(", ") 
=> "1, " + [2, [3, [4, [5]]]].toString() 
=> "1, " + "2, " + [3, [4, [5]]].toString() 
=> "1, 2, " + "3, " + [4, [5]].toString() 
=> "1, 2, 3, " + "4, " + [5].toString() 
=> "1, 2, 3, 4, " + "5"
=> "1, 2, 3, 4, 5"