jquery源码分析（一）

最新推荐文章于 2020-12-23 12:38:39 发布

原创最新推荐文章于 2020-12-23 12:38:39 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery源码分析一

jquery 专栏收录该内容

1 篇文章

订阅专栏

本文深入探讨了jQuery的构造原理，包括$()函数的作用、jQuery原型对象的使用方式及其方法的扩展，同时分析了不同实现方式对this指向的影响。

代码如下:

<!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的操作的方法。