jQuery开发插件的两个方法 js 深浅拷贝
Posted G_Owen
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery开发插件的两个方法 js 深浅拷贝相关的知识,希望对你有一定的参考价值。
1.jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法。由全局函数来调用, 主要是用来拓展个全局函数
2.jQuery.fn.extend(object);为jQuery的实例对象添加方法 由实例对象来调用,可以用来拓展个选择器,例如$.fn.each();
extend
添加静态方法,直接用$在其他地方来调用此扩展方法了
$.extend({
test:function(param){
alert(param);
}
});
$.test(1);//则直接弹出1
$.test(1)变成了jQuery这个类本身的方法。
extend扩展:
- extend([deep ], target, object1,object2,object3,objectN)
将object1,object2,object3,...合并到target中,返回值为合并后的target,由此可以看出该方法合并后,是修改了target的结构的。
后面的参数如果和前面的参数存在相同的名称,那么后面的会覆盖前面的参数值。
deep :Boolean 设置为true 为深拷贝
fn.extend
$.fn.extend({ test:function(){ alert("1"); } }); $("div").test();
test()变成了jQuery实例化对象的方法。
深浅拷贝
如果给一个变量赋值一个对象 ,那么两者的值会是同一个引用,改变其中一方,另一方也会相应改变。
通过 Object.assign
进行浅拷贝即可解决
let a = { name: "小明" } let b = Object.assign({}, a) a.name = "小文"; console.log(b.name) // "小明" // 也可以通过展开运算符(…)解决 let b = {...a} a.obj.name="小文"; console.log(b.name) //"小明";
浅拷贝只解决了第一层的问题,如果接下去的值中还有对象的话,两者会有相同的引用。
let a = { name: "小明", obj:{ name:"小汪" } } let b = {...a} a.obj.name="小文"; console.log(b.obj.name) //"小文";
可以通过 JSON.parse(JSON.stringify(object))
来解决。
let a = { name: "小明", obj:{ name:"小汪" } } let b = JSON.parse(JSON.stringify(a)) a.obj.name="小文"; console.log(b.obj.name) //"小汪";
该函数是内置函数中处理深拷贝性能最快的,但是该方法也是有局限性的:
- 会忽略
undefined
- 不能序列化函数
- 不能解决循环引用的对象
let a = { a: undefined, b: function() {}, c: ‘yck‘ } let b = JSON.parse(JSON.stringify(a)) console.log(b) // {c: "yck"}
当然如果你的数据中含有以上三种情况下,可以使用 lodash 的深拷贝函数。
如果你所需拷贝的对象含有内置类型并且不包含函数,可以使用 MessageChannel
1 function structuralClone(obj) { 2 return new Promise(resolve => { 3 const {port1, port2} = new MessageChannel(); 4 port2.onmessage = ev => resolve(ev.data); 5 port1.postMessage(obj); 6 }); 7 } 8 9 var obj = {a: 1, b: { 10 c: b 11 }} 12 // 注意该方法是异步的 13 // 可以处理 undefined 和循环引用对象 14 const clone = await structuralClone(obj);
以上是关于jQuery开发插件的两个方法 js 深浅拷贝的主要内容,如果未能解决你的问题,请参考以下文章