JavaScript: Funktion, die ein Objekt zurückgibt

88

Ich nehme einige JavaScript / jQuery-Lektionen bei codecademy.com. Normalerweise liefern die Lektionen Antworten oder Hinweise, aber für diese gibt es keine Hilfe und ich bin ein wenig verwirrt von den Anweisungen.

Die Funktion makeGamePlayer soll ein Objekt mit drei Schlüsseln zurückgeben.

//First, the object creator
function makeGamePlayer(name,totalScore,gamesPlayed) {
    //should return an object with three keys:
    // name
    // totalScore
    // gamesPlayed
}

Ich bin mir nicht sicher, ob ich das tun soll

//First, the object creator
function makeGamePlayer(name,totalScore,gamesPlayed) {
    //should return an object with three keys:
    // name
    // totalScore
    // gamesPlayed

         this.name =  name;
         this.totalScore = totalScore;
         this.gamesPlayed = gamesPlayed;
}

oder so ähnlich

 //First, the object creator
    function makeGamePlayer(name,totalScore,gamesPlayed) {
        //should return an object with three keys:
        // name
        // totalScore
        // gamesPlayed

         var obj = {
             this.name =  name;
             this.totalScore = totalScore;
             this.gamesPlayed = gamesPlayed;
          }
    }

Ich muss in der Lage sein, die Eigenschaften des Objekts nach seiner Erstellung zu ändern.

BrainLikeADullPencil
quelle

Antworten:

144

In JavaScript sind die meisten Funktionen sowohl aufrufbar als auch instanziierbar: Sie verfügen über interne Methoden [[Aufruf]] und [[Konstruieren]] .

Als aufrufbare Objekte können Sie sie in Klammern aufrufen und optional einige Argumente übergeben. Als Ergebnis des Aufrufs kann die Funktion einen Wert zurückgeben .

var player = makeGamePlayer("John Smith", 15, 3);

Der obige Code ruft die Funktion auf makeGamePlayerund speichert den zurückgegebenen Wert in der Variablen player. In diesem Fall möchten Sie die Funktion möglicherweise folgendermaßen definieren:

function makeGamePlayer(name, totalScore, gamesPlayed) {
  // Define desired object
  var obj = {
    name:  name,
    totalScore: totalScore,
    gamesPlayed: gamesPlayed
  };
  // Return it
  return obj;
}

Wenn Sie eine Funktion aufrufen, übergeben Sie außerdem ein zusätzliches Argument unter der Haube, das den Wert thisinnerhalb der Funktion bestimmt. Im obigen Fall makeGamePlayerist der thisWert , da er nicht als Methode aufgerufen wird, das globale Objekt im schlampigen Modus oder im strengen Modus undefiniert.

Als Konstruktoren können Sie den newOperator verwenden , um sie zu instanziieren. Dieser Operator verwendet die interne Methode [[Construct]] (nur in Konstruktoren verfügbar), die ungefähr Folgendes ausführt:

  1. Erstellt ein neues Objekt, das vom .prototypeKonstruktor erbt
  2. Ruft den Konstruktor auf, der dieses Objekt als thisWert übergibt
  3. Es gibt den vom Konstruktor zurückgegebenen Wert zurück, wenn es sich um ein Objekt handelt, oder das in Schritt 1 erstellte Objekt.
var player = new GamePlayer("John Smith", 15, 3);

Der obige Code erstellt eine Instanz von GamePlayerund speichert den zurückgegebenen Wert in der Variablen player. In diesem Fall möchten Sie die Funktion möglicherweise folgendermaßen definieren:

function GamePlayer(name,totalScore,gamesPlayed) {
  // `this` is the instance which is currently being created
  this.name =  name;
  this.totalScore = totalScore;
  this.gamesPlayed = gamesPlayed;
  // No need to return, but you can use `return this;` if you want
}

Konventionell beginnen Konstruktornamen mit einem Großbuchstaben.

Der Vorteil der Verwendung von Konstruktoren besteht darin, dass die Instanzen von erben GamePlayer.prototype. Anschließend können Sie dort Eigenschaften definieren und in allen Instanzen zur Verfügung stellen

Oriol
quelle
4
@OP Beachten Sie auch, dass newich vorschlagen würde, den Namen mit einem Großbuchstaben zu beginnen , wenn Sie ihn mit dem Schlüsselwort aufrufen : MakeGamePlayer.
PeeHaa
3
@PeeHaa Guter Rat, auch die typischere Namenskonvention bei Verwendung des Konstruktors wäre new GamePlayer().
Matt Zeunert
@RobG Danke, das passiert, wenn ich Code kopiere und einfüge, ohne ihn genau zu betrachten.
Oriol
47

Sie können es einfach so mit einem Objektliteral machen :

function makeGamePlayer(name,totalScore,gamesPlayed) {
    return {
        name: name,
        totalscore: totalScore,
        gamesPlayed: gamesPlayed
    };
}
PeeHaa
quelle
3
Hallo, wie können Sie auf die Rückgabeeigenschaften zugreifen? Wenn ich makeGamePlayer.name verwende, funktioniert es nicht
iKamy
1
var player1 = makeGamePlayer ("Bobby Fischer", 15, 5); player1.name;
Mrturtle
5

Beide Stile würden mit einem Hauch von Optimierung funktionieren.

Die erste Methode verwendet einen Javascript-Konstruktor, der wie die meisten Dinge Vor- und Nachteile hat.

 // By convention, constructors start with an upper case letter
function MakePerson(name,age) {
  // The magic variable 'this' is set by the Javascript engine and points to a newly created object that is ours.
  this.name = name;
  this.age = age;
  this.occupation = "Hobo";
}
var jeremy = new MakePerson("Jeremy", 800);

Auf der anderen Seite heißt Ihre andere Methode "Revealing Closure Pattern", wenn ich mich richtig erinnere.

function makePerson(name2, age2) {
  var name = name2;
  var age = age2;

  return {
    name: name,
    age: age
  };
}
Jeremy J Starcher
quelle
Wird als "Enthüllendes Modulmuster" bezeichnet. Es wird jedoch normalerweise in einen privaten Abschluss (function () {return {}}) () verpackt
Felipe Quirós
3

Der neueste Weg, dies mit ES2016 JavaScript zu tun

let makeGamePlayer = (name, totalScore, gamesPlayed) => ({
    name,
    totalScore,
    gamesPlayed
})
rauben
quelle
2

Ich würde diese Anweisungen so verstehen:

  function makeGamePlayer(name,totalScore,gamesPlayed) {
        //should return an object with three keys:
        // name
        // totalScore
        // gamesPlayed

         var obj = {  //note you don't use = in an object definition
             "name": name,
             "totalScore": totalScore,
             "gamesPlayed": gamesPlayed
          }
         return obj;
    }
verschrottete Cola
quelle
1
Warum haben Sie Semikolons im Objekt?
Alex G
@AlexG netter Fang, kann nicht glauben, dass es in den 4 Jahren, seit ich diese Antwort zum ersten Mal gepostet habe, niemand anderes getan hat. Es war zweifellos ein schlechter Job zum Ausschneiden und Einfügen des ursprünglichen Objekts des OP, den ich und es wie einige andere gemacht haben.
scrappedcola