JS案例：继承和深复制

- 日理万妓 2022-04-01 11:20 128阅读 0赞

## 继承： ##

// 寄生式继承(圣杯)
    			Father.prototype.name = 'Hello' //在Father类中添加一个name属性
    
    			function Father() {} //构造Father类
    
    			function Son() {} //构造Son类
    			var inherit = (function () { //新建一个立即执行函数,(类似雅虎网站的继承写法)
    				function F() {} //使用闭包产生私有函数
    				return function (father, son) { //返回继承函数
    					F.prototype = father.prototype; //私有函数取出父类的原型
    					son.prototype = new F(); //实例化私有函数，并将对象赋给子类的原型
    					son.prototype.superClass = father; //自定义子类的超类等于父类
    					son.prototype.constructor = son; //将子类的构造函数指向自己，否则是父类(因为原型链上的constructor是父类)
    				}
    			}())
    			inherit(Father, Son) //调用函数
    			Son.prototype.age = 'World' //改变子类的原型(目的：测试父类原型与子类原型是否绑定)
    			var son = new Son(); //实例化子类对象
    			var father = new Father(); //实例化父类对象
    			console.log(son, father)
    			console.log(son.name, father.name); //此时父子类都有该属性。打印(Hello Hello)
    			console.log(son.age, father.age) //子类独有属性，父类无此属性。打印(World undefined)

## 深复制： ##

### 简易版： ###

var obj = {
    				a: 1,
    				b: 'hello',
    				c: function () {
    					console.log(this.a, this.b);
    				},
    				d: [1, 2, 3, 4, 'a', 'b', false],
    				e: {
    					a: 11,
    					b: '11',
    					c: {
    						arr: [5, 4, 1, 2, 3],
    						obj: {
    							z: 'hello',
    							y: 'world'
    						}
    					}
    				}
    			}
    			var obj1 = {}
    			obj1 = JSON.parse(JSON.stringify(obj))
    			console.log(obj1);

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70][]

### 进阶版：（缺点：遇到不可枚举项时无法遍历，对象中有set和get时只会将结果输出） ###

var obj = {
    				a: 1,
    				b: 'hello',
    				c: function () {
    					console.log(this.a, this.b);
    				},
    				d: [1, 2, 3, 4, 'a', 'b', false],
    				e: {
    					a: 11,
    					b: '11',
    					c: {
    						arr: [5, 4, 1, 2, 3],
    						obj: {
    							z: 'hello',
    							y: 'world'
    						}
    					}
    				},
    				f: null,
    				g: undefined,
    				set count(val) {
    					this.f = val;
    				},
    				get count() {
    					return this.f
    				}
    			}
    			var obj1 = {}
    
    			function copyObj(org, tag) { //org是原对象(obj)，tag是复制后的对象(obj1)
    				var tag = tag || {}; //初始化要复制的对象
    				for (var key in org) { //遍历对象
    					if (typeof org[key] === 'object' && org[key] !== null) { //若遍历的每一项非空且为对象，则为引用值，则继续下一步
    						if (org[key].toString() === '[object Object]') {//若引用值.toString等于[object Object]，说明该值数据类型为对象
    							tag[key] = {};
    						} else {//否则为数组
    							tag[key] = [];
    						}
    						copyObj(org[key], tag[key])//再次执行函数
    					} else { //若每一项除了typeof为obj以外的值都是原始值，直接赋值即可
    						tag[key] = org[key];
    					}
    				}
    				return tag; //递归结束后返回对象
    			}
    			copyObj(obj, obj1)
    			obj.e.c.obj.z = 'world';//改变复制后的值观察复制后的对象是否发生改变
    			obj.e.c.obj.y = 'hello';
    			console.log(obj, obj1);

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70 1][]

### 终极版深复制：（解决进阶版的问题） ###

