面向物件程式設計在現在的服務端應該是一種應用很廣泛的程式設計思想，通過例項化物件呼叫屬性或者方法，減少了程式碼的冗餘量，結構也比較清晰。現在談一談我對前端js的面向物件程式設計的一些理解。

我們現在的做web應用，前端的業務處理幾乎全是在js的基礎上完成的，可能一個專案會包含很多開發人員編寫的js檔案包含進去，因為我們就要注意函式名的唯一性和全域性變數的使用，防止自己寫的函式或宣告的變數會和其他同事編寫的js檔案發生衝突，產生意想不到的bug。解決方法有很多，比如寫匿名函式，封裝成外掛等等。我這裡想介紹的js面向物件程式設計，這雖然是js語言的一種程式設計模式，但是面向物件在一定程度上解決了不同js檔案內函式和變數之間的衝突。

首先，介紹幾個基本概念：

基本概念

ECMA關於物件的定義是：”無序屬性的集合，其屬性可以包含基本值、物件或者函式。“物件的每個屬性或方法都有一個名字，而每個名字都對映到

一個值。

類

在現實生活中，相似的物件之間往往都有一些共同的組成特徵。類，實際上是物件的設計藍圖或者製作配方。我們能基於相同的類創建出許多不同的

物件，這些物件又會含有各自的屬性和方法。

封裝

封裝主要用於闡述物件中所包含（或封裝的內容），它通常由兩部分組成：

1. 相關的資料（用於儲存屬性）

2. 基於這些資料所能做的事（所能呼叫的方法）

實踐1：物件定義及賦予物件屬性 假設我們現在想要封裝一個js的類，功能是可以把我通過類名選中的元素為它快取一個數據，方便我以後呼叫，這個類名就叫cacheDom吧，從最基本的開始做。 第一步.物件的定義：

    var cacheDom = function(clsname){};
 

物件建立好之後，根據功能，在使用這個類時需要傳入一個我們需要快取資料的dom元素的類名，那麼function裡面的形參就需要一個類名的引數；

    var cacheDom = function(clsname){};

基礎的物件宣告好之後，接下來要定義一些類內部的變量了，首選，我們需要取得類名，然後通過類名篩選得到jquery或者dom物件，接著為得到的物件快取資料； 第二步.定義屬性值： 根據功能，屬性值的定義主要說明了類中通用的一些資料，就本案例來說，cacheDom類中需要的屬性有：1.選中的jquery或dom物件，這是根據類名獲取到的；功能簡單所以只有這一個屬性，就寫作obj

var cacheDom = function(clsname){
    this.obj = $( '.'+claname );//這樣就是通過給定的類名取得jquery物件，dom物件的獲取差別也不大，這裡就用jquery語法繼續了
};
 

第三步.定義類中的方法： 這個類的方法就是快取資料了，這裡將一個知識點，js中的function也是一種屬性，在本例項中我們的方法是定義在cacheDom這個物件的屬性中，給快取方法起個名字，就叫做tocache

var cacheDom = function(clsname){
    this.obj = $( '.'+claname );//這樣就是通過給定的類名取得jquery物件，dom物件的獲取差別也不大，這裡就用jquery語法繼續了
};
cacheDom.prototype{//在這裡定義方法，可以很好的避免衝突
    tocache:function(obj){//tochche方法的定義，函式體內具體實現
    }
};

第四步.方法的實現： 執行順序，1.取得類名；2.通過類名取到物件；3.將物件傳入函式中快取資料，繼續將快取方法補充完整

var cacheDom = function(clsname){
    this.obj = $( '.'+claname );//這樣就是通過給定的類名取得jquery物件，dom物件的獲取差別也不大，這裡就用jquery語法繼續了
    this.tocache(this.obj);//在這裡面的其實相當於一個建構函式，在初始化物件是就會先執行這裡的語句，我們這裡就是在初始化物件傳入類名後執行快取方法
};
cacheDom.prototype{//在這裡定義方法，可以很好的避免衝突
    tocache:function(obj){//tochche方法的定義，函式體內具體實現
         $.data(obj.get(0),'data','123456');//$.data()是jquery為dom物件快取資料的函式，其中第一個引數是dom物件，因為之前傳遞的是jquery物件，故轉換為don物件
    }
};

第五步.類的例項化：

var cacheobj=new cacheDom('classname');//在外部為cacheDom類例項化一個cacheobj物件，同時傳入類名，之後cacheDom類就會自動給指定物件快取資料