JavaScript: ฟังก์ชันส่งคืนวัตถุ


90

ฉันกำลังเรียนบทเรียน JavaScript / jQuery ที่ codecademy.com โดยปกติบทเรียนจะมีคำตอบหรือคำใบ้ แต่สำหรับบทเรียนนี้ไม่ได้ให้ความช่วยเหลือใด ๆ และฉันสับสนเล็กน้อยกับคำแนะนำ

มันบอกว่าจะทำให้ฟังก์ชัน makeGamePlayer ส่งคืนวัตถุด้วยปุ่มสามปุ่ม

//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 ส่วนใหญ่ฟังก์ชั่นมีทั้ง callable และ instantiable: พวกเขามีทั้ง[[โทร]]และ[[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ค่าจะเป็น global object ในโหมด sloppy หรือไม่ได้กำหนดในโหมดที่เข้มงวด

ในฐานะผู้สร้างคุณสามารถใช้ตัวnewดำเนินการเพื่อสร้างอินสแตนซ์ได้ ตัวดำเนินการนี้ใช้วิธีการภายใน[[Construct]] (มีเฉพาะในตัวสร้าง) ซึ่งทำสิ่งนี้:

  1. สร้างอ็อบเจ็กต์ใหม่ที่สืบทอดมาจากคอน.prototypeสตรัคเตอร์
  2. เรียกตัวสร้างที่ส่งผ่านวัตถุนี้ว่าthisค่า
  3. ส่งคืนค่าที่ตัวสร้างส่งคืนหากเป็นวัตถุหรือวัตถุที่สร้างในขั้นตอนที่ 1 มิฉะนั้น
var player = new GamePlayer("John Smith", 15, 3);

โค้ดด้านบนสร้างอินสแตนซ์ของ GamePlayerplayerและร้านค้าค่ากลับมาในตัวแปร ในกรณีนี้คุณอาจต้องการกำหนดฟังก์ชันดังนี้:

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

3
@PeeHaa คำแนะนำที่ดีนอกจากนี้หลักการตั้งชื่อทั่วไปเมื่อใช้ตัวสร้างก็จะเป็นnew GamePlayer()เช่นกัน
Matt Zeunert

@RobG ขอบคุณนั่นคือสิ่งที่เกิดขึ้นเมื่อฉันคัดลอกวางโค้ดโดยไม่ได้ดูมันอย่างลึกซึ้ง
Oriol

48

คุณสามารถทำได้โดยใช้วัตถุตามตัวอักษร :

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

3
สวัสดีคุณจะเข้าถึงคุณสมบัติการส่งคืนได้อย่างไรเมื่อฉันใช้ makeGamePlayer.name มันใช้ไม่ได้
iKamy

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 {}}) ()
Felipe Quirós

3

วิธีใหม่ล่าสุดในการดำเนินการกับ ES2016 JavaScript

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 ที่ฉันและดูเหมือนคนอื่นทำ
scrappedcola
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.