代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery源码分析</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
(function(){
var window = this,
jQuery = window.jQuery = window.$ = function(){
//return new jQuery(); new jQuery方法时,又会去执行jQuery方法,形成了递归调用。
return jQuery.fn.init(); //①
//return new jQuery.fn.init(); //② };
jQuery.fn = jQuery.prototype = { //扩展的是原型的对象,而不是函数
//jQuery 是给原型方法加了对象,并且存入的dom节点数组。--------混合体
init : function() {
console.log("init this");
console.log(this);
return this;
},
size:function(){
console.log("size");
console.log(this);
this.length
},
version:"jquery 1.0.1"
};
})();
//$("#result").value(); //得到“#result”
console.log($());
alert(typeof $());
//console.log($.fn);
//console.log($());
//alert($().version);
</script>
</head>
<body>
<div class="container">
<div id="result">result<div>
</div>
</body>
</html>
console控制输入如下:
当为情况①时:此处调用的jQuery原型对象中一个方法,但是返回的对象就jQuery的原型对象;所有具有该对象具有扩充了几个方法。
当为情况②时:但是在此处,就相当于new init()对象,自然this就是指init对象。不具备扩展的方法。
(function(){
var window = this,
jQuery = window.jQuery = window.$ = function(){
return jQuery.fn.init();
};
jQuery.fn = jQuery.prototype = {
init : function() {
this.length = 2;
this.test = function(){
return "test";
}
return this;
},
length:1,
size:function(){
return this.length;
},
version:"jquery 1.0.1"
};
alert($().length); //2
alert($().size()); //2 size中的this.length被重写了。
alert($().test()); //test
alert($().version); //jquery 1.0.1
//分析 在$()调用的时候,this就是指向jQuery原型对象的。所以在init方法中把原型对象中的length方法给覆盖了。并且还扩充了一个test函数。
})();
假设$()获得的就是我们通过选择器获取的对象,那么我们已经基本完成了方法的扩充的功能。$()已经包含了jquery原型对象的方法。
在此处我们感觉到是this的弄混了。this都指的是jquery原型对象,初始化构造器和jquery原型对象怎么分开其作用域呢?
这个时候我们在考虑②处的方法:new jQuery.fn.init(); 可以使init的this指向init对象,但是new出来的对象没有jQuery原型的version属性和size方法。
可以通过再次把jQuery的原型jQuery.fn赋值给jQuery.fn.init:
jQuery.fn.init.prototype = jQuery.fn;
(function(){
var window = this,
jQuery = window.jQuery = window.$ = function(){
return new jQuery.fn.init();
};
jQuery.fn = jQuery.prototype = {
init : function() {
this.length = 2;
this.test = function(){
return "test";
}
return this;
},
length:1,
size:function(){
return this.length;
},
version:"jquery 1.0.1"
};
jQuery.fn.init.prototype= jQuery.fn;//通过原型赋值,这样new来的对象就有属于自己的方法和jQuery继承过来的方法。
alert($().length); //2
alert($().size()); //2
alert($().test()); //test
alert($().version); //jquery 1.0.1
})();
这样就完成对象拥有jquery的方法。jquery就完成两件事情:1、完成选择器,把符合一定规则的dom节点选出来放入对象中;
2、完成对对象中的dom的操作的方法。