JS的面向對象

一、對象

1. 對象的概念：

   對象是事物存在的實體，通俗地說，每個對象都是某個類的一個執行個體，比如：人類，而每個人就是一個對象。

2. 對象的組成：

   方法——函數：過程、動态的

   屬性——變量：狀态、靜态的

二、面向對象

1. 面對對象的概念：

   使用對象時，隻關注對象提供的功能，不關注其内部細節,比如：JQuery,我們使用JQuery時直接調用它的函數即可，而不需要對裡面的代碼進行更多的操作；

2. 面向對象的特性：

   • 抽象：（抽取核心的資訊來使用）

     抽象是通過特定的執行個體抽取共同特征以後形成概念的過程。它強調主要特征，忽略次要特征。一個對象是現實世界中一個實體的抽象，一個類足一組對象的抽象，抽象是一種單一化的描述，它強調給出與應用相關的特性，抛棄不相關的特性。

   • 繼承：（可以使用父類的功能，同時擁有自己的功能）

     可以讓某個類型的對象獲得另一個類型的對象的屬性的方法。它支援按級分類的概念。繼承是指這樣一種能力：它可以使用現有類的所有功能，并在無需重新編寫原來的類的情況下對這些功能進行擴充。 通過繼承建立的新類稱為“子類”或“派生類”，被繼承的類稱為“基類”、“父類”或“超類”。繼承的過程，就是從一般到特殊的過程。要實作繼承，可以通過“繼承”（Inheritance）和“組合”（Composition）來實作。繼承概念的實作方式有二類：實作繼承與接口繼承。實作繼承是指直接使用基類的屬性和方法而無需額外編碼的能力；接口繼承是指僅使用屬性和方法的名稱、但是子類必須提供實作的能力。

   • 封裝：（不考慮内部實作，隻考慮功能使用）

     所謂封裝，也就是把客觀事物封裝成抽象的類，并且類可以把自己的資料和方法隻讓可信的類或者對象操作，對不可信的進行資訊隐藏。封裝是面向對象的特征之一，是對象和類概念的主要特性。 簡單的說，一個類就是一個封裝了資料以及操作這些資料的代碼的邏輯實體。在一個對象内部，某些代碼或某些資料可以是私有的，不能被外界通路。通過這種方式，對象對内部資料提供了不同級别的保護，以防止程式中無關的部分意外的改變或錯誤的使用了對象的私有部分。

三、面向過程

1. 面向過程概念：

   自頂向下順序執行，逐漸求精；其程式結構是按功能劃分為若幹個基本子產品，這些子產品形成一個樹狀結構；各子產品之間的關系盡可能簡單，在功能上相對獨立；每一子產品内部均是由順序、選擇和循環三種基本結構組成；其子產品化實作的具體方法是使用子程式。

四、JS是否是面向對象的語言？

1、它擁有對象，可以包含資料和處理資料的方法。對象可以包含其它對象。他沒有類（在javascript2.0真正實作之前），但它卻有構造器可以做類能做的事，包括扮演變量和方法的容器和角色。他沒有基于類的繼承，但它有基于原型的繼承。兩個建立對象系統的方法是通過繼承和通過聚合。javaScript兩個都有。

2、 一些評價說javascript不是真正面向對象的因為它不能提供資訊的隐藏。也就是，對象不能有私有變量和私有方法：所有的成員都是公共的。但随後有人證明了javaScript對象可以擁有私有變量和私有方法。另外還有批評說javascript不能提供繼承，但随後有人證明了javascript不僅能支援傳統的繼承還能應用其他的代碼複用模式。

3、說javascript是一種基于對象的語言，是一種正确而略顯保守的判斷，其實可以說javascript是基于原型的面向對象。

五、執行個體（頁籤）

//      封裝構造函數的方法：
//      構造函數的三個步驟：、原料（new Date()）;、加工（主要代碼塊）;、出廠（return）;
//      、函數之間不能互相嵌套，要把函數抽離出來；
//      、調用構造函數時要加一個new關鍵字，如：new TabWitch('box');使用new之後，系統預設幫我們構造空對象  var this=new Object();還有傳回這個對象   如return this;就是三個步驟中的原料和出廠步驟；
//      、在每個對象和方法前加上this，這裡需要注意的是this指向的對象，可以利用var _this=this;更換指向的對象；
//      、把函數改寫成原型，改寫成原型後，就證明内部調用同一段代碼。（prototype）
        function TabWitch(id) {
            var _this=this;
            var oBox = document.getElementById(id);
            this.aInput = oBox.getElementsByTagName('input');
            this.aDiv = oBox.getElementsByTagName('div');
            for (var i = ; i < this.aInput.length; i++) {
                this.aInput[i].index = i;
                this.aInput[i].onclick = function(){
                    _this.fnclick(this);
                }
            }
        }

        TabWitch.prototype.fnclick=function(oBtn) {
            for (var i = ; i < this.aInput.length; i++) {
                this.aInput[i].className = '';
                this.aDiv[i].style.display = 'none';
            }
            oBtn.className = 'active';
            this.aDiv[oBtn.index].style.display = 'block';
        }
        new TabWitch('box');