$.extend与$.fn.extend的定义与区别,以及extend的深浅拷贝

$.extend    //扩展工具方法

$.fn.extend   //扩展实例方法

$.extend = function(){

  a:function(){

    alert(1);

  },

  b:function(){

    alert(2);

  }

}

$.a();

$.b();

//即添加了一个工具,可以直接调用。

$.extend() -> this -> (指向的$这个对象)$ -> this.a -> $.a();//相当于在一个$对象里面添加一个a的方法,就可以直接在这个对象里面调用。

$.fn.extend = function(){

  a:function(){

    alert(3);

  },

  b:function(){

    alert(4);

  }

}

$().a();

$().b();

//即添加了一个实例方法,需要有具体的实例才能调用。

$.fn.extend() -> this  -> (指向的原型)$.fn -> this.a -> $().a();//相当于在原型面添加一个a的方法,因此就需要在new出来的一个对象里面调用。

*$.extend还具有深拷贝与浅拷贝功能。

浅:

var a = {};

var b = {name:"hello"}

$.extend(a,b);//a继承 基本类型的 b时,可以保存实际值在变量中,因此b里面不会变。

a.name = "hi";

console.log(b.name);//hello

var c = {};

var d = {name:{age:30}}

$.extend(c,d);//c继承 不为基本类型的 d时,只是一个引用,因此b里面也会跟着变。

c.name.age = 20;

console.log(d.name);//20

深:

var e = {};

var f = {name:{age:30}}

$.extend(true,e,f);//第一个变量为true的时候 就是深度拷贝,它开辟了新内存,然后逐一拷贝原有的内容,因此不会改变f中的name

e.name.age = 20;

console.log(f.name);//30

总结:

var obj = { a:1, arr: [1,2] };
var obj1 = obj;            //浅复制
var obj2 = deepCopy(obj);  //深复制

因为JavaScript存储对象都是存地址的,所以浅复制会导致 obj 和 obj1 指向同一块内存地址,大概的示意图如下。而深复制一般都是开辟一块新的内存地址,将原对象的各个属性逐个复制出去。如下图所示:

原文地址:https://www.cnblogs.com/yuan-ye/p/4885989.html