1. 程式人生 > >javascript中靜態方法、例項方法、內部方法和原型的一點見解

javascript中靜態方法、例項方法、內部方法和原型的一點見解

1、靜態方法的定義

Js程式碼  收藏程式碼
  1. var BaseClass = function() {}; // var BaseClass=new Function();
  2. BaseClass.f1 = function(){//定義靜態方法
  3.      alert(' This is a static method ');  
  4. }  
  5. BaseClass.f1();//This is a static method
  6. var instance1 = new BaseClass();  
  7. instance1.f1();//instance1.f1 is not a function

    由以上程式碼分析可知,靜態方法不能被例項物件呼叫,再看以下程式碼

Js程式碼  收藏程式碼
  1. var BaseClass = new Function;  
  2. var Class2 = BaseClass;  
  3. BaseClass.f1 = function(){  
  4. alert("BaseClass ' s static method");  
  5. }  
  6. Class2.f2 = function(){  
  7. alert("Class2 ' s static method");  
  8. }  
  9. BaseClass.f1();//BaseClass ' s static method
  10. BaseClass.f2();//Class2 ' s static method
  11. Class2.f1();//BaseClass ' s static method
  12. Class2.f2();//Class2 ' s static method

    從執行結果來看,BaseClass和Class都有f1和f2靜態方法,實際上這兩個函式是一樣的,可以執行以下程式碼來驗證

Js程式碼  收藏程式碼
  1. alert(BaseClass == Class2);//true

    如果刪除其中一個函式中的靜態方法,則對應的另一個函式的靜態方法也被刪除,比如執行

Js程式碼  收藏程式碼
  1. delete Class2.f2;  

    同時也會刪除BaseClass中的f2

2、例項方法的定義
    這裡是利用javascript物件原型引用prototype來實現的,看以下程式碼

Js程式碼  收藏程式碼
  1. var BaseClass = function() {};  
  2. BaseClass.prototype.method1 = function(){  
  3.       alert(' This is a instance method ');  
  4. }  
  5. var instance1 = new BaseClass();  
  6. instance1.method1();//This is a instance method

    method1即為通過prototype原型引用定義的例項方法,這裡也可以在例項上直接定義方法(變數),看以下程式碼

Js程式碼  收藏程式碼
  1. var BaseClass = function() {};  
  2. var instance1 = new BaseClass();  
  3. instance1.method1 = function(){  
  4.     alert(' This is a instance method too ');  
  5. }   
  6. instance1.method1();//This is a instance method too

   下面介紹通過this指標來定義例項方法(變數),看以下程式碼

Js程式碼  收藏程式碼
  1. var BaseClass = function() {  
  2.  this.method1 = function(){  
  3.    alert(' Defined by the "this" instance method');  
  4.  }  
  5. };  
  6. var instance1 = new BaseClass();  
  7. instance1.method1();//Defined by the "this" instance method

    那麼同時在例項上、原型引用上和“this”上定義了相同名字的例項方法後,例項會優先呼叫那一個呢?請看以下程式碼

Js程式碼  收藏程式碼
  1. var BaseClass = function() {  
  2. this.method1 = function(){  
  3.        alert(' Defined by the "this" in the instance method');  
  4.  }  
  5. };  
  6. var instance1 = new BaseClass();  
  7. instance1.method1 = function(){  
  8.     alert(' Defined directly in the instance method');  
  9. }  
  10. BaseClass.prototype.method1 = function(){  
  11.     alert(' Defined by the prototype instance method ');  
  12. }  
  13. instance1.method1();//Defined directly in the instance method

    通過執行結果跟蹤測試可以看出直接定義在例項上的變數的優先順序要高於定義在“this”上的,而定義在“this”上的又高於 prototype定義的變數。即直接定義在例項上的變數會覆蓋定義在“this”上和prototype定義的變數,定義在“this”上的會覆蓋prototype定義的變數。


3、內部方法
   先看以下定義

Js程式碼  收藏程式碼
  1. var BaseClass = function() {  
  2.     var method1 = function() {  
  3.         alert("Internal method");  
  4.     };  
  5.     var method2 = function() {  
  6.         alert("call Internal method");  
  7.         method1();  
  8.     };  
  9.     this.method3 = function(){  
  10.         method2();  
  11.     }  
  12. };  
  13. var instance1 = new BaseClass();  
  14. instance1.method1();// 會報錯,因為method1是BaseClass中定義的內部變數,作用域只有在內部可見(閉包)
  15. instance1.method3();//會先後呼叫method2和method1