戲說js之名字空間

最後更新：2013-12-28 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

先從簡單的js代碼開始:

 
  <!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> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <title>無標題文檔</title> 
  <script type="text/javascript"> 
  //請養成var的好習慣 
  var a=123; 
  alert(window.a); 
  var b="hello"; 
  alert(window.b); 
  window.c=true; alert(window.c);
  </script> 
  </head> 
   
  <body> 
  </body> 
  </html>

這個簡單的代碼我想大家都明白，這裡全域範圍內聲明的2個變數，等於為全域對象window附加2個屬性.關於為什麼強調要使用var，後面我們會看到理由。

這裡都是簡單的變數，我們可以稍微複雜些，來個函數對象和其他對象。

 
  //請養成var的好習慣 
  function func1() 
  { 
      alert("func1"); 
  } 
   
  window.func2=function(){alert("func2");}; 
   
  var func3=func1; 
   
  var func4=new Function("alert(\"func4\");");//晦澀難讀，不常見。 
  window.func1();

我們看到這幾個基本相同的代碼(關於function與Function方式的差別不在這裡討論),typeofwindow.func****)我們知道他們是function對象。

也屬於全域範圍。

 
  //請養成var的好習慣 
  var i=123; 
  var s="hello"; 
  var f=4.5555; 
  var b=false; 
  var udef;//=undefined 
  var nul=null; 
  var o={};

但你想過沒有，隨之指令碼量的增加全域變數增多，衝突的可能性就加大，隨時都有被覆蓋的風險。

好比是往根目錄拷貝檔案，同名的可能性在所難免的。我們想到的辦法是使用層級目錄的方式，軟體開發領域解決這種情況借用的名字空間的方式(Namespace或者包Package).

js沒有在語言層次給予名字空間支援，但是聰明的程式人員們還是想到瞭解決的辦法。

我們知道alert(typeof window);你看到的是個object既然全域window是個對象，能承載其他的變數，那麼好辦了，我們的一般對象也可以有這種能力:

window.AAA.a這樣不就可以實現層級管理名字了嗎。

 
  var MyUtils={};//聲明一個"名字空間" 
  MyUtils.a=123; 
  MyUtils.b=true; 
  alert(MyUtils.a); 
   
  var MyTools={ 
      Test:function() 
      { 
          alert("Test"); 
      }, 
       
      F:function(){ 
          alert("F function"); 
      } 
  }; 
  MyTools.F(); 
   
  MyTools.a="此a非比a."; 
 
當然我們還可以繼續嵌套，類似多層目錄，讀者可以自己實驗。現在OOP大行其道，我們看看js裡的“類”，用引號稱它是個類，因為js目前沒有給我們提供Class關鍵字之類的東西，只是在js實現上採用了個小技巧。我們來看下，有必要對Function來個簡介，因為他對js裡的類實現有的不可輕視的重要低位。看下這個就知道對象與Function的千絲萬縷的關係了：、

 
  var o=new Object; 
  alert(typeof o.constructor);

輸出function,也就是說js的對象有個contructor屬性指向當成執行個體化它的那個建構函式。再實驗下：

 
  var MyUtils={};//聲明一個"名字空間" 
   
  //聲明建構函式 
  MyUtils.Student=function(name,age) 
  { 
      this.name=name;  
      this.age=age; 
  }; 
   
  var o=new MyUtils.Student('張三',23); 
  alert(o.constructor);

我們驗證了這一點。

 
  var MyUtils={};//聲明一個"名字空間" 
   
  //聲明建構函式 
  MyUtils.Student=function(n,a) 
  { 
      this.name=n;     
      this.age=a; 
       
      //可以實現私人方法 
      function echo() 
      { 
          alert(this.name+"的年齡是:"+this.age); 
      } 
      this.Echo=echo;//公開一個介面對外使用 
  }; 
   
  var o=new MyUtils.Student('張三',23); 
  o.Echo();

執行個體化的問題解決了。當然了有個問題，對於執行個體方法來說，每個執行個體對象保持一個副本不太合理。還有如何?OOP裡的繼承思想呢？不得不提到prototype這個屬性，上面執行個體化過程var o1=new MyUtils.Student('張三',23);new時，會產生一個對象，構造方法裡的this指向這個對象，this.name=name;this.age=age;這些將為對象的屬性賦值。有了這個prototype屬性，js還會這這個原型對象裡“繼承一些屬性”;

 
  var MyUtils={};//聲明一個"名字空間" 
   
  //聲明建構函式 
  MyUtils.Student=function(name,age) 
  { 
      this.name=name;  
      this.age=age; 
       
      //可以實現私人方法 
      function echo() 
      { 
          alert(this.name+"的年齡是:"+this.age); 
      } 
      this.Echo=echo;//公開一個介面對外使用 
  }; 
   
  MyUtils.Student.prototype.Func=function(){alert("共有的.");}; 
   
  var o1=new MyUtils.Student('張三',23); 
  var o2=new MyUtils.Student('李四',20); 
  alert(o1.Func==o2.Func);

我們給這個Student的prototype屬性設定屬性Func,然後執行個體化2個對象，我們發現神奇的事情出現了，我們並沒有給Student類設定Func屬性，但是執行個體對象卻具有了，這就是原型的神奇之處。

 
  var MyUtils={};//聲明一個"名字空間" 
   
  //聲明建構函式 
  //普通學生類 
  MyUtils.Student=function(name,age) 
  { 
      this.name=name;  
      this.age=age; 
       
      //可以實現私人方法 
      function echo() 
      { 
          return this.name+"的年齡是:"+this.age; 
      } 
      this.Echo=echo;//公開一個介面對外使用 
  }; 
   
  //大學生 
  MyUtils.CollegeStudent=function(name,age,major) 
  { 
      MyUtils.Student.call(this,name,age);//有點像base(name,age)或super之類的 
      this.major=major; 
  }; 
   
  /*MyUtils.CollegeStudent.prototype=new MyUtils.Student(); 
  MyUtils.CollegeStudent.prototype.CEcho=function(){ 
      return this.Echo()+","+"專業為"+this.major; 
  };*/ 
  var protoObj=new MyUtils.Student(); 
  protoObj.CEcho=function(){ 
      return this.Echo()+","+"專業為"+this.major; 
  }; 
  MyUtils.CollegeStudent.prototype=protoObj; 
  var o1=new MyUtils.CollegeStudent('張三',23,"化工"); 
  var o2=new MyUtils.CollegeStudent('李四',20,"機械"); 
  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內可以訪問到，有點隔離保護的作用。不管怎樣我想我不要誤導你，但希望能給你一個形象的理解。對您的學習不要幫倒忙。 離散數學裡的閉包不知道跟這個有什麼關係嗎？）

650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/131228/1346094392-0.jpg" border="0" alt="" />

R1相當於全域空間,1,2,3代表3個閉包，這裡代表t1,t2,t3的3個執行體。

...

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More