JS物件導向

標籤：

物件導向的語言有一個標誌，即擁有類的概念，抽象執行個體對象的公用屬性與方法，基於類可以建立任意多個執行個體對象，一般具有封裝、繼承、多態的特性！但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‘);

 

     使用自訂的建構函式（與普通函數一樣，只是用它來建立對象），定義物件類型（如：Person）的屬性和方法。它與Factory 方法區別在於：

• 沒有顯式地建立對象
• 直接將屬性和方法賦值給this對象；
• 沒有return語句；

      此外，要建立Person的執行個體，必須使用new關鍵字，以Person函數為建構函式，傳遞參數完成對象建立；實際建立經過以下4個過程：

1. 建立一個對象
2. 將函數的範圍賦給新對象（因此this指向這個新對象，如：person1）
3. 執行建構函式的代碼
4. 返回該對象

     上述由Person建構函式產生的兩個對象person1與person2都是Person的執行個體，因此可以使用instanceof判斷，並且因為所有對象都繼承Object，因此person1 instanceof Object也返回真：

alert(person1 instanceof Person);//true;

alert(person2 instanceof Person);//true;

alert(person1 instanceof Object);//true;

alert(person1.constructor === person2.constructor);//ture;

     雖然建構函式方式比較不錯，但也存在缺點，那就是在建立對象時，特別針對對象的屬性指向函數時，會重複的建立函數執行個體，以上述代碼為基礎，可以改寫為：

function Person(name,age,job){

    this.name = name;

    this.age = age;

    this.job = job;

    this.getName = new Function () {//改寫後效果與原代碼相同，不過是為了方便理解

        return this.name;

    }

}

   上述代碼，建立多個執行個體時，會重複調用new Function();建立多個函數執行個體，這些函數執行個體還不是一個範圍中，當然這一般不會有錯，但這會造成記憶體浪費。當然，可以在函數中定義一個getName = getName的引用，而getName函數在Person外定義，這樣可以解決重複建立函數執行個體問題，但在效果上並沒有起到封裝的效果，如下所示：

function Person(name,age,job){

    this.name = name;

    this.age = age;

    this.job = job;

    this.getName = getName;

}

function getName() {//到處是代碼，看著亂！！

        return this.name;

}

     3、原型模式

     JS每個函數都有一個prototype(原型)屬性，這個屬性是一個指標，指向一個對象，它是所有通過new操作符使用函數建立的執行個體的原型對象。原型對象最大特點是，所有對象執行個體共用它所包含的屬性和方法，也就是說，所有在原型對象中建立的屬性或方法都直接被所有對象執行個體共用。

function Person(){

}

Person.prototype.name = ‘Jack‘;//使用原型來添加屬性

Person.prototype.age = 29;

Person.prototype.getName = function(){

    return this.name;

}

var person1 = new Person();

alert(person1.getName());//Jack

var person2 = new Person();

alert(person1.getName === person2.getName);//true;共用一個原型對象的方法

      原型是指向原型對象的，這個原型對象與建構函式沒有太大關係，唯一的關係是函數的prototype是指向這個原型對象！而基於建構函式建立的對象執行個體也包含一個內部指標為：[[prototype]]指向原型對象。

       執行個體屬性或方法的訪問過程是一次搜尋過程：

• 首先從對象執行個體本身開始，如果找到屬性就直接返回該屬性值；
• 如果執行個體本身不存在要尋找屬性，就繼續搜尋指標指向的原型對象，在其中尋找給定名字的屬性，如果有就返回；

     基於以上分析，原型模式建立的對象執行個體，其屬性是共用原型對象的；但也可以自己執行個體中再進行定義，在尋找時，就不從原型對象擷取，而是根據搜尋原則，得到本執行個體的返回；簡單來說，就是執行個體中屬性會屏蔽原型對象中的屬性；

     原型與in操作符

     一句話：無論原型中屬性，還是對象執行個體的屬性，都可以使用in操作符訪問到；要想判斷是否是執行個體本身的屬性可以使用object.hasOwnProperty(‘attr’)來判斷；

     原生對象中原型

     原生對象中原型與普通對象的原型一樣，可以添加/修改屬性或方法，如以下代碼為所有字串對象添加去左右空白原型方法：

