先从简单的js代码开始:

 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
  2. <html xmlns="http://www.w3.org/1999/xhtml"
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>无标题文档</title> 
  6. <script type="text/javascript"
  7. //请养成var的好习惯 
  8. var a=123; 
  9. alert(window.a); 
  10. var b="hello"
  11. alert(window.b); 
  12. window.c=true; alert(window.c);
  13. </script> 
  14. </head> 
  15.  
  16. <body> 
  17. </body> 
  18. </html> 

这个简单的代码我想大家都明白,这里全局范围内声明的2个变量,等于为全局对象window附加2个属性.关于为什么强调要使用var,后面我们会看到理由。

这里都是简单的变量,我们可以稍微复杂些,来个函数对象和其他对象。

 

  1. //请养成var的好习惯 
  2. function func1() 
  3.     alert("func1"); 
  4.  
  5. window.func2=function(){alert("func2");}; 
  6.  
  7. var func3=func1; 
  8.  
  9. var func4=new Function("alert(\"func4\");");//晦涩难读,不常见。 
  10. window.func1(); 

我们看到这几个基本相同的代码(关于function与Function方式的差别不在这里讨论),typeof(window.func****)我们知道他们是function对象。

也属于全局范围。

 

  1. //请养成var的好习惯 
  2. var i=123
  3. var s="hello"
  4. var f=4.5555; 
  5. var b=false
  6. var udef;//=undefined 
  7. var nul=null
  8. var o={}; 

但你想过没有,随之脚本量的增加全局变量增多,冲突的可能性就加大,随时都有被覆盖的风险。

好比是往根目录拷贝文件,同名的可能性在所难免的。我们想到的办法是使用层级目录的方式,软件开发领域解决这种情况借用的名字空间的方式(Namespace或者包Package).

js没有在语言层次给予名字空间支持,但是聪明的程序人员们还是想到了解决的办法。

我们知道alert(typeof window);你看到的是个object既然全局window是个对象,能承载其他的变量,那么好办了,我们的一般对象也可以有这种能力:

window.AAA.a这样不就可以实现层级管理名字了吗。

  1. var MyUtils={};//声明一个"名字空间" 
  2. MyUtils.a=123; 
  3. MyUtils.b=true
  4. alert(MyUtils.a); 
  5.  
  6. var MyTools={ 
  7.     Test:function() 
  8.     { 
  9.         alert("Test"); 
  10.     }, 
  11.      
  12.     F:function(){ 
  13.         alert("F function"); 
  14.     } 
  15. }; 
  16. MyTools.F(); 
  17.  
  18. MyTools.a="此a非比a."
当然我们还可以继续嵌套,类似多层目录,读者可以自己实验。 现在OOP大行其道,我们看看js里的“类”,用引号称它是个类,因为js目前没有给我们提供Class关键字之类的东西,只是在js实现上采用了个小技巧。 我们来看下,有必要对Function来个简介,因为他对js里的类实现有的不可轻视的重要低位。 看下这个就知道对象与Function的千丝万缕的关系了:、
  1. var o=new Object; 
  2. alert(typeof o.constructor); 
输出function,也就是说js的对象有个contructor属性指向当成实例化它的那个构造函数。
再实验下:
  1. var MyUtils={};//声明一个"名字空间" 
  2.  
  3. //声明构造函数 
  4. MyUtils.Student=function(name,age) 
  5.     this.name=name;  
  6.     this.age=age; 
  7. }; 
  8.  
  9. var o=new MyUtils.Student('张三',23); 
  10. alert(o.constructor); 
我们验证了这一点。
  1. var MyUtils={};//声明一个"名字空间" 
  2.  
  3. //声明构造函数 
  4. MyUtils.Student=function(n,a) 
  5.     this.name=n;     
  6.     this.age=a; 
  7.      
  8.     //可以实现私有方法 
  9.     function echo() 
  10.     { 
  11.         alert(this.name+"的年龄是:"+this.age); 
  12.     } 
  13.     this.Echo=echo;//公开一个接口对外使用 
  14. }; 
  15.  
  16. var o=new MyUtils.Student('张三',23); 
  17. o.Echo(); 
实例化的问题解决了。当然了有个问题,对于实例方法来说,每个实例对象保持一个副本不太合理。

还有如何实现OOP里的继承思想呢?

不得不提到prototype这个属性,上面实例化过程
var o1=new MyUtils.Student('张三',23);
new时,会生成一个对象,构造方法里的this指向这个对象,
	this.name=name;	
	this.age=age;
这些将为对象的属性赋值。
有了这个prototype属性,js还会这这个原型对象里“继承一些属性”;
  1. var MyUtils={};//声明一个"名字空间" 
  2.  
  3. //声明构造函数 
  4. MyUtils.Student=function(name,age) 
  5.     this.name=name;  
  6.     this.age=age; 
  7.      
  8.     //可以实现私有方法 
  9.     function echo() 
  10.     { 
  11.         alert(this.name+"的年龄是:"+this.age); 
  12.     } 
  13.     this.Echo=echo;//公开一个接口对外使用 
  14. }; 
  15.  
  16. MyUtils.Student.prototype.Func=function(){alert("共有的.");}; 
  17.  
  18. var o1=new MyUtils.Student('张三',23); 
  19. var o2=new MyUtils.Student('李四',20); 
  20. alert(o1.Func==o2.Func); 
我们给这个Student的prototype属性设置属性Func,
然后实例化2个对象,我们发现神奇的事情出现了,我们并没有给Student类设置Func属性,但是实例对象却具有了,这就是原型的神奇之处。

  1. var MyUtils={};//声明一个"名字空间" 
  2.  
  3. //声明构造函数 
  4. //普通学生类 
  5. MyUtils.Student=function(name,age) 
  6.     this.name=name;  
  7.     this.age=age; 
  8.      
  9.     //可以实现私有方法 
  10.     function echo() 
  11.     { 
  12.         return this.name+"的年龄是:"+this.age; 
  13.     } 
  14.     this.Echo=echo;//公开一个接口对外使用 
  15. }; 
  16.  
  17. //大学生 
  18. MyUtils.CollegeStudent=function(name,age,major) 
  19.     MyUtils.Student.call(this,name,age);//有点像base(name,age)或super之类的 
  20.     this.major=major; 
  21. }; 
  22.  
  23. /*MyUtils.CollegeStudent.prototype=new MyUtils.Student(); 
  24. MyUtils.CollegeStudent.prototype.CEcho=function(){ 
  25.     return this.Echo()+","+"专业为"+this.major; 
  26. };*/ 
  27. var protoObj=new MyUtils.Student(); 
  28. protoObj.CEcho=function(){ 
  29.     return this.Echo()+","+"专业为"+this.major; 
  30. }; 
  31. MyUtils.CollegeStudent.prototype=protoObj
  32. var o1=new MyUtils.CollegeStudent('张三',23,"化工"); 
  33. var o2=new MyUtils.CollegeStudent('李四',20,"机械"); 
  34. alert(o2.CEcho()); 

 所以关键就是那个prototype,我们把这个模子构造好了。  注意:来几个实际中的例子 比如jquery.tinyscrollbar.js这个插件源码里的: 1.$.tiny = $.tiny || { }; 名字空间(其实就是一个装东西的口袋对象,一个object而已,跟你平时使用没什么差别。 这里作者写了好几个不错的插件tiny.*****,不妨去看看,所以他都放在了这个空间里 $.tiny||{}如果$.tiny==undefined则,$.tiny={}相当于。比如页面引入了坐着多个插件。  2. $.tiny.scrollbar = { ............................. 	}; $.tiny.空间里加个scrollbar属性,比如存储了选项配置$.tiny.scrollbar.options  3.关键jquery插件扩展: $.fn.tinyscrollbar = function(options) {....} $.fn就相当于$.prototype 我们给原型添加属性那么实例对象(jquery对象的啦)就都具有了tinyscrollbar方法, 比如$("#myscrollbar")这个是jQuery对象,你扩展了jquery之后,就有了$("#myscrollbar").tinyscrollbar();   有必要说一下闭包: 我把它理解为一个封闭的函数执行体。 比如 全局内var o=123; 人人可以访问, 但是 function t1() {   var o=123; } 
function t2() {   var o=“hello”; } 
function t3() {   var o=true; }
现在只有t内可以访问到,有点隔离保护的作用。不管怎样我想我不要误导你,但希望能给你一个形象的理解。对您的学习不要帮倒忙。 上图(离散数学里的闭包不知道跟这个有什么关系么?)

R1相当于全局空间,1,2,3代表3个闭包,这里代表t1,t2,t3的3个执行体。


 

...