面向对象的JavaScript-001

 1 <script>
 2 // 面向对象
 3     function Question(theQuestion, theChoices, theCorrectAnswer) {
 4         // Initialize the instance properties?
 5         this.question = theQuestion;
 6         this.choices = theChoices;
 7         this.correctAnswer = theCorrectAnswer;
 8         this.userAnswer = "";
 9         // private properties: these cannot be changed by instances?
10         var newDate = new Date(),
11         // Constant variable: available to all instances through the instance method below. This is also a private property.?
12         QUIZ_CREATED_DATE = newDate.toLocaleDateString();
13         // This is the only way to access the private QUIZ_CREATED_DATE variable ?
14         // This is an example of a privilege method: it can access private properties and it can be called publicly?
15         this.getQuizDate = function () {
16             return QUIZ_CREATED_DATE;
17         };
18         // A confirmation message that the question was created?
19         console.log("Quiz Created On: " + this.getQuizDate());
20     }
21 
22     //Add Prototype Methods to The Question Object
23      // Define the prototype methods that will be inherited?
24     Question.prototype.getCorrectAnswer = function () {
25         return  this.correctAnswer;
26     };
27     
28     Question.prototype.getUserAnswer = function () {
29         return this.userAnswer;
30     };
31     
32     Question.prototype.displayQuestion = function () {
33         var questionToDisplay = "<div class=‘question‘>" + this.question + "</div><ul>";
34             choiceCounter = 0;
35             this.choices.forEach(function (eachChoice)  {
36             questionToDisplay += ‘<li><input type="radio" name="choice" value="‘ + choiceCounter + ‘">‘ + eachChoice + ‘</li>‘;
37             choiceCounter++;
38         });
39         questionToDisplay += "</ul>";
40     
41         console.log (questionToDisplay);
42     }; 
43 
44     function inheritPrototype(childObject, parentObject) {
45        // As discussed above, we use the Crockford’s method to copy the properties and methods from the parentObject onto the childObject?
46     // So the copyOfParent object now has everything the parentObject has ?
47         var copyOfParent = Object.create(parentObject.prototype);
48     
49         //Then we set the constructor of this new object to point to the childObject.?
50     // Why do we manually set the copyOfParent constructor here, see the explanation immediately following this code block.?
51         copyOfParent.constructor = childObject;
52     
53         // Then we set the childObject prototype to copyOfParent, so that the childObject can in turn inherit everything from copyOfParent (from parentObject)?
54        childObject.prototype = copyOfParent;
55     }
56     // Child Questions (Sub Classes of the Question object)
57     // First, a Multiple Choice Question:
58     // Create the MultipleChoiceQuestion?
59     function MultipleChoiceQuestion(theQuestion, theChoices, theCorrectAnswer){
60     // For MultipleChoiceQuestion to properly inherit from Question, here inside the MultipleChoiceQuestion constructor, we have to explicitly call the Question constructor?
61     // passing MultipleChoiceQuestion as the this object, and the parameters we want to use in the Question constructor:?
62         Question.call(this, theQuestion, theChoices, theCorrectAnswer);
63     };
64     // inherit the methods and properties from Question?
65     inheritPrototype(MultipleChoiceQuestion, Question);
66 
67     // A Drag and Drop Question
68     // Create the DragDropQuestion?
69     function DragDropQuestion(theQuestion, theChoices, theCorrectAnswer) {
70         Question.call(this, theQuestion, theChoices, theCorrectAnswer);
71     }
72     
73     // inherit the methods and properties from Question?
74     inheritPrototype(DragDropQuestion, Question);
75 
76     // Overriding Methods
77     DragDropQuestion.prototype.displayQuestion = function () {
78         // Just return the question. Drag and Drop implementation detail is beyond this article?
79         console.log(this.question);
80     };
81 
82     // Initialize some questions and add them to an array?
83     var allQuestions = [
84     new MultipleChoiceQuestion("Who is Prime Minister of England?", ["Obama", "Blair", "Brown", "Cameron"], 3),
85        
86     new MultipleChoiceQuestion("What is the Capital of Brazil?", ["São Paulo", "Rio de Janeiro", "Brasília"], 2),
87        
88     new DragDropQuestion("Drag the correct City to the world map.", ["Washington, DC", "Rio de Janeiro", "Stockholm"], 0)
89     ];
90     
91     // Display all the questions?
92     allQuestions.forEach(function (eachQuestion)  {
93         eachQuestion.displayQuestion();
94     });
95 </script>