一、面向物件的概念

1.1 什麼是面向過程

​ 就是分析出解決問題所需要的步驟，然後用函式把這些步驟一步一步實現，使用的時候一個一個依次呼叫就可以了。

​ 生活中的的例子舉例。

1.2 什麼是面向物件

​ 面向物件是把構成問題事務分解成各個物件，建立物件的目的不是為了完成一個步驟，而是為了描敘某個事物在整個解決問題的步驟中的行為。

1. 面向物件是一種思維方法
2. 面向物件是一種程式設計方法
3. 面向物件並不只針對某一種程式語言

1.3 面向物件和麵向過程的區別和聯絡

1. 面向過程過程側重整個問題的解決步驟，著眼區域性或者具體
2. 面向物件側重具體的功能，讓某個物件具有這樣的功能。更加側重於整體。

各自的優缺點

面向過程的優點：
    流程化使得程式設計任務明確，在開發之前基本考慮了實現方式和最終結果；
    效率高,面向過程強調程式碼的短小精悍，善於結合資料結構來開發高效率的程式。。
     流程明確，具體步驟清楚，便於節點分析。

  缺點是：需要深入的思考，耗費精力，程式碼重用性低，擴充套件能力差，維護起來難度比較高，
          對複雜業務來說，面向過程的模組難度較高，耦合度也比較高。

面向物件的優點：結構清晰，程式便於模組化，結構化，抽象化，更加符合人類的思維方式；
    封裝性，將事務高度抽象，從而便於流程中的行為分析，也便於操作和自省； 
    容易擴充套件，程式碼重用率高，可繼承，可覆蓋；
    實現簡單，可有效地減少程式的維護工作量，軟體開發效率高。

  缺點是：效率低，面向物件在面向過程的基礎上高度抽象，從而和程式碼底層的直接互動非常少機會，
              從而不適合底層開發和遊戲甚至多媒體開發；
              複雜性，對於事務開發而言，事務本身是面向過程的，過度的封裝導致事務本身的複雜性提高。
 

二、程式語言中面向物件的實現方式

程式語言對對面向物件的實現主流的有兩種方式：基於類的面向物件和基於原型的面向物件。

不管以什麼方式實現，都具有面向物件的三大特徵：

• 封裝

  也就是把客觀事物封裝成抽象的類或具體的物件，並且類或物件可以把自己的資料和方法只讓可信的類或者物件操作，對不可信的進行資訊隱藏。

• 繼承

  可以讓某個型別的物件獲得另一個型別的物件的屬性的方

• 多型

  不同例項的相同方法在不同情形有不同表現形式。多型機制使具有不同內部結構的物件可以共享相同的外部介面。

2.1基於類的面向物件

典型的語言：Java、C#

物件（object）依靠 類（class)來產生

2.2 基於原型的面向物件

典型的語言：JavaScript

物件（object）則是依靠 構造器（constructor）利用 原型（prototype）構造出來的

三、對JavaScript物件的進一步認識

​ ECMA-262 把物件定義為：“無序屬性的集合，其屬性可以包含基本值、物件或者函式。”嚴格來講，這就相當於說物件是一組沒有特定順序的值。物件的每個屬性或方法都有一個名字，而每個名字都對映到一個值。正因為這樣（以及其他將要討論的原因），我們可以把 ECMAScript 的物件想象成散列表：無非就是一組名值對，其中值可以是資料或函式。

<script type="text/javascript">
    //用大括號括起來的一系列的鍵值對，就構成了JavaScript物件。這種物件稱之為字面量物件。
    var person = {
        name : "張三",    // 一個鍵值對  
        age : 20,
        sex : "男",
        eat : function () { //屬性的值是函式，這個時候我們更喜歡把這樣的屬性稱之為方法。
            alert("吃東西");
        }
    }
</script>

說明：

1. name : “張三” 一個鍵值對錶示JavaScript物件的一個屬性。 name是屬性名， “張三” 屬性值。
2. 屬性可以是任意型別的。可以包括我們以前學的簡單資料型別，也可以是函式，也可以是其他的物件。
3. 當一個屬性的值是函式的時候，我們更喜歡說這個屬性為方法。(如果函式不和物件關聯起來的時候，應該叫函式不應該叫方法。只是一種稱呼，你完全可以不用理會)。 我們一般說person物件具有了一個方法eat. 將來訪問eat的時候，也和呼叫一個函式一樣一樣的。

3.1 訪問物件的屬性

訪問一個物件的屬性，我們可以直接通過 物件.屬性名 和 物件[屬性名] 來訪問。

alert(person.name);  // 訪問person物件的 name屬性值
person.age = 30;  //修改person物件的 age 屬性
person.eat();  //既然是呼叫方法(函式) 則一定還要新增 ()來表示方法的呼叫
alert(person["name"]);  //

兩種使用方式有一些不同的地方：

1. 物件.屬性名的方式，只適合知道了屬性的名字，可以直接寫。比如： person.age 。如果屬性名是個變數，則這種方法無效， 物件.變數名 會出現語法錯誤。
2. 物件[屬性名]，這種方式使用無限制。如果是字串常量，則應該用”“引起來，如果是變數，可以直接使用。

person.age = 100; // ok
var n = "age";
person.a = 101; //  no ok 語法錯誤
person["age"] = 102; // ok
person[n] = 103;  //ok

