JavaScript的面向對象編程（OOP）（一）——類

時間 2019-11-21

標籤 javascript 面向對象編程 oop 欄目 JavaScript 简体版

原文原文鏈接

　　在學習JavaScript面向對象的編程以前，須要知道，並瞭解面向對象的一些基本的常識。初學者中大多數都覺得面向對象中，面向對象的編程是很重要和佔據很大一部分精力。筆者在以前也是認爲OOP是面向對象的主要部分，那麼和我持有同樣想法的，下面先要糾正這一想法，真正瞭解面向對象。編程

1、初識面向對象

面向對象分爲三部分，包括面向對象分析（OOA）、面向對象設計（OOD）、面向對象的程序設計（OOP）。設計模式

1.1 OO編程（Object Oriented Analysis）

　　典型的OO編程過程，應先整理需求，根據需求進行OOA，將真實世界的客觀物件抽象成程序中的類或對象，這個時候使用的是UML語言，UML建模，OOA的輸出結果是一個個類或對象的模型圖。函數

接下的OOD，目的是處理類之間的耦合關係，設計類或對象的接口，此時會用到各類設計模式（23種設計模式），如觀察者模式，責任鏈模式等等（以後會寫一些JavaScript經常使用的設計模式）。 OOA和OOD是個反覆迭代的過程，它們自己沒有很清晰的邊界，可是相互影響、制約。 OOA和OOD結束以後才進入OOP階段，進入實際的編碼階段。 OOA和OOD是面向對象編程的思想和具體語言無關，而OOP是面向對象的編程工具，和選用的語言相關。工具

OOA和OOD由於具體要求與語言無關，因此能跨語言重用。而OOP做爲兩者的底層，不一樣的語言語法不一樣，因此OOP不一樣。學習

　　經過簡單的瞭解，咱們所要學習的OOP編程只是面向對象裏最簡單的代碼部分，下面我把我學習的面向對象的一些知識總結一下，理解不深，若有錯誤，還請訂正測試

2、JavaScript的面向對象編程——類

（1）類的定義

在JavaScript中咱們利用functions來定義一個類this

1 function Shape(){
2         var x = 1;
3         var y = 2
4     }

這是一個簡單的類，在類的內部只有var定義的私有變量，咱們經過new關鍵字能夠實例化一個對象 var aShape = new Shape(); ，這樣咱們就實例化出了一個對象實例，aShape。可是類中定義的是私有變量，咱們經過 aShape.x 和 aShape.y 訪問，發現程序彈出undefined。編碼

下面咱們從新定義一個類並測試spa

function Shape2(){
    this.x = 1;
    this.y = 2;
    }
var bShape = new Shape2();       //初始化一個實例對象
alert(bShape.x);
alert(bShape.y);                      //分別彈出1和2

咱們在類中用this.屬性名的方式定義公有變量，而且能訪問成功。var除了定義私有變量，還能定義私有函數（private函數）設計

function Shape3(){
           var draw = function(){
           //私有函數
        }
            this.draw2 = function(){
          //外界能夠看到的共有函數
        }
}

和訪問變量相似，先實例化 var c = new Shape3(); 而後再經過 c.draw2(); 訪問。

（2）簡單的OOP編程

JavaScript是一門解釋型的語言，它並非真正的面向對象的語言，不少面向對象的機制是須要靠模仿來實現的。

 1 //模仿OOP編程
 2 function Shape4(m,n){
 3         var x = 0;
 4         var y = 0;
 5 //建立一個內部的初始化函數，並執行
 6         var init = function(){
 7             x = m;
 8             y = n;
 9         }
10         init();
11 //寫一個get方法，取出咱們傳入的x值
12         this.getX = function(){
13             return x;
14         }
15     }

簡單的一個模仿OOP編程，咱們經過 var obj = new Shape4(2,4); 實例化一個obj,並傳入2，4兩個參數，在經過 obj.getX(); 獲得咱們傳入的x參數，獲得2。

下面咱們來模仿OOP編程的構造函數，須要注意的是JS中靜態方法是做用到類上，而不是對象上的。

 1 function Person(){
 2       this.Name = "yanyan"
 3 };
 4 Person.age = 0;//靜態變量
 5 //靜態方法
 6 Person.showName = function(obj){
 7           alert(obj.Name)
 8 }9 Person.showName(new Person());

（3）Map

JavaScript中不存在Map類型（鍵值對的集合）的數據，下面咱們簡單的模仿出Map類型

 1         function jMap(){
 2                 //私有變量
 3                 var arr = { };
 4                 //增長
 5                 this.put = function(key,value){
 6                     arr[key] = value;
 7                 }
 8                 //查詢
 9                 this.get = function(key){
10                     if(arr[key]){
11                         return arr[key]
12                     }else {
13                         return null;
14                     }
15                 }
16                 //刪除
17                 this.remove = function(key){
18                     delete  arr[key]
19                 }
20                 //遍歷
21                 this.eachMap = function(fn){
22                     for (var key in arr){
23                         fn(key,arr[key])
24                     }
25                 }
26             }
27             var country = new jMap();
28             country.put("01","value1");
29             country.put("02","value2");
30             country.put("03","value3");
31             country.put("04","value4");
32             alert(country.get("04"));//讀取key爲04的值
33             country.remove("04");//刪除剛纔讀到的值
34             alert(country.get("04"));//此時彈窗爲null
35 
36             //遍歷讀取
37             country.eachMap(function(key,value){
38               document.write(key+"-->"+value+"<br />");
39             })