實現JavaScript自定義函數的整合、鏈式調用及類的封裝

函數聲明形式：表單驗證函數

1 2 3 4 5 6 7 8 9 10 11 12 13

function  checkName(){      console.log( '檢查用戶名' ); } function  checkEmail(){      console.log( '檢查郵箱地址' ); } function  checkPassword(){      console.log( '檢查密碼' ); }   checkName(); checkEmail(); checkPassword();

函數字面量形式：

         在團隊開發中定義函數容易覆蓋他人已經定義過的函數，將函數保存在一個變量裏，這樣就減小了原有功能被覆蓋的風險。

1 2 3 4 5 6 7 8 9 10 11 12

var  checkName =  function (){      console.log( '檢查用戶名' ); } var  checkEmail =  function (){      console.log( '檢查郵箱地址' ); } var  checkPassword =  function (){      console.log( '檢查密碼' ); } checkName(); checkEmail(); checkPassword();

對象屬性形式：利用對象具備屬性與方法的特性。 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

var checkObject = {      checkName:function(){          console. log ( '檢查用戶名' );      },      checkEmail:function(){          console. log ( '檢查郵箱地址' );      },      checkPassword:function(){          console. log ( '檢查密碼' );      }       }; checkObject.checkName(); checkObject.checkEmail(); checkObject.checkPassword();

對象賦值形式：對象的另外一種建立形式。

1 2 3 4 5 6 7 8 9 10 11 12 13

var  checkObject =  function (){}; checkObject.checkName =  function (){      console.log( '檢查用戶名' ); } checkObject.checkEmail =  function (){      console.log( '檢查郵箱地址' ); } checkObject.checkPassword =  function (){      console.log( '檢查密碼' ); } checkObject.checkName(); checkObject.checkEmail(); checkObject.checkPassword();

       也是利用checkObject.checkName()進行調用。 可是這個對象的方法在建立新對象時不能被繼承。        

返回對象：能夠將這些方法放在一個函數對象中返回。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

var  checkObject =  function (){      return  {          checkName :  function (){              console.log( '檢查用戶名' );          },          checkEmail:  function (){              console.log( '檢查郵箱地址' );          },          checkPassword:  function (){              console.log( '檢查密碼' );          }      } }; var  a =  new  checkObject(); a.checkName(); a.checkEmail(); a.checkPassword();

       每次調用這個函數時，都返回一個新對象，返回的checkObj對象與checkObject對象沒有任何關係。

類方式：

1 2 3 4 5 6 7 8 9 10 11 12 13

var  checkObject  = function(){      this .checkName =  function (){          //驗證姓名      }      this .checkEmail =  function (){          //驗證郵箱      }      this .checkPassword =  function (){          //驗證密碼      } } var  checkObj = new  checkObject(); checkObj.checkName();

        每次經過new關鍵詞建立新對象的時候，都會對類的this上的屬性進行復制， 形成了沒必要要的內存消耗。

prototype原型：查找綁定方法

1 2 3 4 5 6 7 8 9 10

var  checkObject  =  function (){}; checkObject.prototype.checkName =  function (){      //驗證姓名 } checkObject.prototype.checkEmail =  function (){      //驗證郵箱 } checkObject.prototype.checkPassword =  function (){      //驗證密碼 }

 以上prototype須要書寫多遍，可簡寫爲：

1 2 3 4 5 6 7 8 9 10 11 12

var  checkObject  =  function (){}; checkObject.prototype = {      checkName ： function (){          //驗證姓名      },      checkEmail ： function (){          //驗證郵箱      },      checkPassword ： function (){          //驗證密碼      } }

       依賴原型依次查找，每次找到方法都是同一個。

1 2	var  checkObj = new  checkObject(); checkObj.checkName();

鏈式調用：聲明的每一個方法末尾將當前對象返回。

1 2 3 4 5 6 7 8 9 10 11 12 13 14

var  checkObject  = {      checkName :  function (){           //驗證姓名           return  this ;      },      checkEmail :  function (){           //驗證郵箱           return  this ;      },      checkPassword :  function (){           //驗證密碼           return  this ;      } }

 鏈式調用：

1	checkObject.checkName().checkEmail().checkPassword();

放在原型對象裏：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

var  checkObject  =  function (){}; checkObject.prototype = {      checkName :  function (){          //驗證姓名          return  this ;      },      checkEmail :  function (){          //驗證郵箱          return  this ;      },      checkPassword :  function (){          //驗證密碼          return  this ;      } }

鏈式調用：

1 2	var  checkObj =  new  checkObject(); checkObj.checkName().checkEmail().checkPassword();

Function對象擴展

1 2 3 4 5 6 7 8 9 10 11 12 13 14

Function.prototype.addMethod =  function (name, fn){      this [name] =  fn; }   var  method =  function (){}; (或者 var  method =  new  Function();) method.addMethod( 'checkName' , function (){      //驗證姓名 }); method.addMethod( 'checkEmail' , function (){      //驗證郵箱 }); method.addMethod( 'checkPassword' , function (){      //驗證密碼 });

鏈式定義

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

Function.prototype.addMethod = function (name, fn){      this [name] =  fn;      return this ; }  var method = function (){}; ( var method = new Function();) method.addMethod( 'checkName' , function (){      //驗證姓名      return this ; }).addMethod( 'checkEmail' , function (){      //驗證郵箱      return this ; }).addMethod( 'checkPassword' , function (){      //驗證密碼      return this ; });

能夠鏈式調用了：

1	method.checkName().checkEmail().checkPassword();

 對於相似調用方式，還能夠改爲：

1 2 3 4 5 6 7 8 9 10 11 12 13 14

Function.prototype.addMethod = function (name, fn){      this .prototype[name] =  fn; } var method = function (){}; method.addMethod( 'checkName' , function (){      //驗證姓名      return this ; }).addMethod( 'checkEmail' , function (){      //驗證郵箱      return this ; }).addMethod( 'checkPassword' , function (){      //驗證密碼      return this ; });

這種更改以後，在調用的時候不能直接使用，要經過new關鍵詞來建立新對象了。

1 2	var  m =  new  Method(); m.checkName();

來自爲知筆記(Wiz)