首頁 > 文章 > web前端 > javascript定義類別的三個方法是什麼

javascript定義類別的三個方法是什麼

JavaScript定義類別的三個方法：1、利用建構子定義類，語法為「function name(){this.name=value;}」；2、利用「Object.create()」方法定義類別；3、利用「createNew()」方法定義類別。

本教學操作環境：windows10系統、javascript1.8.5版、Dell G3電腦。

在物件導向程式設計中，類別(class)是物件(object)的模板，定義了同一組物件(又稱為"實例" ）共有的屬性和方法。

JavaScript語言不支援"類別"，但可以用一些變通的方法，模擬出"類別"。

一、建構子法

這是經典方法，也是教科書必教方法。它用建構子模擬"類別"，在其內部用this關鍵字指涉實例物件。

function Cat(){
  this.name = "大毛";
}

產生實例的時候，使用new關鍵字。

var cat1 = new Cat();
alert(cat1.name);   //大毛

類別的屬性和方法，也可以定義在建構子的prototype物件之上。

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

關於這種方法的詳細介紹，請看系列文章《JavaScript物件導向程式設計》，這裡就不多說了。它的主要缺點是，必教複雜，用到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，程式碼部署起來非常簡單，這大概也是它被叫做"極簡主義法"的原因。

首先，它也是用一個物件模擬"類別"。在這個類別裡面，定義一個建構子caeateNew(),用來產生實例。

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

然後，在carateNew()裡面，定義一個實例對象，把這個實例物件當作傳回值。

var Cat = {
  createNew: function(){
    var cat = {};
    cat.name = "大毛";
    car.makeSound = function(){
      alert("喵喵喵")；
    }；
  }
}；

使用的時候，呼叫createNew()方法，就可以得到實例物件。

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

這種方法的好處是，容易理解，結構清晰優雅，符合傳統的"物件導向程式設計"的構造，因此可以方便地部署下面的特性。

相關文章