Javascriptでのクラス作成とオブジェクトの詳細説明-jsチュートリアル-php.cn

Javascriptでのクラス作成とオブジェクトの詳細説明

黄舟

リリース： 2017-05-31 10:05:04

オリジナル

1153 人が閲覧しました

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

reference

変数に、人は作成されたオブジェクトを参照できますが、まだ完璧ではありません。毎回オブジェクトを作成し、そのオブジェクトを使用してshow()メソッド、新しい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 クラスの

static

メソッドと同様に、すべてのオブジェクトは同じ静的メソッドを使用します。答えは「はい」です。次のステップを参照してください:

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 で変更された変数やメソッドに相当します。これらは単一のオブジェクトではなく、クラス全体に属します。、すべてのオブジェクトが共有されます。

以上がJavascriptでのクラス作成とオブジェクトの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。