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

前提知识

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

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

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

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

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

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

在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 数据类型和数据结构
Difference between a Value Type and a Reference Type
Javascript之实现一个clone克隆函数
JavaScript: clone a function
Function.prototype.bind()