在对象的原型上添加方法

HTML5学堂：利利前段时间写了几个数组、字符串的方法，其中有一个是克隆（复制）一个数组。于是，最近一直在琢磨如何让这个复制变得更简单，可不可以把这个自定义的方法挂载在原型上呢？研究了几天，也算是得出一些基本的结论。本文除了讨论“在对象的原型上添加方法”好还是坏之外，也会为大家分享一个干货，是利利自己写的“复制”变量的方法。一起来看吧~！

本文主要内容

1 “复制”/“克隆”数组的功能需求

2 在对象的原型上添加方法是否合理？

3 “复制”各类变量的功能封装

“复制”/“克隆”数组的功能需求

最初的代码

刚开始的时候拿到这个需求，第一反应是用for循环，于是乎自己写出了如下的代码：

1. var arr = ["HTML5学堂", "利利", "堡堡"];
2. var newArr = [];
3. for (var i = 0; i < arr.length; i++) {
4.     newArr[i] = arr[i];
5. };

额外提醒：可能有前端小伙伴考虑说直接var newArr = oldArr;岂不是更好，此处各位需要注意数组属于引用类型变量，这种书写方式是将oldArr的地址赋值给了newArr。oldArr和newArr指向同一个数组。

关于“引用类型变量与值类型变量”，如果不是太清楚的童鞋可以点击——>《引用类型变量的那个坑》查看

优化克隆功能

左看右看，总觉得for循环太复杂了，回顾数组的各类方法，突然想到了concat方法。concat方法的功能是基于当前数组中的所有项创建一个新数组，返回新数组。该方法会先创建一个当前数组的副本，然后将接收到的参数，添加到这个副本末尾，最后返回新构建的数组。当我们没有给concat方法传递参数时：复制当前数组并返回副本。

于是乎，功能代码就变成了这个样纸~~~

1. var arr = ["HTML5学堂", "利利", "堡堡"];
2. function clone(val) {
3.     return val.concat();
4. }
5. var newArr = clone(arr);

问题来了

实现了，但是要面临的问题来了，既然该方法能够实现，那么如果为了方便，我是不是可以为所有的数组元素都增加这个方法，将这个方法挂载到Array的原型上，即：

1. var arr = ["HTML5学堂", "利利", "堡堡"];
2. Array.prototype.clone = function() {
3.     return this.concat();
4. }
5. var newArr = arr.clone();

这样挂载到原型上，的确方便了我们的调用和开发，但是真的好么？

在对象的原型上添加方法是否合理？

仔细思考之后，并查阅了一些相关资料，利利最终还是放弃了将方法添加到对象的原型上，为什么呢？

1 防止冲突

我们可以想象，如果仅仅由我们一个人开发项目时，是不会出现什么冲突问题的，但是，如果参与项目的人不止一个，那么我在对象上定义一个方法，别人是不是也可以在对象上定义一个方法呢？此时，很容易出现冲突，并且，一旦造成冲突，之后就需要为了解决这个冲突而花费更多的时间，得不偿失。

2 不易定位错误位置

我们自己书写的代码，有时可能会有一些考虑不周，必然会产生或多或少的bug，如果这些方法是正常存在于window的全局作用域下，也可以通过JS文件寻找到相应内容时，那么，我们就可以比较快速的进行错误定位（采用注释法、断点调试、console命令等）。但是，当方法挂载在了原型上时，我们可能就很难发现问题的所在。简言之就是：出现Bug时，不容易进行问题的定位。

3 防止代码向上不兼容

关于这一条，查阅了比较多的信息，特别是getElementsByClassName~

所谓代码向上不兼容，指的是：我们定义了一个Array.prototype.clone，在当前的ECMAScript5.0（6.0）当中并没有这个方法，但是很有可能在ECMAScript7.0甚至更高版本当中出现这个方法，一旦出现这个方法，那么我们原有的代码就需要进行相关的修改。

额外扩展知识：当时实现document.getElementsByClassName，直接使用了document.prototype并返回了一个数组的实例（prototype返回的是Array）。但是DOM 后来原生方法里对这个方法返回的是一个Nodelist实例，结果就是之前用了Prototype库的代码，运行在新浏览器的时候，用的是DOM原生方法，返回的对象是无法继承数组的任何方法的，所以就会报错。

“复制”各类变量的功能封装

虽然放弃了将变量“复制”的功能放在原型上，但是依旧打算对这个功能进行一些扩展，封装一个能够克隆数字、字符串、数组、对象等多种数据的功能函数，岂不是更好？于是乎~~~

1. var arr = ["HTML5学堂", "利利", "堡堡"];
2. function clone(targetObj) {
3.     if (targetObj instanceof Array) {
4.         return targetObj.concat();
5.     } else if (targetObj instanceof Object) {
6.         var newObj = {};
7.         for (var i in targetObj) {
8.             newObj[i] = targetObj[i];
9.         };
10.         return newObj;
11.     } else {
12.         return targetObj;
13.     }
14. }
15. var result = clone(arr);
16. console.log(result);

2016.04.06后记：昨天小编的朋友陈林问起小编，为何《获取对象具体类型的功能函数》的文章当中不再使用instanceof。小编在此讲解一下：instanceof在大部分情况下是没有问题的，但是当一个网页当中，存在多个全局执行环境时（网页中包含多个框架），就会出现两个及以上版本的Array构造函数。如果从一个框架向另一个框架传递一个数组，那么传入的数组与第二个框架中原生创建的数组分别具有不同的构造函数。此时，instanceof的检测会出现问题，这也就有了为何后面使用如下的方式进行变量类型的检测。

1. function checkType(ele) {
2.     return Object.prototype.toString.call(ele).replace(/[\[\]]/g, '').split(' ')[1].toLowerCase();
3. }

HTML5学堂微信~欢迎扫码关注

HTML5小编-利利 耗时3h

欢迎沟通交流~HTML5学堂