jQuery.fn.extend與jQuery.extend到底區別在哪？

最後更新：2014-08-24 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：blog http java io strong ar div cti 代碼

本文：

其實說白了，從兩個方法本身就能看出來端倪。

我們先把jQuery看成了一個類，這樣好理解一些。

jQuery.extend()，是擴充的jQuery這個類。

假設我們把jQuery這個類看成是人類，能吃飯能喝水能跑能跳，現在我們用jQuery.extend這個方法給這個類拓展一個能唱歌的技能。這樣的話，不論是男人，女人，xx人.....等能繼承這個技能（方法）了。

我們這樣寫：

12345 jQuery.extend({ liu: function(){ alert(‘liu‘); }});

然後：$.liu();這樣就能列印出來”liu“這個字串

測試代碼如下：

<!doctype html><html lang="zh-cmn-Hans-CN"><head>    <meta charset="UTF-8">    <title>Document</title>    <script type="text/javascript" src="jquery-2.1.1.js"></script>    <script type="text/javascript">    ;(function($) {        $.extend({            liu: function(){         　　　　alert(‘liu‘);   　　　　　}　　　　});    })(jQuery);    </script>    <script type="text/javascript">    $(document).ready(function() {        $.liu();    });    </script></head><body></body></html>

這說明啥啊，這說明.liu()變成了jQuery這個類本身的方法（object）嘛。他現在能”唱歌“了。

但是吧，這個能力啊，只有代表全人類的 jQuery 這個類本身，才能用啊。你個人想用，你張三李四王五麻六，你個小草民能代表全人類嘛？

所以啊，這個擴充也就是所謂的靜態方法。只跟這個類本身有關。跟你具體的執行個體化對象是沒關係滴。

我們再看看jQuery.fn.extend()這個方法。

從字面理解嘛，這個拓展的是jQuery.fn的方法。

jQuery.fn是啥玩意呢？

源碼裡是這麼寫的：

1234	`jQuery.fn = jQuery.prototype = {` 　　　`init:` `function( selector, context ) {//….`　　　　`//……` `};`

哦，原來jQuery.fn=jQuery.prototype，就是原型啊。

那就一目瞭然了，jQuery.fn.extend拓展的是jQuery對象（原型的）的方法啊！

對象是啥？就是類的執行個體化嘛，例如

1	`$("#abc")`

這個玩意就是一個執行個體化的jQuery對象嘛。

那就是說，jQuery.fn.extend拓展的方法，你得用在jQuery對象上面才行啊！他得是張三李四王五痳六這些執行個體化的對象才能用啊。

說白了就是得這麼用（假設xyz()是拓展的方法）：

1	`$(‘selector‘).xyz();`

你要是這麼用$.xyz()；是會出錯誤滴。

例子源碼如下：

<!doctype html><html lang="zh-cmn-Hans-CN"><head>    <meta charset="UTF-8">    <title>Document</title>    <script type="text/javascript" src="jquery-2.1.1.js"></script>    <script type="text/javascript">    ;(function($) {        $.fn.extend({            liu: function(){        　　　　 alert(‘liu‘);    　　　　 }　　　　});    })(jQuery);    </script>    <script type="text/javascript">    $(document).ready(function() {        $(‘div‘).liu();    });    </script></head><body>    <div></div></body></html>

和上邊的區別區別一目瞭然吧？

其實吧，jQuery.extend()這個方法，主要是用來拓展個全域函數啦，例如$.ajax()這種，要不就是拓展個選取器啦，例如$.fn.each()，當選取器用。