1

JavaScript の関数とモジュールをよりよく理解しようとしています。具体的には、独自のデータ型を作成する最良の方法を理解しようとしています。以下に、Rectangle1.js と Rectangle2.js の 2 つのファイルのリストと、これをよりよく理解するために作成したサンプル出力を示します。

コードを構造化して独自のデータ型を作成するには、これらのうちどれ (またはその他の方法) が最適な方法であるかを理解するために、コミュニティの助けが必要です。

Rectangle1.js

function Rectangle(x,y,w,h) {
  width = w;
  height = h;

  this.area1 = function() {
    return width*height;
  }
}

Rectangle.prototype.area2 = function() {
  return width * height;
};

Rectangle.area3 = function() {
  return width * height;
}

exports.Rectangle = Rectangle;

Rectangle2.js

var RECTANGLE = (function(my) {
  function init(x,y,w,h) {
    this.w = w;
    this.h = h;
  }

  function area() {
    return this.w * this.h;
  }

  my.init = init;
  my.area = area;
  return my;
})(RECTANGLE || {});

exports.RECTANGLE = RECTANGLE;

サンプル相互作用

var r2 = require('Rectangle2.js');
r2.RECTANGLE.init(1,2,3,4);
r2.RECTANGLE // ...can see the private properties
r2.RECTANGLE.area() // returns 12

var r1 = require('Rectangle1.js');
r1 // shows area3 in r1
var rect = new r1.Rectangle(1,2,3,4);
rect // shows area1 in rect
rect.area1() // visible in methods, spits out 12
rect.area2() // not visible in methods, spits out 12
r1.Rectangle.area3() // not visible in rect, spits out 12
4

1 に答える 1

1

JavaScript でオブジェクトを構造化する好ましい方法は、Rectangle1.js で記述した方法に近いですが、いくつか問題があります。

まず、Rectangle(x,y,w,h)コンストラクター関数で引数を受け取る場合、それらをインスタンス変数に割り当てるのではなく、やや安全でないグローバル スコープに割り当てます。これRectangle.area3()が同じ結果を返す理由を説明しています。キーワードを使用すると、thisインスタンス変数を割り当ててアクセスできます。他のすべてを同じに保つと、次のようにコンストラクターを定義する必要があります ( の使用に注意してくださいthis.) :

function Rectangle(x,y,w,h) {

  this.width = w;
  this.height = h;

  this.area1 = function() {
    return this.width*this.height;
  }
}

Rectangle.prototype.area2 = function() {
  return this.width * this.height;
};

また、理想的には、同じオブジェクトのすべてのインスタンスで同じように再利用される関数を定義する場合は、コンストラクター関数でRectangle.prototypeはなくon で定義することをお勧めします。this最初のケースでは、1 つの Function オブジェクトのみが作成され、 のすべてのインスタンスで共有されますRectangle。後者では、 のインスタンスごとに新しいものが作成されますRectangle。

Node.js などの CommonJS のようなモジュールでコードを整理できる JavaScript プラットフォームをターゲットにしていることを考えると、モジュールの構造化はあなたが行った方法で問題ありません。

于 2013-01-12T04:55:22.110 に答える