出处-Aaron
问题：
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(){...};】