在上一篇文章 JavaScript 中的两种数据类型 中，别离介绍了根本类型和援用类型，以及援用类型的浅拷贝与深拷贝。这里须要留神的是，该文章中深拷贝援用类型值的办法，并不是完满的，援用类型值中的某些属性值，仍不能残缺地复制到新的变量中。比方函数值，在深拷贝过程中，就会失落。

问题

在理论我的项目中，如果应用了二次封装的组件，并且封装的组件外部做了一些属性值的深拷贝操作，就有极有可能因为传入的属性值是援用类型的值，导致失落局部数据。

举例

以基于 el-table 封装的 ak-table 组件为例：

往 ak-table 组件中传入 row-key 属性，该属性可传入一个函数：Function(row)，具体见官网文档。

按理失常逻辑，传入 ak-table 的属性值应该一成不变地传入到 el-table 组件中，然而奇怪的事件在这里产生了，咱们传入的函数在组件中隐没了！

问题剖析

1. 首先传入 ak-table 的 row-key 属性的值，它是一个函数，即援用类型值，那么依据文章结尾所说，如果对援用类型的值进行个别的深拷贝操作，是会失落函数和数组等数据的。
2. 在 ak-table 中，找到 row-key 属性，因为没有在 props 中定义，所以应该是保留在组件的 $attrs 属性中。去到 mounted 办法，在此打印 $attrs 的值，看看拷贝前后的数据比照。

控制台输入
———————————————————————————————————————

1. 问题到这里就很清晰了，首先，ak-table 组件外部其实是想对传进来的属性值做初始化操作，而后就对 $attrs 进行了深拷贝操作，拷贝之后就失落了 row-key 属性值，所以造成了数据失落。

解决方案

1. 对于传入援用类型的值，间接通过子组件的 props 属性接管来自父组件的值，而后不对传进来的值做解决，间接应用。
2. 对于传入援用类型的值，在拷贝时要‘非凡看待’，把须要用到的属性值递归拷贝到新的变量中。

总结

对于 JavaScript 中的根本类型和援用类型，以及对援用类型值拷贝的了解，是咱们使用这门语言进行开发的基本技能。有时候经常因为粗枝大叶，认为简略粗犷的拷贝一个变量，就认为失去了它的齐全复制体，因此造成了某些数据‘隐没不见’的灵异事件。这时能够参考文章的解决方案，这是我在我的项目开发中遇到过的问题，以此记录，心愿对您有帮忙。

参考链接：JavaScript 深拷贝的一些坑