js中onClick([object object])的传参问题

同事找到一个 js 树形 table 的插件，通过阅读源码，发现该插件实现的主要原理就是对树结构的数据进行遍历，然后字符串拼接 html 标签，最后显示在页面上。对于table肯定是有行操作的，所以我们在拼接按钮代码处添加了一个 run 方法，并且传递了一个对象。但是，当页面加载 dom 元素后，发现 run 方法中的参数居然是 onclick=”run([object Object])”，这样点击事件肯定是不能正常执行了。然后通过仔细研究，找到了解决办法。

第一次尝试，调用 js 的 toString 方法，把自定义对象转化成字符串。

但是在浏览器中调试 dom 节点，发现依然是 onclick=”run([object Object])”，然后就查找资料详细了解下 [object Object] 是怎么出来的。
js 中 toString 方法的作用是返回一个反映这个对象的字符串，可参考下表：
| 类型 | toString
——– | :–:
Object | 返回”[object Object]”
stringObject| 返回字符串
NumberObject| 把一个 Number 对象转换为一个字符串，并返回结果。
booleanObject| 把一个逻辑值转换为字符串，并返回结果。
arrayObject | 把数组转换为字符串，用逗号间隔，并返回结果
dateObject | 把 Date 对象转换为字符串，并返回结果

所以，明白了自定义对象调用js 的 toString 方法，返回的不是对象序列化后的字符串，而是 [object Object] 字符串。这是因为自定义对象没有重写 toString 方法。

第一次尝试，调用 JSON.stringify 方法，对参数序列化

通过调用 JSON.stringify 方法，我们发现页面加载的 dom 上 run 方法中的参数显示是正常的。在查找资料的过程中，提示说在接受参数的时候，需要用 JSON.parse 将 JSON.stringify 序列化的字符串转换为对象。但是在实际操作中，我的 run 方法中并没有调用 JSON.parse 方法，依然可以对接收的参数使用对象方法获取属性。

后来反思了一下这个疑惑点：我们知道，如果是单独传一个字符串参数，我们是需要加 / 加引号对其转译，反观 JSON.parse 序列化之后的字符串，正是自定义对象本身的数据结构。那就是说，JSON.parse 是对特殊符号进行了转译。假如我们手动进行传参特殊符号的转译，那也是成功的，也就是说，转译之后其实还是一个对象，所以在接收参数的时候，还是可以用对象方法获取属性值。

为什么会出现 onClick([object object])

出现这种情况，就是我们渲染 dom 节点的时候，是用的字符串拼接形式。所以，对于 onclick 事件中的参数，我们也因该转化成字符串的形式进行拼接。如果传入一个 js 自定义对象，那渲染后的页面上的 dom 就会出现 onClick([object object]) 这种形式。