Javascript定義類(class)的三種方法


Javascript定義類(class)的三種方法

  Javascript本身並不支持面向對象,它沒有訪問控制符,它沒有定義類的關鍵字class,它沒有支持繼承的extend或冒號,它也沒有用來支持虛函數的virtual,不過,Javascript是一門靈活的語言,下面我們就看看沒有關鍵字class的Javascript如何實現類定義,並創建對象。

  在面向對象編程中,類(class)是對象(object)的模板,定義了同一組對象(又稱"實例")共有的屬性和方法。
  Javascript語言不支持"類",但是可以用一些變通的方法,模擬出"類"。  

 一、構造函數法  

  這是經典方法,也是教科書必教的方法。它用構造函數模擬"類",在其內部用this關鍵字指代實例對象。

  function Cat() {
    this.name = "小花";
  }

  生成實例的時候,使用new關鍵字。

  var cat1 = new Cat();
  alert(cat1.name); // 小花

  類的屬性和方法,還可以定義在構造函數的prototype對象之上。

  Cat.prototype.makeSound = function(){
    alert("喵喵喵");
  }

  采用“構造函數法”的主要缺點是,比較復雜,用到了this和prototype,編寫和閱讀都很費力。

  

 二、Object.create()法  

  為了解決"構造函數法"的缺點,更方便地生成對象,Javascript的國際標准ECMAScript第五版(目前通行的是第三版),提出了一個新的方法Object.create()。
  用這個方法,"類"就是一個對象,不是函數。

  var Cat = {
    name: "小花",
    makeSound: function(){ alert("喵喵喵"); }
  };

  然后,直接用Object.create()生成實例,不需要用到new。

  var cat1 = Object.create(Cat);
  alert(cat1.name); // 小花
  cat1.makeSound(); // 喵喵喵

  目前,各大瀏覽器的最新版本(包括IE9)都部署了這個方法。如果遇到老式瀏覽器,可以用下面的代碼自行部署。

  if (!Object.create) {
    Object.create = function (o) {
       function F() {}
      F.prototype = o;
      return new F();
    };
  }

  這種方法比"構造函數法"簡單,但是不能實現私有屬性和私有方法,實例對象之間也不能共享數據,對"類"的模擬不夠全面。  

 三、極簡主義法  

  荷蘭程序員Gabor de Mooij提出了一種比Object.create()更好的新方法,他稱這種方法為"極簡主義法"(minimalist approach)。這也是我推薦的方法。 

   3.1 封裝  

  這種方法不使用this和prototype,代碼部署起來非常簡單,這大概也是它被叫做"極簡主義法"的原因。
  首先,它也是用一個對象模擬"類"。在這個類里面,定義一個構造函數createNew(),用來生成實例。

  var Cat = {
    createNew: function(){
      // some code here
    }
  };

  然后,在createNew()里面,定義一個實例對象,把這個實例對象作為返回值。

  var Cat = {
    createNew: function(){
      var cat = {};
      cat.name = "小花";
      cat.makeSound = function(){ alert("喵喵喵"); };
      return cat;
    }
  };

  使用的時候,調用createNew()方法,就可以得到實例對象。

  var cat1 = Cat.createNew();
  cat1.makeSound(); // 喵喵喵

  這種方法的好處是,容易理解,結構清晰優雅,符合傳統的"面向對象編程"的構造,因此可以方便地部署下面的特性。

  3.2 繼承

  讓一個類繼承另一個類,實現起來很方便。只要在前者的createNew()方法中,調用后者的createNew()方法即可。先定義一個Animal類。  

  var Animal = {
    createNew: function(){
      var animal = {};
      animal.sleep = function(){ alert("睡懶覺"); };
      return animal;
    }
  };

  然后,在Cat的createNew()方法中,調用Animal的createNew()方法。

  var Cat = {
    createNew: function(){
      var cat = Animal.createNew();
      cat.name = "小花";
      cat.makeSound = function(){ alert("喵喵喵"); };
      return cat;
    }
  };

  這樣得到的Cat實例,就會同時繼承Cat類和Animal類。

  var cat1 = Cat.createNew();
  cat1.sleep(); // 睡懶覺

  3.3 私有屬性和私有方法

  在createNew()方法中,只要不是定義在cat對象上的方法和屬性,都是私有的。

  var Cat = {
    createNew: function(){
      var cat = {};
      var sound = "喵喵喵";
      cat.makeSound = function(){ alert(sound); };
      return cat;
    }
  };

  上例的內部變量sound,外部無法讀取,只有通過cat的公有方法makeSound()來讀取。

  var cat1 = Cat.createNew();
  alert(cat1.sound); // undefined

  3.4 數據共享

  有時候,我們需要所有實例對象,能夠讀寫同一項內部數據。這個時候,只要把這個內部數據,封裝在類對象的里面、createNew()方法的外面即可。

  var Cat = {
    sound : "喵喵喵",
    createNew: function(){
      var cat = {};
      cat.makeSound = function(){ alert(Cat.sound); };
      cat.changeSound = function(x){ Cat.sound = x; };
      return cat;
    }
  };

  然后,生成兩個實例對象:

  var cat1 = Cat.createNew();
  var cat2 = Cat.createNew();
  cat1.makeSound(); // 喵喵喵

  這時,如果有一個實例對象,修改了共享的數據,另一個實例對象也會受到影響。

  cat2.changeSound("啦啦啦");
  cat1.makeSound(); // 啦啦啦

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM