JavaScriptインスタンス化パターン入門


JavaScript全体でインスタンス化パターンを見つけることができます.各パターンは、基本的なテンプレートから、必要に応じて構成されます.別の開発者と同じインスタンス化を選択したとしても、それは完全に異なって適用されるかもしれません.
個別のカスタムは、インスタンス化パターンは、同じ目標を目指しています:必要なときに呼び出すことができる特定のプロパティとメソッドを持つ関数を作成します.

パターン
  • 機能的な具体化(F . I .)
  • 機能的共有インスタンス化
  • プロトタイプの具体化(P . T .)
  • 擬似古典的な具体化( P . S . C .)
  • ES 6インスタンス化( e . 6 .)

  • 機能的具体化
    これは、インスタンス化パターンの非常に初心者レベルです.最初にコーディングを開始すると、何よりもこのフォーマットを使用します!
    機能Instantiationは簡単に実装し、パターンを解読するために簡単に提供しています.このパターンは、メソッドとプロパティをローカルに保つこともできます.F . I .は若干の下降を持ちます.
    このパターンの1つの主要な問題は、特に複製です.これは別のオブジェクト(同じ名前を付けても)を独自のプロパティで作成する必要があります.上で述べたように、f . iはすべてのローカルスコープを保ちます.これは他のオブジェクトがその特定のメソッドを呼び出すのを許しません.
    複製は機能的なインスタンス化の問題ですが、このパターンはまだ初心者にとって非常に良いです:それは、独自のプロパティとメソッドを持つオブジェクトを作成するスキルを本当に磨くために初心者コーダーをすることができます.
    以下のパターンを見てみましょう.
    const name = function(firstName, lastName){
        let obj = {};
        obj.firstName = firstName;
        obj.lastName = lastName;
    
        obj.speak = function(){
            //insert code
        }
    
        obj.takeIn = function(){
            //insert code here
        }
    
        return obj;
    }
    
    //function calls
    const jon = name('jon','doe'); 
    jon.speak();
    

    関数共有インスタンス化
    機能共有インスタンス化は、F . I .で見つかるプロパティとメソッドの複製と戦うためにつくられました.
    F . Iのように、関数を構築し、その関数の中で特定のプロパティを定義することから始めます.ただし、メソッド/プロパティを格納するには、別のオブジェクトを全体として作成する必要があります.この2番目のオブジェクトは、最初に関連するメソッドのコンテナーとして考えることができます.このパターンを使用して作成されたすべてのオブジェクトは、重複を引き起こすことなく、同じメソッドを参照する必要があります!これは、より良いメモリ効率をもたらす!
    しかし、その前任者のように、このパターンによる没落もあります.一旦オブジェクトがインスタンス化されると、関係はプロパティおよび方法になされるしたがって、メソッドを変更して新しいオブジェクトを作成する場合、2つのオブジェクトは異なるものを参照します.
    見てみましょう!
    const name = function(firstName, lastName){
        let obj = {};
        obj.firstName = firstName;
        obj.lastName = lastName;
    
        _.extend(obj, objMethods)
        return obj;
    }
    
    const objMethods = {
    
        speak(){
            //insert code here
        },
        takeIn(){
            //insert code here
        }
    }
    
    //function calls
    const jon = name('jon','doe'); 
    jon.speak();
    

    プロトタイプのインスタンス化パターン
    プロトタイプのインスタンス化は、プロトタイプを使用してオブジェクトを作成します.次にメソッドを使用してオブジェクトのプロトタイプに接続します.
    Object.create(); //this creates a new object
    
    関数の作成によって起動します.この新しい関数の内部では、上記のメソッドを使用してメソッドの新しいオブジェクトを作成する必要があります.この新しいオブジェクトはすべてのメソッドのコンテナになります.
    P . T .はメモリで重複を作成しません、そして、各々のメソッドは他のすべてのオブジェクトに利用できます.このパターンは、達成するために少し複雑ですが.
    const name = function(firstName, lastName){
        let obj = Object.create(objMethods);
        obj.firstName = firstName;
        obj.lastName = lastName;
    
        _.extend(obj, objMethods)
        return obj;
    }
    
    const objMethods = {
    
        speak(){
            //insert code here
        },
        takeIn(){
            //insert code here
        }
    }
    
    //function calls
    const jon = name('jon','doe'); 
    jon.speak();
    

    擬似古典的な作図パターン
    擬似古典的なインスタンス化パターンは、プロトタイプのインスタンス化パターンで見られるオブジェクトを作成するのに必要な複雑さを修正することを意図します.
    擬似古典的なインスタンス化についての最良の部分は2つの考えに帰属します:新しい建設者とキーワード.新しいコンストラクタで、我々はP . T .パターンで開発した同じ理論を達成することができます.新しいものを使用すると、1つの行内のオブジェクトとそのリターンの作成を実現!これはファイル内のスペースを節約し、コードの読みやすさを緩和します.このキーワードに関しては、我々が作成している新しいオブジェクトを参照するために使用できます.そして、再び、スペースを節約して、我々のコードを計算においてより効率的にします.
    開始するには、新しい関数を作成し、このキーワードを使用してプロパティを追加します.メソッドを全体のオブジェクトに割り当てられます
    objectName.prototype.method
    
    オブジェクトを作成するには、変数に割り当てられた新しいコンストラクターを使用して関数を必要とするたびに呼び出す必要があります!
    擬似古典的なインスタンス化は、コードに対して少し複雑ですが、JavaScriptの機能に組み込まれています.これは、オブジェクト作成の最も最適化された方法の1つを生成します.
    const Name = function(firstName, lastName){
        this.obj = {};
        this.firsName = firstName
        this.lastName = lastName;
    }
    
    Name.prototype.speak = function(){
        //insert code here
    }
    
    Name.prototype.takeIn = function(){
        //insert code here
    }
    
    //function calls
    const jon = new Name('jon','doe'); 
    jon.speak();
    
    

    ES 6インスタンス化パターン
    ES 6インスタンス化はクラスキーワードを使用します.クラスキーワードを使用して、オブジェクトを作成する別のフォームを許可します.クラスの内部では、コンストラクタ関数は入れ子になります;したがって、クラススコープが形成される.
    ES 6のインスタンス化は、メソッドの簡単な実装と簡単なメモリ管理を生成します.しかし、このパターンは、その構文の複雑さを作成し、以前のバージョンのブラウザ/オペレーティングシステムに関するいくつかの問題に遭遇する可能性があります.
    
    class Name{
        constructor(firstName){
            this.speak = firstName;
            this.takeIn = 'larry' 
        }
    
        speak(){
            return this.name
        }
    
        takeIn(){
            return this.takeIn
        }
    }
    
    const jon = new Name('jon')
    

    結論として
    JavaScript全体にインスタンス化パターンがあります.これらを使用すると、読みやすさ、効率、およびメモリ管理を使用してコードを改善することができます.全体的に、具体化パターンは最初に解読するのが難しいかもしれません、しかし、若干の実行の後、あなたは完全に彼らを理解することができます!