js--オブジェクトを作成する方法は？

序文

　　フロントエンド開発者として、オブジェクトの作成方法について話すとき、一般的なリテラルメソッドを使用してオブジェクトを作成することだけを考えますか？新しいObject（）を使用してオブジェクトを作成するプロセスについて考えたことはありますか？この記事では、いくつかの一般的なものを整理します作成オブジェクトメソッド。

テキスト

　　オブジェクトを作成する方法は次のように要約されます。

　　（1）オブジェクトリテラルの方法。

      var Person = {}; // var Person = new Object（）;と同等
      var Person = { 
        name： "Nike" 、
        age： 29 、
      };

　　　　オブジェクトリテラルは、オブジェクト定義の単純な記述形式であり、多数の属性を含むオブジェクトを作成するプロセスを簡素化することを目的としています。

　　（2）ファクトリーモデル。

　　　　一般的なデザインパターンの1つであるファクトリパターンは、オブジェクトを作成するプロセスで、顧客のようなオブジェクトを作成する特定のロジックを公開する必要はありませんが、新しい共通オブジェクトを指すための共通のインターフェイスを介して、つまり、関数を使用してオブジェクトの詳細の作成をカプセル化し、関数を呼び出して関数を再利用する目的を達成するために、このメソッドの欠点は、オブジェクトのタイプを識別できないことと、オブジェクトとオブジェクトの間の接続です。タイプを確立できません。例は次のとおりです。

      function person（name、age）{
         var o = new Object（）; 
        o.name =名前; 
        o.age =年齢; 
        o.sayHello = function （）{ 
          console.log（ "hello" ）; 
        }; 
        oを返す; 
      } 
　　　　VARあたり=新しい人（ "暁明"、20 ）
      にconsole.log（per.name）//暁明
      はconsole.log（per.sayHello（））//ハロー

　　（3）コンストラクターモード。

　　　　JavaScriptのすべての関数はコンストラクターとして使用できます。new演算子によって作成されたオブジェクトである限り、この関数をコンストラクターと呼びます。このモードでは、オブジェクトを明示的に作成する必要はありませんが、これに属性とメソッドを直接割り当てます。、returnステートメントはありません。一般的な仕様では、コンストラクター関数名の最初の文字を大文字にする必要があることに注意してください。例は次のとおりです。

      function Person（name、age）{
         this .name = name;
        this .age = age;
        this .sayHello = function （）{ 
          console.log（this .name）; 
        }; 
      } 
      var person = new Person（ "xiaoming"、18 ）; 
      person.sayHello（）; //暁明
      person.constructor ==人。//オブジェクトの実在の
      人物instanceof ; //真の
      人のinstanceof人。//true　 
　　　　 Peron（ "xiaohong"、18）; //通常の関数として使用
      　window.sayHello（）; // xiaohong

　　　　コンストラクターとして使用する場合、つまりnew演算子を使用する場合、newキーワードを指定して呼び出すと、新しいメモリスペースが作成され、personインスタンスとしてマークされます。コンストラクターを実行すると、最初にオブジェクトが作成され、次にオブジェクトが作成されます。オブジェクトのプロトタイプは、コンストラクターのプロトタイププロパティをポイントし、実行コンテキストでこれをこのオブジェクトにポイントし、最後に関数全体を実行します。戻り値がオブジェクトでない場合は、新しく作成されたオブジェクトを返します。作成されたオブジェクトにはコンストラクター属性があります。本質は、オブジェクト参照型のインスタンスを作成してから、そのインスタンスを変数personに保存することです。したがって、instanceofを使用してタイプをチェックする場合、それはオブジェクトタイプとPersonタイプに属します。

　　　　上記の関数を通常の関数として使用する場合、つまりnew演算子を使用しない場合、属性とメソッドがウィンドウオブジェクトに追加されるため、window.sayHello（）は「xiaohong」を出力します。

　　　　長所と短所：コンストラクターによって作成されたオブジェクトは、上記のファクトリパターンの欠点を解決し、オブジェクトとコンストラクターの間の接続を確立するため、プロトタイプを通じてオブジェクトのタイプを識別できますが、このパターンは不要な関数オブジェクトを引き起こしますコンストラクターでの関数の定義はオブジェクトを定義することであるため、this.sayHello = new Function（console.log（this.name））を作成します。これにより、構築された各インスタンスにFunctionインスタンスと関数オブジェクトAllが含まれます。インスタンスは普遍的に使用できるため、メモリスペースが無駄になります。

