JavaScript-如何实现克隆(clone)函数

悠悠 2021-09-18 12:20 299阅读 0赞

# 前提知识 #

在实现克隆函数之前,你需要明白以下一些概念,如果你已经明白了,请直接阅读 “实现” 部分.

## 什么是值类型、引用类型? ##

很多新手可能会对 “值类型”、“引用类型”、“原始类型”、“基本类型”等等名称感到困惑. 这里就解释一下这些概念.

一个事物是可以有多种区分形式的.

比如,猫,我们可以说它是猫科动物,也可以说它是哺乳动物,也可以说它是食肉动物.

在编程语言的世界里也是一样的.

在JavaScript的世界里, 数据被定义为以下 7 种 **数据类型** :

*  6种 原始类型(又叫 基本类型):
    
     *  Boolean
     *  Null
     *  Undefined
     *  Number
     *  String
     *  Symbol
 *  和 Object

(需要注意的是, 名词从英文翻译成中文,可能会出现多种叫法,比如“primitive type”,中文叫 “原始类型”,也有叫“基本类型”.)

另外,根据变量值传递的方式,我们又可以将数据区分为“值类型”和“引用类型”.

*  **值类型 : 数据在传递和赋值时,数据将自己复制一份给对方.**

JavaScript中原始类型都属于值类型(string, number, boolean, null, undefined, symbol).

*  **引用类型 : 在传递和赋值时, 数据将自身的引用(又叫“地址”、“指针”)给对方.**

JavaScript中数组、函数、自定义对象,三种属于引用类型.

更详细的解释请阅读: //TODO: (新建文章,介绍 值类型、引用类型)

# 实现 #

引用类型数据都是由原始类型数据组成的,因此我们可以将引用类型数据一层层往下拆, 将里面的每一个原始类型数据赋值给新对象.

基于上述思路,我们主要对 数组、函数、自定义对象 这些引用类型的数据进行特殊处理,

Object.prototype.clone = function(){  
            var copy = this.constructor === Array ? [] : {}; //#1
    
            for(var e in this){
                    if (typeof this[e]  === "object") { //#2
                        copy[e] =  this[e].clone(); 
                    } else if (typeof this[e]  === "function") { //#3
                        copy[e] =   this[e].bind(copy); //#5
                    } else { //#4
                        copy[e] =  this[e]; 
                    }
            }
    
            return copy;
          }

\#1: 判断传入的对象是数组类型的对象，还是其它类型的对象.  
\#2、\#3: Array 和 Object 的 typeof是 “object”, Function 的typeof 是“function”. 它们都是引用类型,因此特殊处理.

//typeof 用于引用类型的数据
    typeof Array(); // "object"
    typeof Object(); // "object"
    typeof function(){}; // "function"

\#4: 原始类型直接赋值.  
\#5: 创建一个新的函数,并且将新函数与 copy 对象绑定.

# 参考资料: #

[JavaScript 数据类型和数据结构][JavaScript]  
[Difference between a Value Type and a Reference Type][]  
[Javascript之实现一个clone克隆函数][Javascript_clone]  
[JavaScript: clone a function][JavaScript_ clone a function]  
[Function.prototype.bind()][Function.prototype.bind]

[JavaScript]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Data_structures
[Difference between a Value Type and a Reference Type]: http://net-informations.com/faq/general/valuetype-referencetype.htm
[Javascript_clone]: https://www.jianshu.com/p/02bd67f16567
[JavaScript_ clone a function]: https://stackoverflow.com/questions/1833588/javascript-clone-a-function
[Function.prototype.bind]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind