問題：
1：jQuery對象的構建方式是什么？
2：jQuery方法的調用方式是什么？
jQuery架構的核心：
// Define a local copy of jQuery（構造函數）
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;
常規方法調用：
//定義函數---類
var GYH = function (selector, context) {
this.selector = selector;
this.context = context;
};
//定義方法---原型上
GYH.prototype = {
getSelector: function () {
//...
},
getContext: function () {
//...
}
};
//實例化這個函數---類
var gyh = new GYH('mySelector', 'myContext');
//調用方法
gyh.getSelector();
gyh.getContext();
jQuery方法調用：
$(selector).ready(); // jQuery(selector).ready();
$(selector).css(); // jQuery(selector).css();
$().noConflict(); // jQuery().noConflict();
jQuery沒有使用new【實際上在構造函數內部使用new，我們實際調用的時候不需要new】
應該在構造函數的內部返回實例，如何使用呢？
var GYH = function (selector, context) {
//...
return new GYH(selector, context);
};
GYH.prototype = {
getSelector: function () {
//...
},
getContext: function () {
//...
}
};
GYH('mySelector', 'myContext'); // 顯然這樣的調用陷入了死循環
jQuery是這樣正確返回一個實例的：
var GYH = function (selector) {
return GYH.prototype.init();
};
GYH.prototype = {
init: function () {
return this; // 原型中的this指向的是這個構造函數的一個實例么？？？
},
getSelector: function () {
//...
}
};
GYH();//返回的是GYH的一個實例。不需要new。
image.png
上圖可見：調用GYH()這個構造函數返回的是該構造函數的一個實例，那么init中的this指向GYH這個構造函數的一個實例。
為什么jQuery要將init函數也作為一個構造器？
image.png
這樣每次調用jQuery構造函數都new出了一個新jquery實例對象，主要是分隔了this
這樣分隔
this帶來的問題？
沒有newinit如下：
image.png
new了init如下：
image.png
可以看出，new問題就是：無法訪問GYH這個構造器的原型（prototype）上面的屬性和方法。
jQuery是這樣解決的：
image.png
image.png
我們的例子也可以訪問GYH原型上的屬性和方法了：
image.png
為什么age屬性返回的是18而不是20呢？
因為是先查找實例上的屬性和方法，如果實例上沒有，再沿著原型鏈上查找屬性和方法。
解釋一下jQuery.fn：
其實沒有什么用，只是對jQuery.prototype的引用。
jQuery.fn.init.prototype = jQuery.fn = jQuery.prototype
問題：jQuery的鏈式調用時如何實現的？
image.png
解決：方法內最后返回this。this是什么？，this就是當前jQuery實例對象。
缺點：所有的方法都要返回對象本身。【不一定所有的方法都沒有返回值的】
優點：代碼更加優雅。
問題：如何寫一個jQuery的擴展插件？
解決：jQuery.fn.extend();?來為jQuery實例對象擴展新的屬性和方法。
image.png
jQuery.extend();是對jQuery本身的屬性和方法進行了擴展；
jQuery.fn.extend();是對jQuery.fn也就是jQuery.prototype上的屬性和方法進行了擴展。
上圖貌似表明了jQuery.fn.extend();和jQuery.extend();都是對同一個函數的引用，那么為什么會實現不同的功能呢？？？
答案：this的力量。不同的調用，在extend函數內的this的指向是不同的。
jQuery.extend();這樣調用，extend函數內的this是指向jQuery構造器的。
jQuery.fn.extend();這樣調用，extend函數內的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函數的實現：【注意只傳遞一個參數的情況的分支，和this相關】
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;
};
簡單的對象復制：
image.png
復雜的對象復制-----淺復制
image.png
復雜的對象復制-----深復制
image.png
jQuery擴展插件的實現方式：
1、通過jQuery.extend();
----->【在jQuery上添加了一個靜態方法】
----->【定義方式：$.extend({myPlugin: function(){...}})】
----->【調用方式：$.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...'); //調用
$.log('debugging...');
image.png
----->【缺點：無法利用jQuery強大的選擇器帶來的便利】
2、通過jQuery.fn.myPlugin = function(){...};
----->【在jQuery原型對象上新添加了一個方法】
----->【定義方式：jQuery.fn.myPlugin = function(){...};】
