jQuery开发插件的两个方法 js 深浅拷贝

栏目: Web · 发布时间: 2021-01-25

来源:cnblogs.com

简介  这篇文章主要介绍了jQuery开发插件的两个方法 js 深浅拷贝以及相关的经验技巧,文章约6703字,浏览量415,点赞数1,值得参考!

 

    

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

 

 



以上就是本文的全部内容,希望对大家的学习有所帮助,版权归原作者或者来源机构所有,感谢作者,如果未能解决你的问题,请参考以下文章。

javascript的深浅拷贝

深浅拷贝(示例代码)

java开发——Cloneable接口、clone()方法和深浅拷贝(示例代码)

js深浅拷贝(示例代码)

js的深浅拷贝