淺學(xué)設(shè)計模式

待續(xù)http://www.cnblogs.com/ghostwu/p/7440691.html

總覺得我還沒有跨過這個坎,我得學(xué)好這個。

工廠模式(最??吹降脑O(shè)計模式)

工廠模式的使用場合往往是要創(chuàng)建多個類似的對象。

 function createObj(name){
        var obj = new Object();
        obj.name = name;
        obj.getName = function(){return obj.name};
        return obj;
 }
//使用方法
var obj1 = creatObj('Tony')

可以發(fā)現(xiàn)這種工廠模式產(chǎn)生的對象有著很大的局限性,不能設(shè)置和返回對象的類型。
為了讓創(chuàng)造出來的對象的類型也是可以獲取的,我們使用構(gòu)造函數(shù)的方法。

function CreateObj(name){
    this.name = name;
    this.getName = function(){return this.name}
}
//利用的構(gòu)造函數(shù)建立實例的方法
var obj2=  new CreateObj('pony')

上述的構(gòu)造函數(shù)的方法和工廠模式最大的區(qū)別就在于新建實例的方法,構(gòu)造函數(shù)使用的是new這個關(guān)鍵字。在new之后,會默認創(chuàng)造一個this,最后都會return this。
使用new出的實例,就可以用instanceof判斷它的類型了。


組合設(shè)計模式

用到組合設(shè)計模式之前,我們先了解下為什么要使用這一種的設(shè)計模式。它又是針對什么模式的改進。
要設(shè)計大量的相似的對象,首先其實想到的可以是繼承啊。對于JavaScript就可以用到原型鏈,就可以用原型鏈繼承啊。

function object(o){
var G = function(){};
G.prototype = o;
return new G;
}
//realize inherit
var obj = {'name':'tony',show:function(){console.log(this.name)}}
var obj1 = object(obj)

但是如果對obj1中的name屬性就行修改的話,可以發(fā)現(xiàn)obj的name屬相也會被修改,應(yīng)該原型鏈實現(xiàn)的是淺拷貝,引用類型的數(shù)據(jù)在共同的實例中共享。
其中,原型鏈繼承的方法在ES5中新增了一個Object.create()的方法。同樣也是淺拷貝。

寄生式繼承

function objCreate(srcObj){
var det = Object.create(sercObj);
return det
}

var obj1 = {name:'yippee'}
var obj2 = objCreate(obj1)

將原型鏈繼承再次封裝。
這樣實現(xiàn)就是一個數(shù)據(jù)不同享的繼承了。
但是又發(fā)現(xiàn),這個還是不完美的,不能傳參數(shù)。
那么,就可以引出組合繼承了。
大三下就開始看這些了,這都不知道是第幾次復(fù)習(xí)了。但是總是感覺理解的火候差點

//組合繼承
function Person( uName ){
            this.skills = [ 'php', 'javascript' ];
            this.userName = uName;
        }
        Person.prototype.showUserName = function(){
            return this.userName;
        }
        function Teacher ( uName ){
            Person.call( this, uName );
        }
        Teacher.prototype = new Person();

        var oT1 = new Teacher( 'ghostwu' );
        oT1.skills.push( 'linux' );
        var oT2 = new Teacher( 'ghostwu' );
        console.log( oT2.skills ); //php,javascript
        console.log( oT2.showUserName() ); //ghostwu

組合式繼承雖然在功能上大致的實現(xiàn)了我們的要求,但是在這種方法中調(diào)用了父類的構(gòu)造函數(shù)兩次,其中Persion.call(this.Uname)實例化對象的時候調(diào)用了一次,又在Teacher.prototype = new Person()設(shè)置子類原型的時候調(diào)用了一次。

寄生組合式繼承

function Person(name){
  this,name  =  name;
 this.sex = 'male'
}

Persion.prototype.showName = function(){
  return this.name;
}

function Teacher(name){
  Person.call(this,name)
}

function inherit(sub,super){
  var tem = OBject.creat('super');
  tem . constructor  = super;
  sub.prototype  = tem;
}

這個也就是再對父類淺拷貝。

自我邏輯大調(diào)整,每次寫完了之后,經(jīng)常過個幾天再去回想這一塊代碼邏輯的時候,總是會出現(xiàn)混淆。
搞忘了到底是用的function 還是對象,對function中的this的指向也就會出現(xiàn)問題。
在這重新梳理一下邏輯。
用的就是function,不然所有的原型鏈從何而來。
只是其中為什么用到了this,就是因為new關(guān)鍵字。會自動創(chuàng)建并且返回一個對象。
如果直接使用function,其中的this指向的是window。

這只是簡單的了解了一下了思路,然而在實際中的運用還需要大量的練習(xí)

相關(guān)的練習(xí)的博客

學(xué)習(xí)內(nèi)容恐有錯誤,日后若是有感觸重新改正

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容