Javascript中JSON对象继承实现

超、凢脫俗 2022-06-18 08:13 235阅读 0赞

1. 关于JSON对象浅拷贝的实现

1.1 函数的实现

/**
    		 *Json对象的浅拷贝
    		 *      返回具有父类属性的新的child对象
    		 * @param {Object} parent
    		 * @param {Object} child
    		 */
    		function extend(parent, child) {
    			var child = child || {};
    			for(var prop in parent) {
    				child[prop] = parent[prop];
    			}
    			return child;
    		}

1.2 浅拷贝的实现分析

1. 初始化变量

var person = {
    				age: 18,
    				friends: ["xiaoming", "zhangsan"],
    				address: {
    					home: "home address",
    					office: "office address"
    				}
    			};
    			var programer = {
    				language: "javascript"
    			};

2. 进行JSON对象的浅拷贝

extend(person,programer);

3. 观察父类数据修改后,子类数据的变化

3.1 programer 已经具有了person的属性内容

![20170401142334272][]

3.2**设置 person.address.home = "home "，发现子类的内容也被改变**。

![20170401142355319][]

2、关于JSON对象深拷贝的实现

2.1 函数的实现

/**
    		 * Json对象的深拷贝
    		 *       返回具有父类属性的新的child对象
    		 * @param {Object} parent
    		 * @param {Object} child
    		 */
    		function extendDeeply(parent, child) {
    			var child = child || {};
    			for(var prop in parent) {
    				//如果属性本身,就是一个数组或者Json对象,进行深拷贝
    				if(typeof parent[prop] === "object") {
    					//确定子对象的属性类型,[]或者{}对象
    					child[prop] = (parent[prop].constructor === Array) ? [] : {};
    					//实现深拷贝
    					extendDeeply(parent[prop], child[prop]);
    				} else {
    					child[prop] = parent[prop];
    				}
    			}
    			return child;
    		}

2.2 深拷贝的实现分析

1. 初始化变量

2. 进行JSON对象的浅拷贝

extendDeeply(person, programer);

3. 观察父类数据修改后,子类数据的变化

3.1 programer 已经具有了person的属性内容

![20170401142334272][]

3.2**设置 person.address.home = "home "，发现子类的内容不会被改变**。

![20170401143846127][]

[20170401142334272]: /images/20220618/bd1ae110ec004ffd95bebd046bc8ea1e.png
[20170401142355319]: /images/20220618/0a2561509c044bf299e7ed9a0be94b43.png
[20170401143846127]: /images/20220618/a18fac62e6364934bd634ffa683f8659.png