jQuery中extend函數(shù)的實現(xiàn)原理詳解

更新時間：2015年02月03日 09:25:29 作者：Hito''''s Blog

這篇文章主要介紹了jQuery中extend函數(shù)的實現(xiàn)原理詳解,extend()函數(shù)用于jQuery插件的開發(fā),本文主要分析它的實現(xiàn)原理,需要的朋友可以參考下

extend()是jQuery中一個重要的函數(shù)，作用是實現(xiàn)對對象的擴展, 它經(jīng)常用于jQuery插件的開發(fā)，jQuery內部也使用它來擴展屬性方法，如上篇文章中講到的noConflict方法，就是用extend方法來擴展的。

在jQuery的API手冊中，我們看到，extend實際上是掛載在jQuery和jQuery.fn上的兩個不同方法，盡管在jQuery內部jQuery.extend()和jQuery.fn.extend()是用相同的代碼實現(xiàn)的，但是它們的功能卻不太一樣。來看一下官方API對extend的解釋:

復制代碼代碼如下:

jQuery.extend(): Merge the contents of two or more objects together into the first object.(把兩個或者更多的對象合并到第一個當中)

jQuery.fn.extend():Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods.(把對象掛載到jQuery的prototype屬性，來擴展一個新的jQuery實例方法)

我們知道，jQuery有靜態(tài)方法和實例方法之分, 那么jQuery.extend()和jQuery.fn.extend()的第一個區(qū)別就是一個用來擴展靜態(tài)方法，一個用來擴展實例方法。用法如下:

jQuery.extend({
 sayhello:function(){
 console.log("Hello,This is jQuery Library");
 }
})
$.sayhello(); //Hello, This is jQuery Library
jQuery.fn.extend({
 check: function() {
 return this.each(function() {
 this.checked = true;
 });
 },
 uncheck: function() {
 return this.each(function() {
 this.checked = false;
 });
 }
})
$( "input[type='checkbox']" ).check(); //所有的checkbox都會被選擇

注意兩種調用插件的方式，一種是直接用$調用，另外一種是用$()調用，另外jQuery.extend()接收多個對象作為參數(shù)，如果只有一個參數(shù)，則把這個對象的屬性方法附加到jQuery上，如果含有多個參數(shù)，則把后面的對象的屬性和方法附加到第一個對象上。jQuery extend的實現(xiàn)源碼:

jQuery.extend = jQuery.fn.extend = function() {
 var options, name, src, copy, copyIsArray, clone,
 target = arguments[0] || {},
 i = 1,
 length = arguments.length,
 deep = false;
 // Handle a deep copy situation
 if ( typeof target === "boolean" ) {
 deep = target;
 target = arguments[1] || {};
 // skip the boolean and the target
 i = 2;
 }
 // Handle case when target is a string or something (possible in deep copy)
 if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
 target = {};
 }
 // extend jQuery itself if only one argument is passed
 if ( length === i ) {
 target = this;
 --i;
 }
 for ( ; i &lt; length; i++ ) {
 // Only deal with non-null/undefined values
 if ( (options = arguments[ i ]) != null ) {
 // Extend the base object
 for ( name in options ) {
 src = target[ name ];
 copy = options[ name ];
 // Prevent never-ending loop
 if ( target === copy ) {
  continue;
 }
 // Recurse if we're merging plain objects or arrays
 if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
  if ( copyIsArray ) {
  copyIsArray = false;
  clone = src && jQuery.isArray(src) ? src : [];
  } else {
  clone = src && jQuery.isPlainObject(src) ? src : {};
  }
  // Never move original objects, clone them
  target[ name ] = jQuery.extend( deep, clone, copy );
 // Don't bring in undefined values
 } else if ( copy !== undefined ) {
  target[ name ] = copy;
 }
 }
 }
 }
 // Return the modified object
 return target;
};

很大一堆代碼，乍看起來難以理解，其實代碼的大部分都是用來實現(xiàn)jQuery.extend()中有多個參數(shù)時的對象合并，深度拷貝問題，如果去掉這些功能，讓extend只有擴展靜態(tài)和實例方法的功能，那么代碼如下:

jQuery.extend = jQuery.fn.extend = function(obj){
 //obj是傳遞過來擴展到this上的對象
 var target=this;
 for (var name in obj){
 //name為對象屬性
 //copy為屬性值
 copy=obj[name];
 //防止循環(huán)調用
 if(target === copy) continue;
 //防止附加未定義值
 if(typeof copy === 'undefined') continue;
 //賦值
 target[name]=copy;
 }
 return target;
}

下面再來對extend方法進行注釋解釋:

jQuery.extend = jQuery.fn.extend = function() {
 // 定義默認參數(shù)和變量
 // 對象分為擴展對象和被擴展的對象 
 //options 代表擴展的對象中的方法
 //name 代表擴展對象的方法名
 //i 為擴展對象參數(shù)起始值
 //deep 默認為淺復制
 var options, name, src, copy, copyIsArray, clone,
 target = arguments[0] || {},
 i = 1,
 length = arguments.length,
 deep = false;
 //當?shù)谝粋€參數(shù)為布爾類型是，次參數(shù)定義是否為深拷貝
 //對接下來的參數(shù)進行處理
 if ( typeof target === "boolean" ) {
 deep = target;
 target = arguments[1] || {};
 // 當定義是否深拷貝時，參數(shù)往后移動一位
 i = 2;
 }
 // 如果要擴展的不是對象或者函數(shù)，則定義要擴展的對象為空
 if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
 target = {};
 }
 // 當只含有一個參數(shù)時，被擴展的對象是jQuery或jQuery.fn
 if ( length === i ) {
 target = this;
 --i;
 }
 //對從i開始的多個參數(shù)進行遍歷
 for ( ; i &lt; length; i++ ) {
 // 只處理有定義的值
 if ( (options = arguments[ i ]) != null ) {
 // 展開擴展對象
 for ( name in options ) {
 src = target[ name ];
 copy = options[ name ];
 // 防止循環(huán)引用
 if ( target === copy ) {
  continue;
 }
 // 遞歸處理深拷貝
 if ( deep && copy &&; ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
  if ( copyIsArray ) {
  copyIsArray = false;
  clone = src && jQuery.isArray(src) ? src : [];
  } else {
  clone = src && jQuery.isPlainObject(src) ? src : {};
  }
  target[ name ] = jQuery.extend( deep, clone, copy );
 // 不處理未定義值
 } else if ( copy !== undefined ) {
  //給target增加屬性或方法
  target[ name ] = copy;
 }
 }
 }
 }
 //返回
 return target;
};

弄懂了jQuery擴展的原理，相信以后再也不用為編寫jQuery插件而煩惱了。

您可能感興趣的文章: