先从简单的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. { 
  4.     alert("func1"); 
  5. } 
  6.  
  7. window.func2=function(){alert("func2");}; 
  8.  
  9. var func3=func1; 
  10.  
  11. var func4=new Function("alert(\"func4\");");//晦涩难读，不常见。 
  12. 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. { 
  6.     this.name=name;  
  7.     this.age=age; 
  8. }; 
  9.  
  10. var o=new MyUtils.Student('张三',23); 
  11. alert(o.constructor); 
我们验证了这一点。

  1. var MyUtils={};//声明一个"名字空间" 
  2.  
  3. //声明构造函数 
  4. MyUtils.Student=function(n,a) 
  5. { 
  6.     this.name=n;     
  7.     this.age=a; 
  8.      
  9.     //可以实现私有方法 
  10.     function echo() 
  11.     { 
  12.         alert(this.name+"的年龄是:"+this.age); 
  13.     } 
  14.     this.Echo=echo;//公开一个接口对外使用 
  15. }; 
  16.  
  17. var o=new MyUtils.Student('张三',23); 
  18. 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. { 
  6.     this.name=name;  
  7.     this.age=age; 
  8.      
  9.     //可以实现私有方法 
  10.     function echo() 
  11.     { 
  12.         alert(this.name+"的年龄是:"+this.age); 
  13.     } 
  14.     this.Echo=echo;//公开一个接口对外使用 
  15. }; 
  16.  
  17. MyUtils.Student.prototype.Func=function(){alert("共有的.");}; 
  18.  
  19. var o1=new MyUtils.Student('张三',23); 
  20. var o2=new MyUtils.Student('李四',20); 
  21. alert(o1.Func==o2.Func); 
我们给这个Student的prototype属性设置属性Func,
然后实例化2个对象，我们发现神奇的事情出现了，我们并没有给Student类设置Func属性，但是实例对象却具有了，这就是原型的神奇之处。


  1. var MyUtils={};//声明一个"名字空间" 
  2.  
  3. //声明构造函数 
  4. //普通学生类 
  5. MyUtils.Student=function(name,age) 
  6. { 
  7.     this.name=name;  
  8.     this.age=age; 
  9.      
  10.     //可以实现私有方法 
  11.     function echo() 
  12.     { 
  13.         return this.name+"的年龄是:"+this.age; 
  14.     } 
  15.     this.Echo=echo;//公开一个接口对外使用 
  16. }; 
  17.  
  18. //大学生 
  19. MyUtils.CollegeStudent=function(name,age,major) 
  20. { 
  21.     MyUtils.Student.call(this,name,age);//有点像base(name,age)或super之类的 
  22.     this.major=major; 
  23. }; 
  24.  
  25. /*MyUtils.CollegeStudent.prototype=new MyUtils.Student(); 
  26. MyUtils.CollegeStudent.prototype.CEcho=function(){ 
  27.     return this.Echo()+","+"专业为"+this.major; 
  28. };*/ 
  29. var protoObj=new MyUtils.Student(); 
  30. protoObj.CEcho=function(){ 
  31.     return this.Echo()+","+"专业为"+this.major; 
  32. }; 
  33. MyUtils.CollegeStudent.prototype=protoObj; 
  34. var o1=new MyUtils.CollegeStudent('张三',23,"化工"); 
  35. var o2=new MyUtils.CollegeStudent('李四',20,"机械"); 
  36. 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内可以访问到，有点隔离保护的作用。不管怎样我想我不要误导你，但希望能给你一个形象的理解。对您的学习不要帮倒忙。 上图（离散数学里的闭包不知道跟这个有什么关系么？）

戏说js之名字空间_职场

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


 

...