面向对象的JavaScript-001

一、

Question是父类，MultipleChoiceQuestion和DragDropQuestion是子类

二、

1.

<script>
// 面向对象
    function Question(theQuestion, theChoices, theCorrectAnswer) {
        // Initialize the instance properties​
        this.question = theQuestion;
        this.choices = theChoices;
        this.correctAnswer = theCorrectAnswer;
        this.userAnswer = "";
        // private properties: these cannot be changed by instances​
        var newDate = new Date(),
        // Constant variable: available to all instances through the instance method below. This is also a private property.​
        QUIZ_CREATED_DATE = newDate.toLocaleDateString();
        // This is the only way to access the private QUIZ_CREATED_DATE variable ​
        // This is an example of a privilege method: it can access private properties and it can be called publicly​
        this.getQuizDate = function () {
            return QUIZ_CREATED_DATE;
        };
        // A confirmation message that the question was created​
        console.log("Quiz Created On: " + this.getQuizDate());
    }

    //Add Prototype Methods to The Question Object
     // Define the prototype methods that will be inherited​
    Question.prototype.getCorrectAnswer = function () {
        return  this.correctAnswer;
    };
    
    Question.prototype.getUserAnswer = function () {
        return this.userAnswer;
    };
    
    Question.prototype.displayQuestion = function () {
        var questionToDisplay = "<div class='question'>" + this.question + "</div><ul>";
            choiceCounter = 0;
            this.choices.forEach(function (eachChoice)  {
            questionToDisplay += '<li><input type="radio" name="choice" value="' + choiceCounter + '">' + eachChoice + '</li>';
            choiceCounter++;
        });
        questionToDisplay += "</ul>";
    
        console.log (questionToDisplay);
    }; 

    function inheritPrototype(childObject, parentObject) {
       // As discussed above, we use the Crockford’s method to copy the properties and methods from the parentObject onto the childObject​
    // So the copyOfParent object now has everything the parentObject has ​
        var copyOfParent = Object.create(parentObject.prototype);
    
        //Then we set the constructor of this new object to point to the childObject.​
    // Why do we manually set the copyOfParent constructor here, see the explanation immediately following this code block.​
        copyOfParent.constructor = childObject;
    
        // Then we set the childObject prototype to copyOfParent, so that the childObject can in turn inherit everything from copyOfParent (from parentObject)​
       childObject.prototype = copyOfParent;
    }
    // Child Questions (Sub Classes of the Question object)
    // First, a Multiple Choice Question:
    // Create the MultipleChoiceQuestion​
    function MultipleChoiceQuestion(theQuestion, theChoices, theCorrectAnswer){
    // For MultipleChoiceQuestion to properly inherit from Question, here inside the MultipleChoiceQuestion constructor, we have to explicitly call the Question constructor​
    // passing MultipleChoiceQuestion as the this object, and the parameters we want to use in the Question constructor:​
        Question.call(this, theQuestion, theChoices, theCorrectAnswer);
    };
    // inherit the methods and properties from Question​
    inheritPrototype(MultipleChoiceQuestion, Question);

    // A Drag and Drop Question
    // Create the DragDropQuestion​
    function DragDropQuestion(theQuestion, theChoices, theCorrectAnswer) {
        Question.call(this, theQuestion, theChoices, theCorrectAnswer);
    }
    
    // inherit the methods and properties from Question​
    inheritPrototype(DragDropQuestion, Question);

    // Overriding Methods
    DragDropQuestion.prototype.displayQuestion = function () {
        // Just return the question. Drag and Drop implementation detail is beyond this article​
        console.log(this.question);
    };

    // Initialize some questions and add them to an array​
    var allQuestions = [
    new MultipleChoiceQuestion("Who is Prime Minister of England?", ["Obama", "Blair", "Brown", "Cameron"], 3),
       
    new MultipleChoiceQuestion("What is the Capital of Brazil?", ["São Paulo", "Rio de Janeiro", "Brasília"], 2),
       
    new DragDropQuestion("Drag the correct City to the world map.", ["Washington, DC", "Rio de Janeiro", "Stockholm"], 0)
    ];
    
    // Display all the questions​
    allQuestions.forEach(function (eachQuestion)  {
        eachQuestion.displayQuestion();
    });
</script>