JavaScript:オブジェクトを返す関数


90

codecademy.comでJavaScript / jQueryのレッスンを受けています。通常、レッスンは答えやヒントを提供しますが、これについては何の助けにもならず、私は指示に少し混乱しています。

関数makeGamePlayerが3つのキーを持つオブジェクトを返すようにすることを示しています。

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

私はこれをすべきかどうかわかりません

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

またはこのようなもの

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

オブジェクトの作成後に、オブジェクトのプロパティを変更できる必要があります。

回答:


145

JavaScriptでは、ほとんどの関数は呼び出し可能でインスタンス化可能です。[[Call]][[Construct]]の両方の内部メソッドがあります。

呼び出し可能なオブジェクトとして、括弧を使用してそれらを呼び出すことができ、オプションでいくつかの引数を渡すことができます。呼び出しの結果として、関数は返すことができます

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

上記のコードは関数makeGamePlayerを呼び出し、戻り値を変数に格納しますplayer。この場合、次のように関数を定義することをお勧めします。

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

さらに、関数を呼び出すときは、関数this内の値を決定する追加の引数も内部で渡します。上記の場合、makeGamePlayerはメソッドとして呼び出されないため、this値はsloppyモードではグローバルオブジェクトになり、strictモードではundefinedになります。

コンストラクターとして、new演算子を使用してそれらをインスタンス化できます。この演算子は、[[Construct]]内部メソッド(コンストラクターでのみ使用可能)を使用します。これは、次のようなことを行います。

  1. .prototypeコンストラクターのを継承する新しいオブジェクトを作成します
  2. このオブジェクトをthis値として渡すコンストラクターを呼び出します
  3. オブジェクトの場合はコンストラクターから返された値を返し、それ以外の場合は手順1で作成したオブジェクトを返します。
var player = new GamePlayer("John Smith", 15, 3);

上記のコードは、のインスタンスを作成しGamePlayer、戻り値を変数に格納しますplayer。この場合、次のように関数を定義することをお勧めします。

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
}

慣例により、コンストラクター名は大文字で始まります。

コンストラクターを使用する利点は、インスタンスがから継承することですGamePlayer.prototype。次に、そこでプロパティを定義して、すべてのインスタンスで使用できるようにすることができます


4
@OPは、newキーワードを使用して呼び出す場合は、名前を大文字で始めることをお勧めしますMakeGamePlayer
PeeHaa 2012

3
@PeeHaa良いアドバイスです。また、コンストラクターを使用する場合のより一般的な命名規則はですnew GamePlayer()
Matt Zeunert 2012

@RobGありがとう、コードを深く見ずにコピーアンドペーストすると、それが起こります。
オリオール2012

48

オブジェクトリテラルを使用して、このように簡単に行うことができます

function makeGamePlayer(name,totalScore,gamesPlayed) {
    return {
        name: name,
        totalscore: totalScore,
        gamesPlayed: gamesPlayed
    };
}

3
こんにちは、リターンプロパティにアクセスするにはどうすればよいですか。makeGamePlayer.nameを使用すると機能しません
iKamy 2018

1
var player1 = makeGamePlayer( "Bobby Fischer"、15、5); player1.name;
mrturtle

5

微調整を加えるだけで、どちらのスタイルも機能します。

最初のメソッドはJavascriptコンストラクターを使用します。これは、ほとんどのものと同様に長所と短所があります。

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

一方、私が正しく思い出せば、あなたの他の方法は「閉鎖パターンを明らかにする」と呼ばれます。

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

  return {
    name: name,
    age: age
  };
}

「モジュールパターンの公開」と呼ばれますが、通常はプライベートクロージャにラップされます(function(){return {}})()
FelipeQuirós19年

3

ES2016JavaScriptでこれを行う最新の方法

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

2

私はそれらの指示を次のように解釈します:

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

1
オブジェクトの中にセミコロンがあるのはなぜですか?
Alex G

@AlexGいいキャッチ、私がこの回答を最初に投稿してから4年間で誰もやったことが信じられない。私と他の何人かが作ったように見えるのは、間違いなくOPの元のオブジェクトの悪いカットアンドペーストの仕事でした。
スクラップ
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.