JavaScript 類比類機制及私人變數的方法及思路

來源:互聯網
上載者:User

在使用一些 Javascript 架構時,或許會看到類似的代碼
複製代碼 代碼如下:
  var MyClass = new Class({
    initialize: function(param, ...) {
      this.param = param;
      ...
    },
    func1: function(...) {
      ...
    }
  });
  var myObj = new MyClass(param);
  myObj.func1(...);

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

其實還是蠻簡單的,也不難理解。不過如果要構建一套大型的 Javascript 類庫,可能就會比較混亂,從一堆代碼中,要找出哪些是類,哪些是函數,哪些是類方法,哪些是類屬性,是一件痛苦的事。
當然,這裡並不是要比較它們的優劣,只是好奇 new Class 的實現方式而已。
在上面的代碼中,使用 new MyClass() 這樣的語句,意味著 MyClass 必須是一個函數,同時也就意味著 new Class 需要返回一個函數對象,從字面的意思上可以看出,函數 initialize 是當做建構函式來使用的,所以,new Class 返回的函數中,必須使用 initialize 來對對象進行初始化。基於這樣的分析,可以得出以下代碼:
複製代碼 代碼如下:
  function Class(argu) {
    return function() {
      var init = argu['initialize'] || function() {};  //如果沒有建構函式 initialize,使用一個空函數作為預設建構函式
      for(var p in argu) {
        this[p] = argu[p];
      }
      init.apply(this, arguments); //使用當前函數的 this 來代替函數 initialize 原有的 this
    }
  }

上面的代碼並不夠嚴謹,但用來說明問題已經足夠了。需要注意 init.apply(this, arguments) 這一句,這裡有幾個變數的指代,一個是 this,原本 initialize 中預設的 this,現在已被替代為返回的這個匿名函數的 this,而這個匿名函數,是通過 new Class 建立的自訂類的構造器。另外一個是 arguments,它指代的是匿名函數的參數,也就是上面的 new MyClass(param) 中的 param。
this 的轉換有些讓人頭暈,那麼有沒有更為簡單的方法呢?請看下面的代碼:
複製代碼 代碼如下:
  function Class(argu) {
    var obj = argu['initialize'] || function() {};
    for(var p in argu) {
      obj.prototype[p] = argu[p]; //注意,這裡用的是 prototype
    }
    return obj; // 其實還是返回一個函數
  }

呵呵,感覺直白了許多。
這就完成了一個簡單的類機制的構建。通過這種機制,可以建立類的建構函式、方法及屬性,但這些顯然都是公有的,那麼,如何?私人變數及方法呢?
我們知道,Javascript 類的私人變數可以通過閉包的機制來完成。但使用 new Class({...}) 的方式轉換後,顯然很難形成有效閉包。如何繞過這個問題呢?
Javascript 提供了兩個方法:eval() 及函數對象的 toString() 方法,前者較為常見,而後者,可用於擷取函數的具體代碼。通過這兩個方法,可以簡單的類比類的私人變數:
複製代碼 代碼如下:
  function Class(argu) {
    var _ = argu['private'] || {};
    eval('var obj = ' + (argu['initialize'] || function() {}).toString());
    for(var p in argu) {
      if(p == 'initialize' || p == 'private')
        continue;
      if(typeof argu[p] == 'function')
        eval('obj.prototype[p] = ' + argu[p].toString());
      else
        obj.prototype[p] = argu[p];
    }
    return obj;
  }

通過函數對象的 toString() 方法提取出函數的代碼,並使用 eval 方法執行這些代碼,這樣就可以構造出一個有效閉包範圍,從而實現私人機制。我們可以如下應用:
複製代碼 代碼如下:
  var Person = new Class({
    private: {
      height: 160,
      weight: 50
    },
    initialize: function(name, height, weight) {
      this.name = name;
      _.height = height || _.height;
      _.weight = weight || _.weight;
    },
    show: function() {
      alert('Name:' + this.name + '/nheight:' + _.height + '/nweight:' + _.weight);
    }
  });
  var my = new Person("Zh");
  my.show();

看起來不不錯,不過在實際應用中,其實並沒有太大的用途。主要是效率上,相比通常的實現方式,大概需要多花四倍的時間。在大型類庫的構建上,這是不可容忍的,而小型的應用中,實現下面的代碼更為簡單直接:
複製代碼 代碼如下:
  function MyClass(param) {
    var privateVar = ...;
    this.param = param;
    this.func = function() {
      alert(privateVar);
    };
  }

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: 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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.