javascript代码实例教程-JQuery.extend深度讲解,浅谈Object.create

发布时间:2019-01-12 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JQuery.extend深度讲解,浅谈Object.create脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

$.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);

结果如下:

@H_512_38@

javascript代码实例教程-JQuery.extend深度讲解,浅谈Object.create

最后说回$.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的自有属性;

上述代码的运行结果如下:

javascript代码实例教程-JQuery.extend深度讲解,浅谈Object.create

接下来我们细说$.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__属性不变;

上面代码的运行结果如下:

javascript代码实例教程-JQuery.extend深度讲解,浅谈Object.create

deep为false时:

obj1 != thisObj;

obj1不变;

obj2不变;

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

运行结果如下:

javascript代码实例教程-JQuery.extend深度讲解,浅谈Object.create

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-JQuery.extend深度讲解,浅谈Object.create全部内容,希望文章能够帮你解决javascript代码实例教程-JQuery.extend深度讲解,浅谈Object.create所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。