JQuery.extend深度讲解,浅谈Object.create

1 篇文章 0 订阅

$.extend
简单来说就是 实现单个对象的复制或者多个对象的合并

对象的复制

就对象复制的问题,初学者一般会直接:
var newObj = originObj;
这肯定是不对的,你会发现当你改变newObj的时候,originObj也随之改变了。因为newObj只是一个指向originObj的地址。
然后比较复杂的方法就是遍历originObj一个个对newObj赋值,垃圾方法!
再者是我用了很长时间的方法,现在想想也有问题:
var newObj = Object.create(originObj);
该方法往往用于对象的继承中。问题在于原本originObj的自有属性都成了newObj的__proto__属性:

var originObj = {                         
    name: "hanhan",                       
    age: 33                               
}                                         

var newObj = Object.create(originObj);    
newObj.job = "web_enginerr";              

console.log(originObj);//不变               
console.log(newObj);                      

结果如下:
这里写图片描述
最后说回$.extend
用$.extend实现对象的继承:

var originFunc = function(){             
    this.name = "hanhan";                
    this.age = 33;                       
}                                        
originFunc.prototype.Job = "writter";    

var originObj = new originFunc();        

var newObj = $.extend({}, originObj)     

console.log(originObj);                  
console.log(newObj);                     

这时候会有另外一个问题:就是originObj的__proto__属性变成了newObj的自有属性;
上述代码的运行结果如下:
这里写图片描述


接下来我们细说$.extend:

jQuery.extend( [deep ], target, object1 [, objectN ] ):
将target和object1合并,出现同名属性时,object1的值覆盖target。

第一个参数:默认是true,所以
jQuery.extend( true, target, object1)=== jQuery.extend( target, object1)
然后我们重点来说说 deep = true 和 false的差别(实际上并不是深拷贝和浅拷贝的区别);

function funcObj1(){                               
    this.name = "someOne";                         
    this.age = 18;                                 
}                                                  
funcObj1.prototype.protoHoby = "feel people";      

var obj1 = new funcObj1();                         


function funcObj2(){                               
    this.name = "Is_me";                           
    this.job = "web-engineer";                     
}                                                  
funcObj2.prototype.protoCreate = function(){       
    console.log("hahahha");                        
}                                                  

var obj2 = new funcObj2();                         


//var thisObj = jQuery.extend(obj1, obj2);         
var thisObj = jQuery.extend(true, obj1, obj2);     
//var thisObj = jQuery.extend(false, obj1, obj2);  
thisObj.my_self = "trytrytrytry";

console.dir(obj1);                                 
console.dir(obj2);                                 
console.log(thisObj);                              

deep为true时:

obj1 === thisObj;
obj1跟随thisObj变化而变化,其实就是$.extend返回的就是obj1,thisObj只是指向obj1的地址;
obj2不变;
obj2的__proto__变成了thisObj的自有属性,obj1的__proto__属性不变;

上面代码的运行结果如下:
这里写图片描述

deep为false时:

obj1 != thisObj;
obj1不变;
obj2不变;
obj1和obj2的__proto__都变成了thisObj的自有属性;

运行结果如下:
这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值