6

次のコードを想像してください。

$.get( "ajax/getColorData.php", function( data ) {
  this.colorData = data;
});

「データ」の値は次のとおりです。

this.colorData = [
    {
        colorName: 'Red',
        colorIsInRainbow:true
    },
    {
        colorName: 'Orange',
        colorIsInRainbow: true
    },
    {
        colorName: 'Magenta',
        colorIsInRainbow: false
    }
];

質問1

ここで、データをダウンロードした後、配列内のすべてのエントリにメソッド「colorStartsWithR」を追加するとします。配列のすべてのメンバーで定義するのではなく、プロトタイプでこのメソッドを何らかの方法で定義できると「思います」。しかし、これらのオブジェクトは私が作成したものではなく、$.get によって返されたものであるため、それができるかどうかはわかりません。正しい方向に考えているかどうかはわかりません。

質問2

もう少し詳しく説明すると、配列のすべてのメンバーにプロパティを追加したい場合、具体的には次のようになります。

    {
        colorName: 'Magenta',
        colorIsInRainbow: false,
        userClickedThisColor:ko.observable()
    }

このようにして、(knockoutjs を介して) リストをバインドし、チェックボックスを含めることができます。この場合、各メンバーが独自の ko.observable プロパティを取得する必要があるため、プロトタイプが役立つかどうか疑問に思います。素早い本能は、次のようなことをすることです：

for (var i=0;i<this.colorData.length;i++)
{
 this.colorData[i].userClickedThisColor=ko.observable()
}

それは問題なく動作しますが、色のリストを取得する方法が複数あること、またはユーザーが新しい色インスタンスを作成できること、および上記で行ったカスタマイズがより複雑であると想像してください。上記の「アドオン」ロジックを複製する必要があります。よりスマートな方法はありますか？

強く型付けされた言語でほとんどの時間を費やしてきたので、これらのことは私には明らかではないことがあります。提案をありがとう...

-ベン

4

3 に答える 3

2

これらのオブジェクトには特別なプロトタイプがないため、メンバーを追加することはできません。これらは代替案だと思います：

1）各インスタンスにメンバーを追加します（気に入らないことはわかっていますが、オプションです）。私はこのオプションを選びます

2）メソッドを作成し、各オブジェクトをパラメーターとして渡すかthis、fn.call()

3) 追加されたメンバーで「クラス」を作成し、コンストラクターで元のオブジェクトを渡してそのインスタンスを作成します。理想的ではありませんが、そうしなければならないかもしれません。 

function Color(plainObj){
   this.colorName: plainObj.colorName;
   this.colorIsInRainbow: plainObj.colorIsInRainbow;

   //if you want all properties to be copied dynamically, uncomment the following:
   //for(var key in plainObj) this[key] = plainObj[key];                 

   this.userClickedThisColor = ko.observable()
   ...
}
Color.prototype.colorStartsWithR = function() {
    return this.colorName.charAt(0) == "R";
};

//etc

次に、それを適用するには

for(var i=0; i<colorData.length; i++){
   colorData[i] = new Color(colorData[i]); //Overwrites original colorData array
}

お役に立てれば。乾杯

于 2014-01-08T01:51:31.413 に答える
1

配列内のオブジェクトは、タイプのプレーン オブジェクトですObject。これらのオブジェクトのプロトタイプにメソッドを追加するには、次のObjectようにメソッドを型に追加する必要があります。

Object.prototype.colorStartsWithR = function() {
    return this.colorName.substr(0,1) == "R";
}

この場合はうまくいきますが、実際にはお勧めできません。より良い解決策は、配列内のオブジェクトを、追加できる独自のプロトタイプを持つ別のタイプのオブジェクトに変更するかcolorStartsWithR()、ユーティリティ関数を使用して名前が「R」で始まるかどうかをテストすることです。

以下に例を示します。

function colorObj(color, inRainbow) {
    this.colorName = color;
    this.colorIsInRainbow = inRainbow;
}

colorObj.prototype.colorStartsWithR = function() {
        return this.colorName.substr(0,1) == "R";
}

this.colorData = [
    new colorObj('Red', true),
    new colorObj('Orange, true),
    new colorObj('Magenta, false)
};

次に、次のことができます。

this.colorData[1].colorStartsWithR();

または、単なるユーティリティ関数:

var colorData = [
    {
        colorName: 'Red',
        colorIsInRainbow:true
    },
    {
        colorName: 'Orange',
        colorIsInRainbow: true
    },
    {
        colorName: 'Magenta',
        colorIsInRainbow: false
    }
];

function startsWithR(str) {
    return str.substr(0,1) == "R";

}

startsWithR(colorData[1].colorName);
于 2014-01-08T01:52:48.893 に答える