JS prototype、类、对象、命名空间结合jQuery的理解

 

<script type="text/javascript">
	//-------------prototype对instanceof的影响----------------
	//使用new ABC()得到的东西继承了ABC的 prototype 的属性和方法
	//instanceof 的逻辑：先判断对象属于哪个类，再看那个类的prototype
	//1.没有return
	var jQuery = window.jQuery = window.$ = function( selector, context ) {
	};

	jQuery.fn = jQuery.prototype = {
		init:function(selector, context){
			selector = selector || document;// 确定selector存在
			if (selector.nodeType) {
				this[0] = selector;
				this.length = 1;
				return this;
			}
		}
	}
	var kk = new $(); //kk属于$
	alert(kk instanceof $.fn.init);//false
	alert(kk instanceof $);//true
	alert(kk instanceof Object);//true

	//2.添加return会把new $()对象抛弃  使得var kk = new $(); 和 var kk = $();的效果一致
	var jQuery = window.jQuery = window.$ = function( selector, context ) {
		 return new jQuery.fn.init( selector, context );
	};

	jQuery.fn = jQuery.prototype = {
		init:function(selector, context){
			selector = selector || document;// 确定selector存在
			if (selector.nodeType) {
				this[0] = selector;
				this.length = 1;
				return this;
			}
		}
	}
	var kk = new $(); //kk 属于jQuery.fn.init
	alert(kk instanceof $.fn.init);//true
	alert(kk instanceof $);//fasle
	alert(kk instanceof Object);//true

	//3.设置了prototype后 有没有return结果都一样
	jQuery.fn.init.prototype = jQuery.fn;
	//以下四个东西的内容一致
	alert(jQuery.fn.init);
	alert(jQuery.fn.init.prototype.init);
	alert(jQuery.fn.init.prototype.init.prototype.init);
	alert(jQuery.fn.init.prototype.init.prototype.init.prototype.init);

	//所以 jQuery.fn.init.prototype = jQuery.prototype
	var kk = new $(); //kk 属于jQuery.fn.init 
	alert(kk instanceof $.fn.init);//true
	alert(kk instanceof $);//true
	//-------------prototype对instanceof的影响----------------


	


//第一个括号里面是个匿名函数，第二个括号表示马上执行第一个括号里面的代码。
(function(id){
	
	//-------创建对象------------
	var TE = {}; //相当于TE=new Object();
	alert(typeof Object); //function
	alert(typeof Array);//function
	//Js中特别的一个东西
	alert(typeof Math);//Object	由于prototype只能用于function, Math.prototype这个会导致语法错误

	//如何创建对象
	//1.静态类,只有静态属性和静态方法 不能使用new
	var DI = {
		name:"name",
		sex:"sex",
		age:12,
		dfunc:function(){
			alert('dfunc');
		},
	}
	//使用下面的方法添加静态属性和方法
	DI.n2='n2';
	DI['n3']='n3';
	DI.f2=function(){}
	DI['f3']=function(){}

	
	//2.拥有动态、静态属性以及方法
	//prototype称为类的原型，用来添加类的动态属性和方法，必须通过对象调用
	//以下四种方式添加的都是动态的         
	function ClassTest(){
		//(1).类内部
        this.name1='name1';
		this.func1=function(){
			alert('func1');
		}
		//(2).类内部
		ClassTest.prototype.name2='name2';
		ClassTest.prototype.func2=function(){
			alert('func2');
		}
		//(3).类内部
		this['name3']='name3';
		this['func3']=function(){
			alert('func3');
		}
	}
	var cct = new ClassTest();
  	//(4).类外部
   	ClassTest.prototype.name4='name4';
	ClassTest.prototype.func4=function(){
		alert('func4');
	}
	cct.func4();//执行成功，可见建立了对象后，再使用prototype,已建的对象也生效
	
	//定义类的静态属性和方法,不能通过对象调用,直接使用类名.方法()调用
	ClassTest.staticName='staticName';
	ClassTest.staticFun=function(){
		alert('staticFun');
	};
	ClassTest['staticName2']='staticName2';
	ClassTest['staticFun2']=function(){
		alert('staticFun2');
	};

	alert(typeof ClassTest); //function]
	alert(ClassTest.prototype instanceof Object);//true
	

	var CT = new ClassTest();//创建对象
	alert(typeof CT); //object
	//添加对象属性\方法  
	CT.name5 = 'name5';
	CT.func5 = function(){
		alert('func5');
	}
	CT['name6'] = 'name6';
	CT['func6'] = function(){
		alert('func6');
	}
	//-------创建对象------------


	//---------命名空间-----------------用于理解类、对象与属性之间的关系
	
	window.ClassTest = ClassTest; //window对象的属性ClassTest是个类ClassTest
	window.CT = CT; //window对象的CT属性是个对象CT
	
	alert(typeof window.CT); //object
	alert(typeof window.ClassTest); //function
	
	//这种情况理解为定义了KJ和window.KJ两个变量
	window.KJ={};
	alert(typeof window.KJ); //object
	alert(typeof KJ); //object

	//多层命名空间
	window.CT.CT2=function(){};
	alert(typeof window.CT.CT2);//object
	//---------命名空间-----------------
})(12);


</script>

 

//以下都执行正常，说明cd,ab都是引用？
var cd = ab = {};
ab.func = function(){
	alert(1);
}
cd.func();
cd.f2 = function() {
	alert(2);
}
ab.f2();

 

 this的含义

//---------函数方法中this的意义--------
	var aa = window.aa= function(){
		alert(this);
		alert(this instanceof aa);
		return 1;
	}
	aa(); //[Object window] false
	new aa(); //[Object Object] true

	aa.extend = function(){
		alert(this);
	}
	aa.extend();//aa方法
	new aa.extend();//[Object Object]
	//---------函数方法中this的意义--------
	

 

//类中的this
var obj = {
	func1 = function(){
		alert(this);//只当前的obj对象
	}
}