あなたはどのようなスタイルで「クラス」を作っていますか？

StackOverflow https://stackoverflow.com/questions/6499

  •  08-06-2019
  •  | 
  •  

質問

JavaScript でクラスのような動作を実現するにはいくつかの方法がありますが、最も一般的なのは次のようなプロトタイプベースのもののようです。

function Vector(x, y, x) {
    this.x = x;
    this.y = y;
    this.z = z;
    return this;
}

Vector.prototype.length = function () { return Math.sqrt(this.x * this.x ... ); }

および同様のクロージャベースのアプローチ

function Vector(x, y, z) {
    this.length = function() { return Math.sqrt(x * x + ...); }
}

さまざまな理由から、後者のほうが速いのですが、私はプロトタイプ版を見たことがあり (頻繁に書いています)、他の人が何をしているのかに興味がありました。

役に立ちましたか？

解決

クラスのすべてのインスタンスがメソッドの同じコピーを共有するため、プロトタイプに関数を割り当てる方が適切です (パブリック メソッドの場合)。2 番目の例のようにコンストラクター内で関数を割り当てる場合、新しいインスタンスを作成するたびに、コンストラクターは length 関数の新しいコピーを作成し、その 1 つのインスタンスにのみ割り当てます。

ただし、この後者のテクニックは、次のような場合に役立ちます。 欲しい 各コピーは独自のコピーを持ちます。その主な用途は、コンストラクター内で宣言され、クロージャ メカニズムを介して継承されたプライベート変数にアクセスできるプライベート/特権メソッドを実行することです。

ダグラス・クロックフォードは良いところを持っています まとめ.

他のヒント

プロトタイプに対するオブジェクト リテラル アプローチもあります。

var Vector = function(){};

Vector.prototype = {
  init:function(x,y,z) {
    this.x = x;
    this.y = y;
    this.z = z;
  },
  length:function() {
    return Math.sqrt(x * x + ...);
  }
};

var v1 = new Vector();
v1.init(1,2,3);

幸いにも使えるようになりました プロトタイプ.js, 、いくつかの優れたラッパーを提供します。したがって、次のようにすることができます。

var Person = Class.create({
    initialize: function(name) {
        this.name = name;
    },
    say: function(message) {
        return this.name + ': ' + message;
    }
});

Prototype.js ドキュメンテーション：クラスと継承の定義

まあ、これについては専門的な意見はありません。私は通常、管理者にとってコードが単純になるという理由だけで、クロージャ ベースのアプローチを使用することになります。しかし、私はコード行がたくさんあるメソッドのプロトタイプを使用していることに気づきました。

次の選択肢もあります。

function Vector(x, y, z) {
  function length() {
    return Math.sqrt(x * x + ...);
  }
}

これはおそらく例 2 と同じくらい遅いですが、Java/C# に似ており、もう少し明示的です。

私は使用の大ファンです ジョン・レシグの図書館 このために。軽量でわかりやすく、「通常の」オブジェクト指向スタイルに慣れている人であれば、すでに使い方がわかります。

JavaScriptにはクラスがありません。

ただしオブジェクトはあります。JavaScript でオブジェクトを作成するのにクラスは必要ありません。これには、 new で呼び出すことができるコンストラクター関数があります。たとえば、次のようになります。

var james = new Person();

以下を使用して、クラスのような動作をシミュレートできます。

プロトタイプの例:

function Car (type) {
    this.type = type;
    this.color = "red";
}

Car.prototype.getInfo = function() {
    return this.color + ' ' + this.type + ' car';
};

オブジェクトリテラルの例

var car = {
    type: "honda",
    color: "red",
    getInfo: function () {
        return this.color + ' ' + this.type + ' car';
    }
}
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top