Javascript: Add-Methode für alle Objekte im Array

Question

Stellen Sie sich den folgenden Code ein:

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

nun vorstellen, dass der Wert von 'Daten' ist:

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

Frage 1

Nachdem ich nun die Daten heruntergeladen habe, möchte ich sagen, dass ich jedem Eintrag im Array eine Methode "colorStartsWithR" hinzufügen möchte. Ich "denke" das, anstatt es auf jedem einzelnen Mitglied des Arrays zu definieren, könnte ich irgendwie diese Methode auf dem Prototyp definieren. Aber ich bin mir nicht sicher, ob ich das tun kann, weil diese Objekte nicht von mir erstellt wurden, sondern von $ .get zurückgegeben wurden, daher ist es für mich nicht klar, ob ich in die richtige Richtung denke.

Frage 2

Und ein bisschen weiter zu nehmen, was passiert, wenn ich eine Eigenschaft an jedes Mitglied des Arrays, speziell hinzufügen wollte:

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

Auf diese Weise kann ich binden (über knockoutjs) die Liste und ein Kontrollkästchen enthalten. In diesem Fall stelle ich die Frage, ob der Prototyp nützlich sein könnte oder nicht, da jedes Mitglied eine eigene koobservable Eigenschaft erhalten sollte. Ein kurzer Instinkt ist wie etwas zu tun:

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

und das funktioniert gut, aber vorstellen, dass es mehr als einen Weg, um eine Liste der Farben abzurufen, oder dass ein Benutzer neue Farb Instanzen erstellen können, und dass die Anpassung, die ich oben gemacht habe, ist komplizierter. Ich müsste jetzt die obige "Add-on" -Logik duplizieren. Gibt es einen klügeren Weg? in stark typisierte Sprachen die meiste Zeit verbracht, manchmal diese Dinge sind nicht so offensichtlich für mich

hat. Vielen Dank für alle Anregungen ...

-Ben

Answer 1

Nun, diese Objekte haben keinen speziellen Prototyp, so dass Sie nicht Mitglieder hinzufügen können. Ich denke, das sind die Alternativen:

1) Fügen Sie die Mitglieder zu jeder Instanz (Ich weiß, Sie mögen es nicht, aber es ist eine Option). Ich würde für diese Option gehen

2) Erstellen Sie einfach eine Methode, und jedes Objekt als Parameter übergeben oder als this mit fn.call()

3) Erstellen Sie eine „Klasse“ mit den zusätzlichen Mitgliedern, dann erstellen Instanzen Er übergibt das ursprüngliche Objekt im Konstruktor. Nicht ideal, aber vielleicht musst du es tun.

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 

Dann wird das hilft

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

Hoffnung anzuwenden. Prost

Answer 2

Die Objekte in Ihrem Array sind einfache Objekte des Typs Object.So fügen Sie Methoden zum Prototyp dieser Objekte, dann würden Sie die Methoden zur Object Art wie diese hinzufügen:

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

Das wäre in diesem Fall arbeiten, aber es ist wirklich nicht zu empfehlen. Die besseren Lösungen sind, entweder die Objekte im Array zu einem anderen Objekttyp zu machen, der seinen eigenen Prototyp hat, zu dem man colorStartsWithR() hinzufügen kann ODER einfach eine Dienstprogrammfunktion verwenden, um einen Namen zu testen, um zu sehen, ob er mit "R" beginnt .

Hier sind einige Beispiele:

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) 
}; 

Dann könnten Sie tun:

this.colorData[1].colorStartsWithR(); 

---

Oder nur eine Hilfsfunktion:

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); 

Answer 3

Eine Möglichkeit ist, zu erstellen ein Wrapper-Objekt und füge die neue Methode dem w hinzu Rappern Prototyp:

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

function ColorDataWrapper(colorData){ 
    this.colorData = colorData; 
} 

ColorDataWrapper.prototype.colorStartsWithR = function(){ 
    return this.colorData.colorName.substring(0,1) == "R"; 
}; 

for(var i = 0; i < colorData.length; i++){ 
    colorData[i] = new ColorDataWrapper(colorData[i]); 
} 

alert(colorData[0].colorStartsWithR()); 
alert(colorData[1].colorStartsWithR()); 

JS Fiddle:http://jsfiddle.net/ywrK6/1/

Eine weitere Möglichkeit ist nur eine Funktion zu erstellen, die das Objekt als Argument akzeptiert:

function colorStartsWithR(obj){ 
    return obj.colorData.colorName.substring(0,1) == "R"; 
}