Javascript設計模式學習1（熱身篇）

Little heaven發表於2019-01-04
JavaScript設計模式

從建立一個函式開始

函式的建立有很多形式，通常我們會採用以下做法

function getName(){
    //get name here
}
function getAge(){
 //get age here
}

var getName = function(){
    //get name here
}
var getAge= function(){
 //get age here
}
複製程式碼

但是這種做法有個弊端，這類函式因為都是全域性變數，所以在團隊合作，或者專案函式很多時就會出現函式命名重複的問題，那就糟糕了，會出現函式被覆蓋，導致不必要的工作量。所以可以採用下面的方式（用物件來收編方法，變數）

var GetUserInfo= {
    getName:function(){
        //get name here
    },
    getAge :function(){
        //get age here
    }
}
//或者像下面這樣
var GetUserInfo= function(){};
GetUserInfo.getName = function(){
 //get name here
},
GetUserInfo.getAge = function(){
 //get age here
 }

複製程式碼

但是上面方法，還有個問題，就是這個物件不能複製，比如我只想使用裡面的getUserInfo.getAge()這個方法，但是沒有辦法複製一個這樣的物件來給自己使用，除非程式碼全部拷貝一遍，這無疑徒增了程式碼量，所以我們可以採用return來返回一個新的函式物件，如下

var GetUserInfo= function(){
 return {
     getName :function(){
         //get name here
     },
     getAge : function(){
         //get age here
     }
 }
}
複製程式碼

這樣我們就可以安心複製getUserInfo其中的某個方法來為自己所用了,使用方法如下

var getUserInfo_myself = GetUserInfo()
getUserInfo_myself.getName()
複製程式碼

上面的方法雖然可以完美達到我們的要求，但是程式設計最重要的是什麼？當然時物件導向！我們來回顧一下物件導向的三個基本特徵：封裝、繼承、多型。

封裝：類其實就是儲存了一個函式的變數，這個函式有自己的屬性和方法。將屬性和方法組成一個類的過程就是封裝。

所以要實現封裝，我們就得用JS實現一個類

//ES5
var GetUserInfo= function(){
    this.getName = function(){
         //get name here
     },
     this.getAge = function(){
         //get age here
     },
}
//this的指向簡單理解就是函式被呼叫時的執行環境，也可以說時誰呼叫該函式，this就指向誰
//這裡this就指向getUserInfo_myself

複製程式碼

上面的程式碼（建構函式）就實現了一個類（函式，有自己的屬性，有自己的方法）

呼叫時，我們就不能var getUserInfo_myself = GetUserInfo()這樣來用了。要像下面這樣

var getUserInfo_myself = new GetUserInfo()
getUserInfo_myself()
複製程式碼

以為這樣就結束？這還不算是最好的方案，因為通過new來建立新物件的時候，新建立的物件都會複製一次this的屬性，用多了就會造成很多消耗，我們可以避免嗎？可以！通過原型的方式來實現，看下面

//ES5方法一
var GetUserInfo=function(){};
GetUserInfo.prototype.getName={
    //get name here
}
GetUserInfo.prototype.getAge={
  //get age here
}
//ES5方法二
var GetUserInfo=function(){};
GetUserInfo.prototype={
    getName(){
     //get name here
    }
    getAge(){
     //get agehere
     }
}

//用ES6的語法
class GetUserInfo{
 constructor(){}
 getName(){
 //get name here
 }
 getAge(){
 //get age here
 }
}

複製程式碼

使用方法如下

var getUserInfo_myself = new GetUserInfo()
// class方法必須使用new，否則會報錯
getUserInfo_myself.getName()
getUserInfo_myself.getAge()
複製程式碼

之前的例子中我們想要執行getName和getAge方法都要將物件getUserInfo_myself寫兩次，那我們就可以用鏈式呼叫來優化一下，那我們應該怎麼做？看下面

//建立物件的方式實現
var GetUserInfo= {
 getName: function(){
 console.log('getName')
 console.log(this)
 return this
 },
 getAge: function(){
 console.log('getAge')
 console.log(this)
 return this
 }
}
GetUserInfo.getName().getAge()
//這裡的this指向GetUserInfo，所以GetUserInfo.getName().getAge()其實就是這樣執行的
//1. GetUserInfo.getName() 返回this,this指向GetUserInfo，GetUserInfo有兩個方法getName()和getAge()
//2. this.getAge() 也就是 GetUserInfo.getAge()

//原型的方式實現
var GetUserInfo = function(){}
GetUserInfo.prototype={
    getName(){
         //get name here
         return this
     }
     getAge(){
         //get agehere
         return this
     }
}
複製程式碼

相關文章