$.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 指向同一塊內存地址，大概的示意圖以下。而深複製通常都是開闢一塊新的內存地址，將原對象的各個屬性逐個複製出去。以下圖所示：