　　（4）プロトタイプモード;

　　　　すべての関数にはプロトタイププロパティがあるため、このプロパティ値はオブジェクトです。このオブジェクトには、コンストラクターによって作成されたすべてのインスタンスで共有できるプロパティとメソッドが含まれているため、プロトタイプオブジェクトを使用してパブリックプロパティとメソッドを追加し、コードを実現できます。再利用。このモードは、コンストラクターと比較して、構築されたインスタンスでの関数オブジェクトの再利用の問題を解決しますが、このモードにも特定の問題があります。まず、パラメーターを渡してインスタンスのプロパティを初期化する方法がありません。、データタイプの値を参照する場合、すべてのインスタンスがオブジェクトを共有し、1つのインスタンスによって参照データタイプの値に加えられた変更は、他のインスタンスのタイプへの参照に影響します。例は次のとおりです。

        機能人（）{} 
        Person.prototype.name = 'xioming' 
        Person.prototype.sayHello =関数（）{
            にconsole.log（この.nameの）
        } 
        VARの人=新しい人（）
        person.sayHello（）//暁
        コンソール.log（Person.prototype.isPrototypeOf（person））// personオブジェクト内にPerson.prototypeへのポインターがあるため、trueです。つまり、personのプロトタイプはPersonを指します。

　　（5）コンストラクターとプロトタイプの組み合わせモード。

　　　　コンストラクターモードとプロトタイプモードを組み合わせることは、カスタムオブジェクトを作成する最も一般的な方法です。コンストラクターはインスタンスのプロパティを作成するために使用され、プロトタイプモードは共有プロパティとメソッドを作成するために使用されます。

　　　　 function Person（name、age）{
           this .name = name;
          this .age = age; 
        } 
        Person.prototype = {
          コンストラクター：Person、
          sayName：function （）{ 
            console.log（this .name）; 
          }、
        }; 
        var p = new Person（ "xiaozhang"、123 ）; 
        console.log（p.sayName（））; // xiaozhang

　　　　2つの方法を組み合わせて使用すると、2つのモードの利点は組み合わされますが、問題はコードのカプセル化が不十分なことです。

　　（6）動的プロトタイプモード。

　　　　動的プロトタイプモードは、プロトタイプメソッド割り当ての作成プロセスをコンストラクターの内部に移動することです。属性が存在するかどうかを判断することで、関数が呼び出されたときにプロトタイプオブジェクトを1回だけ割り当てる効果を実現できます。上記に非常に適しています。組み合わせモードはカプセル化されています。

        function Person（name、age）{
           this .name = name;
          this .age = age;
          if（typeof  this .sayHello！= "function" ）{ 
            Person.prototype.sayHello = function （）{ 
              console.log（ "hello" ）; 
            }; 
          } 
        }

　　　　これは判断によって実現され、関数が呼び出されたときにプロトタイプオブジェクトが割り当てられます。sayHello関数が存在しない場合にのみ、メソッドがプロトタイプに戻され、コンストラクターを呼び出す最初の試行が実行されます。

　　（7）寄生コンストラクタモード。

　　　　メソッドの例は次のとおりです。追加のメソッドを使用して特別な配列を作成する必要があるとします。

        function SpecialArray() {
          var arr = new Array();
          //添加值
          arr.push.apply(arr, arguments);
          //添加方法
          arr.toPipedString = function () {
            return this.join("|");
          };
          return arr;
        }
        var color = new SpecialArray(
          "red",
          "blue"
        );
        console.log(color.toPipedString()); //red|blue

　　　　在这个函数内部，首先创建了一个数组，然后push()方法（用构造函数接收到的所有参数）初始化了数组的值。随后，又给数组实例添加了一个toPipedString()方法，该方法返回以竖线分割的数组值。最后，将数组以函数值的形式返回。接着，我们调用了SpecialArray构造函数，向其中传入了用于初始化数组的值，此后调用了toPipedString()方法。但似乎返回的对象与构造函数或构造函数的原型属性之间没有关系；也就是说，构造函数返回的对象与在构造函数外部创建对象没有什么不同。为此，不能依赖instranceof操作符来确定对象类型。

总结

　　　　以上就是本文的全部内容，希望给读者带来些许的帮助和进步，方便的话点个关注，小白的成长之路会持续更新一些工作中常见的问题和技术点。

js--オブジェクトを作成する方法は？

おすすめ