脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JQuery.extend深度讲解,浅谈Object.create,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。
$.extend
对象的复制
就对象复制的问题,初学者一般会直接:
这肯定是不对的,你会发现当你改变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);
结果如下:
@H_512_38@最后说回$.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的自有属性;
运行结果如下:
觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!
以上是脚本宝典为你收集整理的javascript代码实例教程-JQuery.extend深度讲解,浅谈Object.create全部内容,希望文章能够帮你解决javascript代码实例教程-JQuery.extend深度讲解,浅谈Object.create所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。