Javascriptデザインモデル学習1(ウォーミングアップ編)

関数の作成から開始
関数の作成には多くの形式があります.通常は以下の方法を採用します.

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()という方法を使いたいだけですが、このようなオブジェクトをコピーして自分で使うことはできません.コードを全部コピーしないと、コードの量が増えてしまいます.

var GetUserInfo= function(){
 return {
     getName :function(){
         //get name here
     },
     getAge : function(){
         //get age here
     }
 }
}

これで私達は安心してgetsUserInfoの中のある方法を複製して自分のために使うことができます.使い方は以下の通りです.

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の方法を実行したいです.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
     }
}