ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScriptオブジェクトの定義方法にはどのようなものがありますか?

JavaScriptオブジェクトの定義方法にはどのようなものがありますか?

coldplay.xixi
coldplay.xixiオリジナル
2021-03-31 17:41:422779ブラウズ

JavaScript オブジェクトの定義方法: 1. ファクトリ メソッド、2. コンストラクタ メソッド、3. プロトタイプ メソッド、4. 混合コンストラクタまたはプロトタイプ メソッド、5. 動的プロトタイプ メソッド、6. 混合ファクトリ メソッド。

JavaScriptオブジェクトの定義方法にはどのようなものがありますか?

このチュートリアルの動作環境: Windows 7 システム、JavaScript バージョン 1.8.5、DELL G3 コンピューター。

JavaScript オブジェクトの定義メソッド:

1. ファクトリ メソッド

  function Car(){
   var ocar = new Object;
   ocar.color = "blue";
   ocar.doors = 4;
   ocar.showColor = function(){
    document.write(this.color)
   };
   return ocar;
  }
  var car1 = Car();
  var car2 = Car();

この関数が呼び出されると、新しいオブジェクトが作成されます。が作成され、すべてのプロパティとメソッドを与えます。この関数を使用して、まったく同じプロパティを持つ 2 つのオブジェクトを作成します。もちろん、妹はパラメータを渡すことでこのメソッドを変更できます。

  function Car(color,door){
   var ocar = new Object;
   ocar.color = color;
   ocar.doors = door;
   ocar.showColor = function(){
    document.write(this.color)
   };
   return ocar;
  }
  var car1 = Car("red",4);
  var car2 = Car("blue",4);
  car1.showColor()  //output:"red"
  car2.showColor()  //output:"blue"

関数にさまざまなパラメータを渡すことで、さまざまな値を持つオブジェクトを取得できるようになりました。

前の例では、関数 Car() が呼び出されるたびに showcolor() を作成する必要があります。これは、各オブジェクトが独自の showcolor() メソッドを持つことを意味します。

しかし、実際には、各オブジェクト バケットは同じ機能を共有します。

ただし、関数の外でメソッドを定義し、関数の属性をそのメソッドに指すようにすることもできます。

  function showColor(){
   alert(this.color);
  }
  function Car(){
   var ocar = new Object();
   ocar.color = color;
   ocar.doors = door;
   ocar.showColor = showColor;
   return ocar;
  }

しかし、これは関数メソッドのようには見えません。

2. コンストラクター メソッド

以下に示すように、コンストラクター メソッドはファクトリ メソッドと同じくらい単純です:

  function Car(color,door){
   this.color = color;
   this.doors = door;
   this.showColor = function(){
    alert(this.color)
   };
  }
  var car1 = new Car("red",4);
  var car2 = new Car("blue",4);

メソッドは関数内にオブジェクトが作成されないため、this キーワードが使用されます。コンストラクターが呼び出されたときにオブジェクトが作成されており、関数内でオブジェクトのプロパティにアクセスするにはこれのみを使用できるためです。

new を使用してオブジェクトを作成すると、次のようになります。しかし、それは工場でのアプローチと同じです。各呼び出しでは、オブジェクトに独自のメソッドが作成されます。

3. プロトタイプ メソッド

このメソッドは、オブジェクトのプロトタイプ属性を使用します。まず、空の関数を使用してクラス名が作成され、次にすべてのプロパティとメソッドにプロトタイプ属性が割り当てられます。

  function Car(){
  }
  Car.prototype.color = "red";
  Car.prototype.doors = 4;
  Car.prototype.showColor = function(){
   alert(this.color);
  }
  var car1 = new Car();
  var car2 = new Car();

このコードでは、最初に空の関数が定義され、次にオブジェクトのプロパティがプロトタイプ属性を通じて定義されます。この関数が呼び出されると、プロトタイプのすべてのプロパティが作成されるオブジェクトにすぐに割り当てられます。この関数のすべてのオブジェクトは showColor() へのポインタを格納し、構文的にはすべて同じオブジェクトに属しているように見えます。

ただし、この関数にはパラメータがないため、パラメータを渡してプロパティを初期化することはできません。オブジェクトの作成後にプロパティのデフォルト値を変更する必要があります。

プロトタイプ メソッドに関する非常に深刻な問題は、プロパティが配列などのオブジェクトを指している場合です。

  function Car(){
  }
  Car.prototype.color = "red";
  Car.prototype.doors = 4;
  Car.prototype.arr = new Array("a","b");
  Car.prototype.showColor = function(){
   alert(this.color);
  }
  var car1 = new Car();
  var car2 = new Car();
  car1.arr.push("cc");
  alert(car1.arr);  //output:aa,bb,cc
  alert(car2.arr);  //output:aa,bb,cc

配列の参照値により、Car の 2 つのオブジェクトは同じ配列を指すため、値が car1 に追加されると、car2 にも表示されます。

4. 混合コンストラクター/プロトタイプ メソッド

Union は、コンストラクター/プロトタイプ メソッドを使用して、他のプログラミング言語と同様にオブジェクトを作成します。オブジェクトを作成し、プロトタイプを使用してオブジェクトのメソッドを定義します。

  function Car(color,door){
   this.color = color;
   this.doors = door;
   this.arr = new Array("aa","bb");
  }
  Car.prototype.showColor(){
   alert(this.color);
  }
  var car1 = new Car("red",4);
  var car2 = new Car("blue",4);
  car1.arr.push("cc");
  alert(car1.arr);  //output:aa,bb,cc
  alert(car2.arr);  //output:aa,bb

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

動的プロトタイプ メソッドの原理は、コンストラクター/プロトタイプ混合メソッドの原理と似ています。唯一の違いは、オブジェクト メソッドが割り当てられる場所です。

  function Car(color,door){
   this.color = color;
   this.doors = door;
   this.arr = new Array("aa","bb");
   if(typeof Car._initialized == "undefined"){
    Car.prototype.showColor = function(){
     alert(this.color);
    };
    Car._initialized = true;
   }
  }

動的プロトタイプ メソッドは、フラグを使用して、メソッドがプロトタイプに割り当てられているかどうかを判断します。これにより、メソッドが 1 回だけ作成されることが保証されます

6. 混合ファクトリ メソッド

その目的は、偽のコンストラクターを作成し、別のオブジェクトの新しいインスタンスのみを返すことです。

  function Car(){
   var ocar = new Object();
   ocar.color = "red";
   ocar.doors = 4;
   ocar.showColor = function(){
    alert(this.color)
   };
   return ocar;
  }

ファクトリ メソッドとの違いは、このメソッドでは new 演算子が使用されることです。

上記はオブジェクトを作成するためのすべてのメソッドです。現在最も広く使用されている方法は、コンストラクターとプロトタイプの混合方法ですが、動的プロトタイプ方法も非常に人気があります。機能的にはコンストラクター/プロトタイプのアプローチと同等です。

関連する無料学習の推奨事項: JavaScript ビデオ チュートリアル

以上がJavaScriptオブジェクトの定義方法にはどのようなものがありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。