对象拷贝的方法是一个难点,尤其是深拷贝。建议把代码都运行下,帮助理解拷贝。

一. json方法

1. 适合情况

 JSON对象的深度克隆。方法是先JSON.stringify() 转为json字符串, 再JSON.parse() 转为json数组

2. 缺点:

  a. 如果你的对象里有函数, 函数无法被拷贝下来

  b. 无法拷贝copyObj对象原型链上的属性和方法

var obj = {
x: 1,
y: {
a: 1,
b: 0,
c: [1, 2, 3]
}
}; // 相同的引用
var obj2 = obj;
console.log(obj2 == obj); //true 直接复制只是复制对象的指针,还指向同一个对象 //不同的引用
var obj3 = JSON.parse(JSON.stringify(obj));
console.log(obj3 == obj) //false 通过json方法复制后的地址不一样
console.log(obj3);

二. jQuery extend方法

jQuery.extend(object)

概述:

 扩展jQuery对象本身,用来在jQuery命名空间上增加新函数。

var obj = {
x: 1,
y: {
a: 1,
b: 0,
c: [1, 2, 3]
}
};
var obj2 = $.extend({}, obj);
console.log(obj2 == obj) //false 复制后的地址不一样
console.log(obj2);

三. Object.create()方法

 复制对象存在于Object原型prototype中

var obj = {
x: 1,
y: {
a: 1,
b: 0,
c: [1, 2, 3]
}
}; var obj2 = Object.create(obj);
console.log(obj2 == obj); //false
console.log(obj2);

四. for循环遍历方法

1. 浅拷贝:

 只是拷贝了基本类型的数据;然而引用类型数据, 只是复制了指针,复制后也是会发生引用。

 除了这个是浅拷贝,本文章介绍的其他方法都是深拷贝。

var obj = {
x: 1,
y: {
a: 1,
b: 0,
c: [1, 2, 3]
}
}; var obj2 = {}; for (var i in obj) { //for in 会遍历对象的属性,包括实例中和原型中的属性。(需要可访问,可枚举属性)
obj2[i] = obj[i];
}
console.log(obj2); obj2.y.c.push(4); //给新数组添加一个元素4,会同步反映在新旧数组中
console.log(obj2.y.c); // [1,2,3,4]
console.log(obj.y.c); // [1,2,3,4] 浅拷贝只是复制了地址,修改是内存中的数据

2. 深拷贝

 深拷贝, 就是遍历那个被拷贝的对象。判断对象里每一项的数据类型。如果不是对象类型, 就直接赋值, 如果是对象类型, 就再次调用递归的方法去赋值。

var obj = {
x: 1,
y: {
a: 1,
b: 0,
c: [1, 2, 3]
}
}; function getClass(o) { //判断数据类型
return Object.prototype.toString.call(o).slice(8, -1);
} function deepCopy(obj) {
var result, oClass = getClass(obj); if (oClass == "Object") result = {}; //判断传入的如果是对象,继续遍历
else if (oClass == "Array") result = []; //判断传入的如果是数组,继续遍历
else return obj; //如果是基本数据类型就直接返回 for (var i in obj) {
var copy = obj[i]; if (getClass(copy) == "Object") result[i] = deepCopy(copy); //递归方法 ,如果对象继续变量obj[i],下一级还是对象,就obj[i][i]
else if (getClass(copy) == "Array") result[i] = deepCopy(copy); //递归方法 ,如果对象继续数组obj[i],下一级还是数组,就obj[i][i]
else result[i] = copy; //基本数据类型则赋值给属性
} return result;
} var obj2 = deepCopy(obj);
console.log(obj2);

五. 原型链继承方法

function Father() {
this.say = "hi";
this.fn = function () {
return this.say;
}
} Father.prototype.eat = function () {
console.log('吃');
} function Son() {
this.play = function () {
console.log('play game');
}
} //通过原型来继承父类的公共属性
Son.prototype = new Father();
var s = new Son(); console.log(s);
console.log(s.say); //hi
console.log(s.fn()); //hi

