前提知识
在实现克隆函数之前,你需要明白以下一些概念,如果你已经明白了,请直接阅读 “实现” 部分.
什么是值类型、引用类型?
很多新手可能会对 “值类型”、“引用类型”、“原始类型”、“基本类型”等等名称感到困惑. 这里就解释一下这些概念.
一个事物是可以有多种区分形式的.
比如,猫,我们可以说它是猫科动物,也可以说它是哺乳动物,也可以说它是食肉动物.
在编程语言的世界里也是一样的.
在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()