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

WBOY
發布: 2022-02-21 17:13:53
原創
2503 人瀏覽過

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

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

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

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

在物件導向程式設計中,類別(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();   //喵喵喵
登入後複製

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

相關推薦:javascript學習教學

#

以上是javascript定義類別的三個方法是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!