JavaScript でクラスとオブジェクトを作成する (グラフィック チュートリアル)

JavaScript を使用してクラスとオブジェクトを作成する方法は数多くあります。1. オリジナルの作成方法、2. ファクトリ メソッド パターン、3. コンストラクター メソッド パターン、4. 動的プロトタイプ メソッド。以下に例を詳しく見てみましょう

次に、JavaScript でクラスとオブジェクトを作成するいくつかの方法をまとめます:

1. オリジナルの作成方法:

<script type="text/javascript">
  var person = new Object();
  person.name="Amy";
  person.sex="Woman";
  person.show=function(){
    document.write("name is: "+this.name+" ; sex is:"+this.sex);
  }
  person.show(); 
</script>

オリジナルの作成方法は、オブジェクトに慣れている人にとっては受け入れがたいものです。このカプセル化は、「オブジェクト名」+「.」の形式で実行されます。これは、オブジェクト名に続く属性とメソッドが所有されるものであることを意味します。このオブジェクト (例: person ) は、age 属性を追加するなど、引き続きメソッドと属性を追加できます。この作成方法により、Java プログラミングに慣れることができます。不快。元の作成メソッドをさらに「カプセル化」できます。次のステップを参照してください:

2. ファクトリ メソッド パターン:

 <script type="text/javascript">
   function personFactory(name,age,sex){
     var ob=new Object();
     ob.name=name;
     ob.age=age;
     ob.sex=sex;
     ob.show=function(){
       document.write(ob.name+" "+ob.age+" "+ob.sex);
     }
     return ob;
   }
   var person=personFactory("Amy",21,"Woman");
   person.show();
 </script>

ファクトリ メソッド パターンは、元の作成メソッドをカプセル化します。 person 参照変数を追加すると、person は作成されたオブジェクトを参照できますが、これは完全ではありません。オブジェクトを作成し、そのオブジェクトを使用して show() メソッドを呼び出すたびに、新しい show() 関数が作成されます。最適化方法は、次のように show をファクトリの外に置くことです:

 <script type="text/javascript">
   function show(){
     document.write(this.name+" "+this.age+" "+this.sex);
   }
   function personFactory(name,age,sex){
     var ob=new Object();
     ob.name=name;
     ob.age=age;
     ob.sex=sex;
     ob.show=show;
     return ob;
   }
   var person=personFactory("Amy",22,"Woman");
   person.show();
 </script>

機能的に言​​えば、上記のコードは関数の再利用の問題を解決しますが、プレゼンテーション方法は人々がよく知っているオブジェクトを作成するようなものではありません。 Java ではまだ不快感を感じます。次のステップを参照してください:

3. コンストラクター パターン:

 <script type="text/javascript">
   function person(name,age,sex){
     this.name=name;
     this.age=age;
     this.sex=sex;
     this.show=function(){
       document.write(this.name+" "+this.age+" "+this.sex);
       document.write("<br>");
     }
   }
   var per=new person("Amy",22,"Woman");
   per.show();
 </script>

上記のコードの作成方法は、Java のクラスとオブジェクトの作成方法とほぼ同じであり、クラスの属性とメソッドをカプセル化して使用します。 new キーワードを使用してオブジェクトを作成し、返します。これは Java でクラスとオブジェクトを作成するプロセスではありませんか? はい、これはこのプロセスですが、この方法で作成されたオブジェクトが show メソッドを呼び出す場合、最適化することもできます。 show 関数もすぐに作成できますが、すべてのオブジェクトに共通のメソッドはどうでしょうか? Java クラスの静的メソッドと同様に、すべてのオブジェクトは同じ静的メソッドを使用します。答えは「はい」です。次のステップを参照してください:

4. 動的プロトタイプメソッド:

 <script type="text/javascript">
   function Person(name,age,sex){
     this.name=name;
     this.age=age;
     this.sex=sex;
     if(typeof Person.tag == "undefined"){
       Person.prototype.show=function(){
         document.write(this.name+" "+this.age+" "+this.sex);
         document.write("<br>");
       }
       Person.tag=true;
     }
   }
   var per=new Person("Peter",22,"Man");
   per.show();
 </script>

ここでは、new でオブジェクトが作成されると、上から順に Person 関数ブロック内の if 判定ステートメントが実行されます。下、タグ変数から始まります もちろん定義されていないので、if 文ブロックの内容が実行されます:

Person.prototype.show=function(){
 document.write(this.name+" "+this.age+" "+this.sex);
 document.write("<br>");
 }

この内容の意味は、 Person クラスに属する show メソッドを作成することです。クラス メソッドは、Java の静的変更メソッドに相当します。これは単一オブジェクトのメソッドではないため、すべてのオブジェクトが同じメソッドを呼び出すことができます。この方法では、独自の show 関数を毎回作成する必要はありません。別のオブジェクトがメソッドを呼び出すと、スペースと時間が節約されます。ここで説明しますと、「クラス名.prototype.property/method」メソッドで構築されるプロパティやメソッドは、Java の static で変更された変数やメソッドに相当し、単一のオブジェクトではなく、クラス全体に属します。 、すべてのオブジェクトが共有されます。

上記は私があなたのためにまとめたものです。

関連記事:

JSでよく起こるバグやエラー

VueJsコンポーネントにおける親子相互通信方法のまとめ

JSのクロスドメインPOST実装手順を詳しく解説

以上がJavaScript でクラスとオブジェクトを作成する (グラフィック チュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。