在jQuery源码中,jQuery是一个构造函数,
而这个特殊的构造函数使得 “ jQuery() ” 就可以构造出jQuery对象,而不用 “ new jQuery() ”
其中jQuery的构造函数非常特殊,今天看了一位大神的博文,收获很多,稍加整理
写成今天这篇笔记。今天是我第一次感受到,js 中 this 的魅力;
jQuery 的构造函数结构大概是这样的
(function(window){
var jQuery = function( selector, context ) { //jquery 的构造函数.
return new jQuery.fn.init( selector, context );
};
jQuery.fn = jQuery.prototype = { //jQuery的原型链.
b:3
};
//定义jQuery原型链下的init函数.
var init = jQuery.fn.init = function( selector, context, root ){
this.a = 3;
}
//通过window将闭包函数中的jQuery变量,变为公共变量.
window.$ = window.jQuery = jQuery;
})(window)
console.log($().a) //3
console.log($().b) //结果为undefined
问题出现了,new jQuery.fn.init( selector, context )
语句并没有将jQuery.prototype 下的属性初始化,而仅仅是将
init函数下面的属性初始化了,问题出现在了 "init.prototype" 上;
关键的语句
init.prototype = jQuery.fn;
这样完整的代码应该是这样的:
(function(window){
var jQuery = function( selector, context ) { //jquery 的构造函数.
return new jQuery.fn.init( selector, context );
};
jQuery.fn = jQuery.prototype = { //jQuery的原型链.
b:3
};
//定义jQuery原型链下的init函数.
var init = jQuery.fn.init = function( selector, context, root ){
this.a = 3;
}
//将jQuer.prototype 赋给 init.prototype
init.prototype = jQuery.fn;
//通过window将闭包函数中的jQuery变量,变为公共变量.
window.$ = window.jQuery = jQuery;
})(window)
console.log($().b) //3
在改变了 init.prototype 后输出正常了。