Javascript設計模式讀書筆記一 JAVASCRIPT物件導向的實現

 

1、Javascript類的各種不同實現方式。。在使用幾年的Javascript中,感覺還不是很深入,只是用得比較膚淺。基本上寫的都是一些小函數，沒怎麼用過類。

比如說：

function startAnimation(){

       …

}

function staopAnimation(){

       …

}

上面的做法很簡單就是一個開始和結束動畫的函數，但是無法建立可以儲存狀態並且可以對內部狀態進行操作的動畫對象。下面是定義的類的實現：

var Anim=function(){

       …

};

 

Anim.prototype.start=function(){

       …

}

 

Anim.prototype.stop=function(){

       …

}

類的使用：

var myAnim=new Anim();

myAnim.start();

…

myAnim.stop();

上面定義一個類Anim並且把兩個方法賦給類的prototype屬性。

如果更喜歡把類的定義封裝在一條聲明中，可以使用下面的代碼：

var Anim=function(){

       …

};

Anim.prototype={

       Start:function(){

       …

}.

Stop:function(){

       …

}

};

 

以上代碼還可以以另外一種風格代碼如下：

Function.prototype.method=function(name,fn){

       this.prototype[name]=fn;

};

 

var Anim=function(){

       …

};

Anim.method(‘start’,function(){

       …

});

Anim.method(‘stop’,function(){

       …

});

Function.prototype.method用於為類添加新方法。第一個表示方法名稱，第二個表示用作新方法的函數。

 

可以進一步修改Function.prototype.method,使其可以鏈式調用。這隻需要讓他返回this值即可。代碼如下：

Function.prototype.method=function(name,fn){

       this.prototype[name]=fn;

return this;

};

 

var Anim=function(){

       …

};

Anim.method(‘start’,function(){

       …

}).method(‘stop’,function(){

       …

});

 

以上就採用五種方式完成同一項工作。

 

2、匿名函數

(function(){

    …

})()

Eg:

(function(foo,bar){

    alert(foo*bar);

})(10,2)

匿名函數最有趣的用途是用來建立閉包。閉包是一個受到保護的變數空間。另外javascript具有函數級的範圍。這意味著定義在函數內部的變數在函數外部不能訪問。這就意味著函數運行在它定義的的範圍中，而不是調用在它的範圍中。通過這兩個因素就可以把變數包裹在匿名函數中而對其加以保護。你可以如下建立類的私人變數：

var baz;

(function(){

    var foo=10;

    var bar=2;

    baz =function(){

       returnfoo*bar;

};

})();

 

baz(); //baz可以訪問foo,bar，儘管這個方法在匿名函數的外部執行。

baz定義在閉包中，所以它能訪問foo,bar這兩個匿名函數中的變數。

運行結果：會彈出一個訊息框20；

 

3、對象的易變性

   在js中，一切對象都是都是易變的。這意味著你能使用在大多數的語言中不允許的技術，例如為函數添加屬性。

function displayError(message)

{

    displayError.numTimesExecuted++;

  alert(message);

  alert(displayError.numTimesExecuted);

};

displayError.numTimesExecuted=0;

這也意味著你可以對先前定義的類和執行個體化的對象進行修改。

如下所示示範修改類以及執行個體化後修改對象：

function Person(name,age){

    this.name=name;

    this.age=age;

};

Person.prototype={

    getName:function(){

    return this.name;

},

getAge:function(){

    return this.age;

}

}

 

//執行個體化對象

var alice=new Person(‘Alice’,20);

var bill=new Person(‘Bill’,30);

 

//修改類

Person.prototype.getGreeting=function(){

    return ‘Hi’+this.getName()+’!’;

};

 

//修改一個特定的執行個體

alice.displayGreeting=function(){

    alert(this.getGreeting());

}

 

getGreeting在執行個體化對象建立後建立的，但他們兩個執行個體仍可獲得這個方法。另外displayGreeting只有alice執行個體得到這個方法，其它執行個體就沒有。

 

4、繼承。繼承在js中不像另的物件導向語言中那樣簡單。JS使用的是基於對象的(原形式(prototypal))繼承，它可以用來模仿基於類的(類式(classical))繼承。這兩種方式以後會講。