問題：
1：jQuery對(duì)象的構(gòu)建方式是什么搭独？
2：jQuery方法的調(diào)用方式是什么？
jQuery架構(gòu)的核心：
// Define a local copy of jQuery（構(gòu)造函數(shù)）
var jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context, rootjQuery );
};
jQuery.fn = jQuery.prototype = {
//原型上的方法和屬性
};
jQuery.fn.init.prototype = jQuery.fn;
常規(guī)方法調(diào)用：
//定義函數(shù)---類
var GYH = function (selector, context) {
this.selector = selector;
this.context = context;
};
//定義方法---原型上
GYH.prototype = {
getSelector: function () {
//...
},
getContext: function () {
//...
}
};
//實(shí)例化這個(gè)函數(shù)---類
var gyh = new GYH('mySelector', 'myContext');
//調(diào)用方法
gyh.getSelector();
gyh.getContext();
jQuery方法調(diào)用：
$(selector).ready(); // jQuery(selector).ready();
$(selector).css(); // jQuery(selector).css();
$().noConflict(); // jQuery().noConflict();
jQuery沒有使用new【實(shí)際上在構(gòu)造函數(shù)內(nèi)部使用new折欠，我們實(shí)際調(diào)用的時(shí)候不需要new】
應(yīng)該在構(gòu)造函數(shù)的內(nèi)部返回實(shí)例患蹂，如何使用呢？
var GYH = function (selector, context) {
//...
return new GYH(selector, context);
};
GYH.prototype = {
getSelector: function () {
//...
},
getContext: function () {
//...
}
};
GYH('mySelector', 'myContext'); // 顯然這樣的調(diào)用陷入了死循環(huán)
jQuery是這樣正確返回一個(gè)實(shí)例的：
var GYH = function (selector) {
return GYH.prototype.init();
};
GYH.prototype = {
init: function () {
return this; // 原型中的this指向的是這個(gè)構(gòu)造函數(shù)的一個(gè)實(shí)例么城菊？？碉克？
},
getSelector: function () {
//...
}
};
GYH();//返回的是GYH的一個(gè)實(shí)例凌唬。不需要new。
image.png
上圖可見：調(diào)用GYH()這個(gè)構(gòu)造函數(shù)返回的是該構(gòu)造函數(shù)的一個(gè)實(shí)例漏麦，那么init中的this指向GYH這個(gè)構(gòu)造函數(shù)的一個(gè)實(shí)例客税。
為什么jQuery要將init函數(shù)也作為一個(gè)構(gòu)造器？
image.png
這樣每次調(diào)用jQuery構(gòu)造函數(shù)都new出了一個(gè)新jquery實(shí)例對(duì)象撕贞，主要是分隔了this
這樣分隔
this帶來的問題更耻？
沒有newinit如下：
image.png
new了init如下：
image.png
可以看出，new問題就是：無法訪問GYH這個(gè)構(gòu)造器的原型（prototype）上面的屬性和方法捏膨。
jQuery是這樣解決的：
image.png
image.png
我們的例子也可以訪問GYH原型上的屬性和方法了：
image.png
為什么age屬性返回的是18而不是20呢秧均？
因?yàn)槭窍炔檎覍?shí)例上的屬性和方法食侮，如果實(shí)例上沒有，再沿著原型鏈上查找屬性和方法目胡。
解釋一下jQuery.fn：
其實(shí)沒有什么用锯七，只是對(duì)jQuery.prototype的引用。
jQuery.fn.init.prototype = jQuery.fn = jQuery.prototype
問題：jQuery的鏈?zhǔn)秸{(diào)用時(shí)如何實(shí)現(xiàn)的讶隐？
image.png
解決：方法內(nèi)最后返回this起胰。this是什么？巫延，this就是當(dāng)前jQuery實(shí)例對(duì)象效五。
缺點(diǎn)：所有的方法都要返回對(duì)象本身÷澹【不一定所有的方法都沒有返回值的】
優(yōu)點(diǎn)：代碼更加優(yōu)雅畏妖。
問題：如何寫一個(gè)jQuery的擴(kuò)展插件？
解決：jQuery.fn.extend();?來為jQuery實(shí)例對(duì)象擴(kuò)展新的屬性和方法疼阔。
image.png
jQuery.extend();是對(duì)jQuery本身的屬性和方法進(jìn)行了擴(kuò)展戒劫；
jQuery.fn.extend();是對(duì)jQuery.fn也就是jQuery.prototype上的屬性和方法進(jìn)行了擴(kuò)展。
上圖貌似表明了jQuery.fn.extend();和jQuery.extend();都是對(duì)同一個(gè)函數(shù)的引用婆廊，那么為什么會(huì)實(shí)現(xiàn)不同的功能呢迅细？？淘邻？
答案：this的力量茵典。不同的調(diào)用，在extend函數(shù)內(nèi)的this的指向是不同的宾舅。
jQuery.extend();這樣調(diào)用统阿，extend函數(shù)內(nèi)的this是指向jQuery構(gòu)造器的。
jQuery.fn.extend();這樣調(diào)用筹我，extend函數(shù)內(nèi)的this是指向jQuery.prototype即原型的扶平。
(function (window, undefined) {
var
rootjQuery,
jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context, rootjQuery );
};
jQuery.fn = jQuery.prototype = {
init: function () {
return this;
}
};
jQuery.fn.init.prototype = jQuery.fn;
jQuery.extend = jQuery.fn.extend = function() {
console.log(this);
};
window.$ = jQuery;
})(window);
var obj = {a: 0};
$.extend(obj);
$.fn.extend(obj);
jQuery的extend函數(shù)的實(shí)現(xiàn)：【注意只傳遞一個(gè)參數(shù)的情況的分支，和this相關(guā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 < 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;
};
簡(jiǎn)單的對(duì)象復(fù)制：
image.png
復(fù)雜的對(duì)象復(fù)制-----淺復(fù)制
image.png
復(fù)雜的對(duì)象復(fù)制-----深復(fù)制
image.png
jQuery擴(kuò)展插件的實(shí)現(xiàn)方式：
1蔬蕊、通過jQuery.extend();
----->【在jQuery上添加了一個(gè)靜態(tài)方法】
----->【定義方式：$.extend({myPlugin: function(){...}})】
----->【調(diào)用方式：$.myPlugin();】
----->【作用：定義一些輔助方法比較方便结澄，比如打印日志什么的】
$.extend({
log: function(message) {
var now = new Date(),
y = now.getFullYear(),
m = now.getMonth() + 1, //！JavaScript中月分是從0開始的
d = now.getDate(),
h = now.getHours(),
min = now.getMinutes(),
s = now.getSeconds(),
time = y + '/' + m + '/' + d + ' ' + h + ':' + min + ':' + s;
console.log(time + '----------------My App: ----------------' + message);
}
})
$.log('initializing...'); //調(diào)用
$.log('debugging...');
image.png
----->【缺點(diǎn)：無法利用jQuery強(qiáng)大的選擇器帶來的便利】
2袁串、通過jQuery.fn.myPlugin = function(){...};
----->【在jQuery原型對(duì)象上新添加了一個(gè)方法】
----->【定義方式：jQuery.fn.myPlugin = function(){...};】
