最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

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

XAMPP新闻 admin 671浏览 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 对象绑定.

转载请注明:XAMPP中文组官网 » JavaScript-如何实现克隆(clone)函数

您必须 登录 才能发表评论!