JavaScript之克隆
2018-02-12 21:58
127 查看
在JavaScript如何把一个对象的属性和方法完完整整的搬过来到另一个空对象身上,对于继承的使用方法不能完成上述操作,所以我们开始另一种方法----克隆。
克隆分为:浅层克隆和深度克隆。
name : "wang",
age : 20,
say : [1,2,3],
family : {
name :"zhou",
baobao : {
name : "mmm",
}
}
test : function (){
console.log(this.name);
}
}
function alone(Origin,Target){
var Target = Target || {};//防止未传参产生的错误
for(var prop in Origin){
Target[prop] = Origin[prop];
}
return Target;
}
var obj1 = alone(obj); 浅层克隆把一个对象的属性和方法克隆过来,运用对象遍历的方法 ,不懂得点击这里 原始值和引用值一样。所以会产生克隆过来的引用值和原对象引用值指向是相同的,造成一方改变另一方也会改变。所以就有下面深度克隆的方法。
1.克隆过程中我们用遍历对象的方法,首先我们要用遍历中的hasOwnProperty()方法判断属性和方法是对象本身 还是原型中的,不懂得话,点击这里
2.在对象中有引用值,首先判断是不是引用值,运用类型转换的知识
3.判断是数组还是对象
4.建立相应的数组或者对象
5.递归
6.递归终止条件
7.返回值
就上面这些步骤,尽量自己用自己的编程思想先写一遍。这里我写个简便的。
var obj = {
name : "wang",
age : 20,
say : [1,2,3],
family : {
name :"zhou",
baobao : {
name : "mmm",
}
}
test : function (){
console.log(this.name);
}
}
function deepAlone(Origin,Target){
var Target = Target || {}; //防止未传参产生的错误
var toStr = Object.prototype.toString; //定义变量 方便书写
var arrStr = '[object Array]'; //定义字符串 用于比较是否为数组
for(var prop in Origin){ // 原对象遍历
if(Origin.hasOwnProperty(prop)){ //判断属性和方法是原型的还是对象自身的
if(Origin[prop] !== 'null' && typeof(Origin[prop]) == 'object'){ //判断是否为引用值
Target[prop] = toStr.call(Origin[prop]) == arrStr ? [] : {}; //三目运算符判断是否为数组 是:定义数组 否:定义对象
deepAlone(Origin[prop],Target[prop]); //递归
}
else{
Target[prop] = Origin[prop]; //递归终止条件
}
}
}
return Targin; //返回克隆好的对象。
}
var obj1 = deepAlone(obj);
JavaScript语言我个人感觉是最有意思的了,我也是一个初学者,遇到问题,喜欢在博客上分享,也希望能帮到大家。一个初学者,有什么不足或者纰漏的话,希望在下面评论出来,相互学习,共同进步。 --主页传送门--
克隆分为:浅层克隆和深度克隆。
浅层克隆
var obj = {name : "wang",
age : 20,
say : [1,2,3],
family : {
name :"zhou",
baobao : {
name : "mmm",
}
}
test : function (){
console.log(this.name);
}
}
function alone(Origin,Target){
var Target = Target || {};//防止未传参产生的错误
for(var prop in Origin){
Target[prop] = Origin[prop];
}
return Target;
}
var obj1 = alone(obj); 浅层克隆把一个对象的属性和方法克隆过来,运用对象遍历的方法 ,不懂得点击这里 原始值和引用值一样。所以会产生克隆过来的引用值和原对象引用值指向是相同的,造成一方改变另一方也会改变。所以就有下面深度克隆的方法。
深度克隆
深度克隆运用了一些算法 递归,首先进行深度克隆之前呢,明白深度克隆的代码思路就可以写了。1.克隆过程中我们用遍历对象的方法,首先我们要用遍历中的hasOwnProperty()方法判断属性和方法是对象本身 还是原型中的,不懂得话,点击这里
2.在对象中有引用值,首先判断是不是引用值,运用类型转换的知识
3.判断是数组还是对象
4.建立相应的数组或者对象
5.递归
6.递归终止条件
7.返回值
就上面这些步骤,尽量自己用自己的编程思想先写一遍。这里我写个简便的。
var obj = {
name : "wang",
age : 20,
say : [1,2,3],
family : {
name :"zhou",
baobao : {
name : "mmm",
}
}
test : function (){
console.log(this.name);
}
}
function deepAlone(Origin,Target){
var Target = Target || {}; //防止未传参产生的错误
var toStr = Object.prototype.toString; //定义变量 方便书写
var arrStr = '[object Array]'; //定义字符串 用于比较是否为数组
for(var prop in Origin){ // 原对象遍历
if(Origin.hasOwnProperty(prop)){ //判断属性和方法是原型的还是对象自身的
if(Origin[prop] !== 'null' && typeof(Origin[prop]) == 'object'){ //判断是否为引用值
Target[prop] = toStr.call(Origin[prop]) == arrStr ? [] : {}; //三目运算符判断是否为数组 是:定义数组 否:定义对象
deepAlone(Origin[prop],Target[prop]); //递归
}
else{
Target[prop] = Origin[prop]; //递归终止条件
}
}
}
return Targin; //返回克隆好的对象。
}
var obj1 = deepAlone(obj);
JavaScript语言我个人感觉是最有意思的了,我也是一个初学者,遇到问题,喜欢在博客上分享,也希望能帮到大家。一个初学者,有什么不足或者纰漏的话,希望在下面评论出来,相互学习,共同进步。 --主页传送门--
相关文章推荐
- javascript深度克隆
- javascript克隆元素样式的实现代码
- JavaScript深度克隆(深度拷贝)一个对象
- javascript中对象的深度克隆
- JavaScript深层克隆对象
- javascript 克隆对象
- javascript 数组克隆
- javascript中对象的深度克隆
- JavaScript 克隆数组最简单的方法
- JavaScript中【数组的合并】和【对象的合并 (浅克隆,深克隆)】
- javascript数组克隆简单实现方法
- javascript克隆table中的元素
- 浅谈Javascript 中几种克隆(clone)方式
- 【javascript基础】之深度克隆(深度拷贝)一个对象
- 克隆javascript对象的三个方法小结
- Javascript深度克隆一个对象
- javaScript中对象的克隆
- JavaScript的对象深度克隆
- javascript 用克隆的方法动态添加表格行
- javascript中对象的深度克隆