js对象拷贝的方法的更多相关文章

  1. json转js对象方法,JS对象转JSON方法

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  2. js对象3--工厂方法加深引出原型--杂志

    继续上一章的案例讲解: <script type="text/javascript"> function createPreason(name,sex){ //他的怪癖 ...

  3. js 对象拷贝

    在JavaScript中,数据类型分为两大类:基本数据类型和复杂数据类型.基本数据类型包括Number.Boolean.String.Null.String),而复杂数据类型包括Object.Func ...

  4. js对象拷贝遇到的坑

    问题:通过拷贝赋值后,所有的对象的name居然都是C test(){ let person = [{'name':'danny'}] let names = ['A','B','C'] let tem ...

  5. js对象的所有方法

    Object构造方法 Object.assign() 将所有可枚举的自身属性的值从一个或多个源对象复制到目标对象. Object.create() 用指定的原型对象和属性创建一个新对象. Object ...

  6. JS对象 返回星期方法 getDay() 返回星期,返回的是0-6的数字,0 表示星期天。如果要返回相对应“星期”,通过数组完成

    返回星期方法 getDay() 返回星期,返回的是0-6的数字,0 表示星期天.如果要返回相对应"星期",通过数组完成,代码如下: <script type="te ...

  7. JS对象随机数 random() 方法可返回介于 0 ~ 1(大于或等于 0 但小于 1 )之间的一个随机数。 注意:返回一个大于或等于 0但小于1的符号为正的数值

    随机数 random() random() 方法可返回介于 0 ~ 1(大于或等于 0 但小于 1 )之间的一个随机数. 语法: Math.random(); 注意:返回一个大于或等于 0 但小于 1 ...

  8. JavaScript 对象拷贝研究

    介绍一下JavaScript里面的一些对象拷贝的方法 浅拷贝 深拷贝 利用序列化进行对象拷贝

  9. js 对象的创建方式和对象的区别

    js一个有三种方法创建对象,这里做一个总结. 1.对象直接量 所谓对象直接量,可以看做是一副映射表,这个方法也是最直接的一个方法,个人比较建议, 1 2 3 4 5 6 7 8 9 10 11 12 ...

随机推荐

  1. Unity C# 设计模式(四)抽象工厂模式

    定义: 提供一个创建一系列相关或相互依赖对象的接口,而无需指定它们具体的类. 工厂方法模式针对的是一个产品等级结构:而抽象工厂模式针对的是多个产品等级结构. 抽象工厂模式使用同一个 工厂等级结构负责这 ...

  2. 【Codeforces Round #423 (Div. 2) B】Black Square

    [Link]:http://codeforces.com/contest/828/problem/B [Description] 给你一个n*m的格子; 里面包含B和W两种颜色的格子; 让你在这个格子 ...

  3. 修改MySQL默认字符集

    今天发现有库级字符集和表级字符集,实验了下发现,库级字符集是该库内表的默认字符集,当创建表时,如果未指定字符集,默认使用该表所属库的字符集.表也可使用不同于所属库的字符集. MySQL对于字符集的指定 ...

  4. 火狐不支持innerText属性,只支持innerHTML属性

    做的一个js的小程序放到火狐上用不了了,原因是innerText不是标准属性,换成innerHTML属性就好,但是可能需要把html标签给去掉

  5. 最全面的AndroidStudio配置指南总结-包括护眼模式

    使用AndroidStudio开发APP已有半年多的时间了,从刚开始的不习惯到慢慢适应再到逐渐喜欢上AndroidStudio,中间的过程颇有一番曲折,现在把自己对AndroidStudio的配置心得 ...

  6. JAVA爬虫Nutch、WebCollector的正则约束

    爬虫爬取时,须要约束爬取的范围. 基本全部的爬虫都是通过正則表達式来完毕这个约束. 最简单的,正则: http://www.xinhuanet.com/.* 代表"http://www.xi ...

  7. 最全Pycharm教程(10)——Pycharm调试器总篇

    最全Pycharm教程(1)--定制外观 最全Pycharm教程(2)--代码风格 最全Pycharm教程(3)--代码的调试.执行 最全Pycharm教程(4)--有关Python解释器的相关配置 ...

  8. 在IIS中给某一个网站添加binding的坑

    以http为例, 假如ip地址从局域网的地址172.31.212.20改为127.0.0.1 但是网站没法访问了http://172.31.212.20/chile.backoffice/  必须通过 ...

  9. mysql分页小结

    mysql.select('*').from('books') .join('cSessionInfo', 'books.openid', 'cSessionInfo.open_id') .limit ...

  10. 记一次 CORS 跨域请求出现 OPTIONS 请求的问题及解决方法

    今天前后端在联调接口的时候,发生了跨域请求资源获取不到的问题. 首先说明下跨域问题的由来.引自HTTP 访问控制 的一段话: 当 Web 资源请求由其它域名或端口提供的资源时,会发起跨域 HTTP 请 ...