首頁 > web前端 > js教程 > 主體

JavaScript 模擬類別機制及私有變數的方法及思路_javascript技巧

WBOY
發布: 2016-05-16 17:29:22
原創
1128 人瀏覽過

使用一些Javascript 框架時,或許會看到類似的程式碼

複製程式碼 程式碼如下:

  var MyClass = new Class({
    initialize: function(param, ...) {
      this.param = param.param =>;   },
    func1: function( ...) {
      ...
    }
  });
  var myObj = newClass(param);
  var myObj = newClass(param); 🎜 >
這是一種典型的物件導向的類別機制應用,與原生的Javascript 類別機制相比,顯得更為清晰且自然。並且,在此基礎上,實作類別的繼承也較為方便。那麼,這是如何實現的呢?
眾所周知,在Javascript 中,將一個函數作為構造器,可以創建出一個對象,上面的程式碼可以簡單的寫成:



複製程式碼
程式碼如下:  function MyClass(param) {    this.param = param;    this.param = param;    };
  }
  var myObj = new MyClass(param);
  myObj.func1();
蠻難的理解。不過如果要建立一套大型的Javascript 類別庫,可能就會比較混亂,從一堆程式碼中,要找出哪些是類,哪些是函數,哪些是類別方法,哪些是類別屬性,是一件痛苦的事。
當然,這裡並不是要比較它們的優劣,只是好奇 new Class 的實作方式而已。
在上面的程式碼中,使用new MyClass() 這樣的語句,意味著MyClass 必須是一個函數,同時也意味著new Class 需要傳回一個函數對象,從字面的意思可以看出,函數initialize是當做建構函式來使用的,所以,new Class 傳回的函式中,必須使用initialize 來對物件進行初始化。基於這樣的分析,可以得到以下程式碼:



複製程式碼


程式碼如下:
上面的程式碼並不夠嚴謹,但用來說明問題已經足夠了。要注意init.apply(this, arguments) 這一句,這裡有幾個變數的指代,一個是this,原本initialize 中預設的this,現在已被替換為一個傳回的這個匿名函數的this,而這個匿名函數,是透過new Class 新建的自訂類別的建構器。另外一個是 arguments,它指涉的是匿名函數的參數,也就是上面的 new MyClass(param) 中的 param。
this 的轉換有些讓人頭暈,那麼有沒有更簡單的方法呢?請看下面的程式碼:




複製程式碼


程式碼如下:

    argu)
    var obj = argu['initialize'] || function() {};
    for(var p in argu) {
    for(var p in argu) {    ぀]這裡用的是prototype    }    return obj; //還是回傳一個函數  }  }

,感覺直白了。
這就完成了一個簡單的類別機制的建構。透過這種機制,可以創建類別的建構函數、方法及屬性,但這些顯然都是公有的,那麼,如何實現私有變數及方法呢?
我們知道,Javascript 類別的私有變數可以透過閉包的機制來完成。但使用 new Class({...}) 的方式轉換後,顯然很難形成有效的閉包。如何繞過這個問題?
Javascript 提供了兩種方法:eval() 及函數物件的 toString() 方法,前者較為常見,而後者,可用於取得函數的具體程式碼。透過這兩個方法,可以簡單的模擬類別的私有變數:



複製程式碼


程式碼如下:

  function Class(argu) {
    var _ = argu['private'] || {};
[ ) {}).toString());
    for(var p in argu) {
      if(p == 'initialize' || p == 'private')      if (typeof argu[p] == 'function')
        eval('obj.prototype[p] = ' argu[p].to());    }
    return obj;
  }


透過函數方法的程式碼使用這些方法的程式碼這樣就可以建構出一個有效的閉包範圍,進而實現私有機制。我們可以如下套用:



複製程式碼
程式碼如下:  vara(     private: {
      height: 160,
      weight:
      initialize: function(name, height, weight) {
      this.name = name;
_.height = height || _.height;
      _.weight = weight || _.weight;
    },    }
  });
  var my = new Person("Zh");
  var my = new Person("Zh");
  var my = new Person("Zh"); );


看起來不不錯,不過在實際應用中,其實並沒有太大的用途。主要是效率上,比起通常的實現方式,大概要多花四倍的時間。在大型類別庫的建置上,這是不可容忍的,而小型的應用中,實作下面的程式碼更為簡單直接:



複製程式碼

  }


  }



相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板