3.2 給物件新增屬性

JavaScript是一種動態語言，可以在程式碼執行過程中，動態去新增和修改物件的屬性。這是與其他面嚮物件語言一個很大的不同點。

備註：對那些基於類的語言，屬性一旦在類中定義完成，物件是不能去動態新增和刪除屬性的。

//給person物件的屬性 girlFriend 賦值。在賦值的過程中，首先會判斷這個屬性在JavaScript中是否存在，如果存在就對這個
//屬性重寫賦值。如果不存在，就給這個物件新增這個屬性，並賦值。
person.girlFrient = "小麗";  

//給物件新增方法
person.play = funcion(){
    alert("打擊high起來");
}

3.3 刪除物件屬性

對JavaScript來說，我們不僅可以動態的新增屬性，也可以動態的刪除屬性。

使用操作符：delete

注意：delete是個操作符，不是方法，所以後面沒有必要新增括號啊

// 使用delete操作關鍵字，刪除person物件的屬性age
delete person.age;
alert(person.age);  //彈出undefined。表示這個屬性沒有定義

3.4 修改物件屬性

// 把person物件的sex屬性的值修改為 女
person.sex = "女";
person.eat = funcion(){
    alert("吃貨");
}
person.eat();  //吃貨

3.5 使用for…in遍歷物件的屬性

for…in可以用來遍歷物件的所有屬性。

// 在用for...in遍歷的時候， in前面的變數pn指的是屬性的名稱。
for (pn in person) {
    alert(pn + " " + person[pn]);
}

四、多種建立物件的方式

除了上面的使用物件直接量，JavaScript還支援多種方式建立物件

4.1 使用new Object()建立

<script type="text/javascript">
    //使用object建立一個物件    完全等同於 var person = {};
    var person = new Object();
    //給物件新增屬性
    person.name = "李四";
    //給物件新增方法
    person.eat = function () {
        alert("好好吃")
    }
</script>

4.2 工廠模式建立

雖然 Object 建構函式或物件字面量都可以用來建立單個物件，但這些方式有個明顯的缺點：使用同一個介面建立很多物件，會產生大量的重複程式碼。為解決這個問題，人們開始使用工廠模式的一種變體。

工廠模式是軟體工程領域一種廣為人知的設計模式，這種模式抽象了建立具體物件的過程，考慮到在 ECMAScript 中無法建立類，開發人員就發明了一種函式，用函式來封裝以特定介面建立物件的細節。

<script type="text/javascript">
    function createPerson(name, age, job) {
        var o = new Object();
        o.name = name;
        o.age = age;
        o.job = job;
        o.sayName = function() {
            alert(this.name);
        };
        return o;
    }
    var person1 = createPerson("張三", 29, "js開發者");
    var person2 = createPerson("李四", 27, "java開發者");
</script>

createPerson()函式可以多次呼叫，每呼叫一次這個函式就會返回一個物件，而且物件的型別仍然是Object型別的。雖然解決了多個相似物件的問題，但卻沒有解決物件型別識別的問題。

4.3 建構函式模式建立

為了解決物件型別識別問題，又提出了建構函式模式。這種模式，其實在我們建立一些原生物件的時候，比如Array、Object都是呼叫的他們的建構函式。

看下面的程式碼

<script type="text/javascript">
    function Person (name, age, sex) {
        this.name = name;

        this.age = age;
        this.sex = sex;

        this.eat = function () {
            alert(this.name + "在吃東西");
        }
    }
    var p1 = new Person("張三", 20, "男");
    p1.eat();   //張三在在吃東西
    var p1 = new Person("李四", 30, "男");
    p1.eat();   //李四在在吃東西
    alert(p1 instanceof Person);    //
</script>

說明：

1. 使用建構函式建立物件，必須使用關鍵字new ，後面跟著建構函式的名，根據需要傳入相應的引數。
2. 其實使用 new 建構函式() 的方式建立物件，經歷了下面幾個步驟。
   
   • 創建出來一個新的物件
   • 將建構函式的作用域賦給新物件。意味著這個時候 this就代表了這個新物件。
   • 執行建構函式中的程式碼。 在本例中就是給新物件新增屬性，並給屬性初始化值。
   • 建構函式執行完畢之後，預設返回新物件。 所以外面就可以拿到這個剛剛建立的新物件了。

五、建構函式與普通函式的關係

1. 他們都是函式。建構函式也是函式，也可以像普通的函式一樣進行呼叫。 做普通函式呼叫的時候，因為沒有建立新的物件，所以this其實指向了window物件。

function Person(){
    this.name = "張三";   // 把name屬性新增到了window物件上面
    alert(this === window);  //如果不作為構造方法呼叫，則 是true
}
Person();  // 把建構函式當做普通方法呼叫。這個時候內部的this指向了weindow
alert(window.name);  //張三
function Human(){
    this.name = "王五";
    alert(this instanceof window);  // false
    alert(this instanceof Human);  //true
}
var h = new Human();  //當做建構函式來呼叫，建立一個物件
alert(h.name);

1. 建構函式和普通函式僅僅也僅僅是呼叫方式的不同。也就是說，隨便一個函式你如果用new 的方式去使用，那麼他就是一個建構函式。
2. 為了區別，如果一個函式想作為建構函式，作為國際慣例，最好把這個建構函式的首字母大寫。