JS物件導向的程式設計

開始學習js物件導向程式設計，在網上搜了兩篇文章，感覺寫的不錯。可以參考參考。

第一篇文章：  轉自：http://www.cnblogs.com/gaojun/archive/2013/10/24/3386552.html

物件導向的語言有一個標誌，即擁有類的概念，抽象執行個體對象的公用屬性與方法，基於類可以建立任意多個執行個體對象，一般具有封裝、繼承、多態的特性。但JS中對象與純物件導向語言中的對象是不同的，ECMA標準定義JS中對象：無序屬性的集合，其屬性可以包含基本值、對象或者函數。可以簡單理解為JS的對象是一組無序的值，其中的屬性或方法都有一個名字，根據這個名字可以訪問相映射的值（值可以是基本值/對象/方法）。   一、理解對象:

         第一種：基於Object對象

var person = new Object();

person.name = 'My Name';

person.age = 18;

person.getName = function(){

    return this.name;

}

        第二種：對象字面量方式（比較清楚的尋找對象包含的屬性及方法）

var person = {

    name : 'My name',

    age : 18,

    getName : function(){

        return this.name;

    }

}

      JS的對象可以使用‘.’操作符動態擴充其屬性，可以使用’delete’操作符或將屬性值設定為’undefined’來刪除屬性。如下：

person.newAtt=’new Attr’;//添加屬性

alert(person.newAtt);//new Attr

delete person.age;

alert(person.age);//undefined(刪除屬性後值為undefined);

二、對象屬性類型

      ECMA-262第5版定義了JS對象屬性中特徵（用於JS引擎，外部無法直接存取）。ECMAScript中有兩種屬性：資料屬性和訪問器屬性       1、資料屬性：

      資料屬性指包含一個資料值的位置，可在該位置讀取或寫入值，該屬性有4個供述其行為的特性：

      [[configurable]]:表示能否使用delete操作符刪除從而重新定義，或能否修改為訪問器屬性。預設為true;

      [[Enumberable]]:表示是否可通過for-in迴圈返回屬性。預設true;

      [[Writable]]:表示是否可修改屬性的值。預設true;

      [[Value]]:包含該屬性的資料值。讀取/寫入都是該值。預設為undefined;如上面執行個體對象person中定義了name屬性，其值為’My name’,對該值的修改都反正在這個位置

      要修改對象屬性的預設特徵（預設都為true)，可調用Object.defineProperty()方法，它接收三個參數：屬性所在對象，屬性名稱和一個描述符對象（必須是：configurable、enumberable、writable和value，可設定一個或多個值）。

      如下：（瀏覽器支援：IE9+、Firefox 4+、Chrome、Safari5+）

var person = {};

Object.defineProperty(person, 'name', {

    configurable: false,

    writable: false,

    value: 'Jack'

});

alert(person.name);//Jack

delete person.name;

person.name = 'lily';

alert(person.name);//Jack

      可以看出，delete及重設person.name的值都沒有生效，這就是因為調用defineProperty函數修改了對象屬性的特徵；值得注意的是一旦將configurable設定為false，則無法再使用defineProperty將其修改為true（執行會報錯：can't redefine non-configurable property）;       2、訪問器屬性：

      它主要包括一對getter和setter函數，在讀取存取器屬性時，會調用getter返回有效值；寫入訪問器屬性時，調用setter，寫入新值；該屬性有以下4個特徵：

      [[Configurable]]:是否可通過delete操作符刪除重新定義屬性；

      [[Numberable]]:是否可通過for-in迴圈尋找該屬性；

      [[Get]]:讀取屬性時調用，預設：undefined;

      [[Set]]:寫入屬性時調用，預設：undefined;

      訪問器屬性不能直接定義，必須使用defineProperty()來定義，如下：

var person = {

    _age: 18

};

Object.defineProperty(person, 'isAdult', {

    get: function () {

        if (this._age >= 18) {

            return true;

        } else {

            return false;

        }

    }

});

alert(person.isAdult?'成年':'未成年');//成年

      從上面可知，定義訪問器屬性時getter與setter函數不是必須的,並且，在定義getter與setter時不能指定屬性的configurable及writable特性；

      此外，ECMA-262（5）還提供了一個Object.defineProperties()方法，可以用來一次性定義多個屬性的特性：

var person = {};

Object.defineProperties(person,{

    _age:{

        value:19

    },

    isAdult:{

        get: function () {

            if (this._age >= 18) {

                return true;

            } else {

                return false;

            }

        }

    }

});

alert(person.isAdult?'成年':'未成年');//成年

 

      上述代碼使用Object.defineProperties()方法同時定義了_age及isAudlt兩個屬性的特性

      此外，使用Object.getOwnPropertyDescriptor()方法可以取得給定屬性的特性：

var descriptor = Object.getOwnPropertyDescriptor(person,'_age');

alert(descriptor.value);//19

   對於資料屬性，可以取得：configurable,enumberable,writable和value；

   對於訪問器屬性，可以取得：configurable,enumberable,get和set 三、建立對象

使用Object建構函式或對象字面量都可以建立對象，但缺點是建立多個對象時，會產生大量的重複代碼，因此下面介紹可解決這個問題的建立對象的方法      1、原廠模式

function createPerson(name, age, job) {

    var o = new Object();

    o.name = name;

    o.age = age;

    o.job = job;

    o.getName = function () {

        return this.name;

    }

    return o;//使用return返回產生的對象執行個體

}

var person = createPerson('Jack', 19, 'SoftWare Engineer');

     建立對象交給一個Factory 方法來實現，可以傳遞參數，但主要缺點是無法識別物件類型，因為建立對象都是使用Object的原生建構函式來完成的。      2、建構函式模式

function Person(name,age,job){

    this.name = name;

    this.age = age;

    this.job = job;

    this.getName = function () {

        return this.name;

    }

}

var person1 = new Person('Jack', 19, 'SoftWare Engineer');

var person2 = new Person('Liye', 23, 'Mechanical Engineer');