var obj = {
    				a: 1,
    				b: 'hello',
    				c: function () {
    					console.log(this.a, this.b);
    				},
    				d: [1, 2, 3, 4, 'a', 'b', false],
    				e: {
    					a: 11,
    					b: '11',
    					c: {
    						arr: [5, 4, 1, 2, 3],
    						obj: {
    							z: 'hello',
    							y: 'world'
    						}
    					}
    				},
    				f: null,
    				g: undefined,
    				set count(val) {
    					this.f = val;
    				},
    				get count() {
    					return this.f
    				}
    			}
    			var obj1 = {}
    
    			function copyObj(org, tag) {
    				var tag = tag || {}; //初始化要复制的对象
    				var name = Object.getOwnPropertyNames(org); //获取该对象的属性名，以字符串数组返回
    				for (var i = 0; i < name.length; i++) { //遍历对象
    					var desc = Object.getOwnPropertyDescriptor(org, name[i]); //获取对象的属性描述对象，无引用关系，返回另一个对象，改变时原对象不发生变化(复制的关键)
    					if (typeof desc.value === 'object' && desc.value !== null) { //若遍历的每一项非空且为对象，则为引用值，则进行下一步
    						var obj = desc.value.toString() === '[object Object]' ? {} : []; //判断是数组还是对象
    						Object.defineProperty(tag, name[i], { //设置对象属性值，前三个的值是返回true或false
    							configurable: desc.configurable, //是否可删除可替换
    							enumerable: desc.enumerable, //是否可枚举可遍历
    							writable: desc.writable, //是否可写入
    							value: obj //对象的值
    						});
    						copyObj(desc.value, obj); //再次执行函数
    					} else {
    						Object.defineProperty(tag, name[i], desc); //否则直接将该对象的属性值进行复制(原始值)
    					}
    				}
    				return tag;
    			}
    			copyObj(obj, obj1)
    			obj.e.c.obj.z = 'world'; //改变复制后的值观察复制后的对象是否发生改变
    			obj.e.c.obj.y = 'hello';
    			console.log(obj, obj1);

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70]: /images/20220401/74784090366f4aabb111c8177d9828ad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70 1]: /images/20220401/91c5ef0039bb4336af5afd75535f4bf8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70 2]: /images/20220401/9e78d16922424bdd807fcbeb77d6a494.png

发表评论取消回复

表情：

评论列表（有 0 条评论，128人围观）

还没有评论，来说两句吧...

相关阅读

相关浅复制和深复制（使用python）

在编程语言中，复制通常是通过赋值操作来实现的。具体实现方式可能因编程语言而异。 1. 浅复制（Shallow Copy）浅复制是指创建一个新对象，新对象的内容是原始对

谁践踏了优雅/ 2024年03月23日 22:30/ 0 赞/ 141 阅读

相关 js 对象深复制

深复制：源对象的属性如果有对象，该对象属性修改后，不会引起复制后的对象各属性的改变，源对象的任何属性及子属性，与新对象的没有任何引用关系。简单来说就一句话，新对象与原对象，

小灰灰/ 2023年07月06日 11:56/ 0 赞/ 47 阅读

相关 java深复制和浅复制

在java中,复制也是就clone()方法,在使用过程中根据业务的需要会有深复制和浅复制之分.那到底什么时候用深复制什么时候用浅复制,以及怎么实现呢?得从复制的概念一起总结一下

爱被打了一巴掌/ 2022年08月05日 15:20/ 0 赞/ 236 阅读

相关 java 浅复制和深复制

原文：[http://ttitfly.iteye.com/blog/155422][http_ttitfly.iteye.com_blog_155422] 1.java里的c

蔚落/ 2022年06月17日 07:59/ 0 赞/ 318 阅读

相关 js的浅复制和深复制

1.来看一个例子(浅复制) var test={ zcj:'isGood'} var test2=test test.zcj='isLo

爱被打了一巴掌/ 2022年05月30日 09:08/ 0 赞/ 316 阅读

相关 C 深复制和浅复制

分享一下我老师大神的人工智能教程！零基础，通俗易懂！[http://blog.csdn.net/jiangjunshow][http_blog.csdn.net_jiangju

﹏ヽ暗。殇╰゛Y/ 2022年04月18日 02:33/ 0 赞/ 292 阅读

相关 JS案例：继承和深复制

继承： // 寄生式继承(圣杯) Father.prototype.name = 'Hello' //在Father类中添加一个name属性

- 日理万妓/ 2022年04月01日 11:20/ 0 赞/ 129 阅读

相关浅复制和深复制的区别

详细请参考链接[一文搞懂C\中的赋值、深复制、浅复制][C] 1、赋值即用“=”，赋值和深度复制，浅度复制完全是不同的概念，并没有什么关系，很多文章说赋值对于值类型是深度复

怼烎@/ 2021年10月25日 14:12/ 0 赞/ 387 阅读

相关 js复制数组的问题（浅复制和深复制）

首先说两个概念：浅度克隆：原始类型为值传递，对象类型仍为引用传递。深度克隆：所有元素或属性均完全复制，与原对象完全脱离，也就是说所有对于新对象的修改都不会反映到原对象中

男娘i/ 2021年09月24日 17:22/ 0 赞/ 407 阅读

相关 js对象的深复制和浅复制

在JavaScript中，复制对象分为两种方式，浅复制和深复制，浅复制只复制一层对象的属性，而深复制则递归复制了所有层级 1、浅复制没有办法去真正的去复制一个对象，而只是保

「爱情、让人受尽委屈。」/ 2021年09月18日 03:30/ 0 赞/ 467 阅读