String.prototype.trim = function(){

    return this.replace(/^\s+/,‘‘).replace(/\s+$/,‘‘);

}

var str = ‘   word space   ‘;

alert(‘!‘+str.trim()+‘!‘);//!word space!

     原型模式的缺點，它省略了為建構函式傳遞初始化參數，這在一定程式帶來不便；另外，最主要是當對象的屬性是參考型別時，它的值是不變的，總是引用同一個外部對象，所有執行個體對該對象的操作都會其它執行個體：

function Person() {

}

Person.prototype.name = ‘Jack‘;

Person.prototype.lessons = [‘Math‘,‘Physics‘];

var person1 = new Person();

person1.lessons.push(‘Biology‘);

var person2 = new Person();

alert(person2.lessons);//Math,Physics,Biology，person1修改影響了person2

     4、組合建構函式及原型模式

      目前最為常用的定義類型方式，是組合建構函式模式與原型模式。建構函式模式用於定義執行個體的屬性，而原型模式用於定義方法和共用的屬性。結果，每個執行個體都會有自己的一份執行個體屬性的副本，但同時又共用著對方方法的引用，最大限度的節約記憶體。此外，組合模式還支援向建構函式傳遞參數，可謂是集兩家之所長。

function Person(name, age, job) {

    this.name = name;

    this.age = age;

    this.job = job;

    this.lessons = [‘Math‘, ‘Physics‘];

}

Person.prototype = {

    constructor: Person,//原型字面量方式會將對象的constructor變為Object，此外強制指回Person

    getName: function () {

        return this.name;

    }

}

var person1 = new Person(‘Jack‘, 19, ‘SoftWare Engneer‘);

person1.lessons.push(‘Biology‘);

var person2 = new Person(‘Lily‘, 39, ‘Mechanical Engneer‘);

alert(person1.lessons);//Math,Physics,Biology

alert(person2.lessons);//Math,Physics

alert(person1.getName === person2.getName);//true,//共用原型中定義方法

 

   在所接觸的JS庫中，jQuery類型的封裝就是使用組合模式來執行個體的！！！

    5、動態原型模式

     組合模式中執行個體屬性與共用方法（由原型定義）是分離的，這與純物件導向語言不太一致；動態原型模式將所有構造資訊都封裝在建構函式中，又保持了組合的優點。其原理就是通過判斷建構函式的原型中是否已經定義了共用的方法或屬性，如果沒有則定義，否則不再執行定義過程。該方式只原型上方法或屬性只定義一次，且將所有構造過程都封裝在建構函式中，對原型所做的修改能立即體現所有執行個體中：

function Person(name, age, job) {

    this.name = name;

    this.age = age;

    this.job = job;

    this.lessons = [‘Math‘, ‘Physics‘];

}

if (typeof this.getName != ‘function‘) {//通過判斷執行個體封裝

　　Person.prototype = {

　　　　constructor: Person,//原型字面量方式會將對象的constructor變為Object，此外強制指回Person

　　　　getName: function () {

　　　　　　return this.name;

　　　　}
　　}

}

var person1 = new Person(‘Jack‘, 19, ‘SoftWare Engneer‘);

person1.lessons.push(‘Biology‘);

var person2 = new Person(‘Lily‘, 39, ‘Mechanical Engneer‘);

alert(person1.lessons);//Math,Physics,Biology

alert(person2.lessons);//Math,Physics

alert(person1.getName === person2.getName);//true,//共用原型中定義方法

     註：以上內容參考《JavaScript 進階程式設計》第3版

source:http://www.cnblogs.com/gaojun/archive/2013/10/24/3386552.html

JS物件導向