一、

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>

面向对象的JavaScript-001的更多相关文章

  1. 前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型

    前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型 前言(题外话): 有人说拖延症是一个绝症,哎呀治不好了.先不说这是一个每个人都多多少少会有的,也不管它究竟对生活有多么大的 ...

  2. 前端开发:面向对象与javascript中的面向对象实现(一)

    前端开发:面向对象与javascript中的面向对象实现(一) 前言: 人生在世,这找不到对象是万万不行的.咱们生活中,找不到对象要挨骂,代码里也一样.朋友问我说:“嘿,在干嘛呢......”,我:“ ...

  3. 面向对象的 JavaScript

    面向对象的javascript 一.创建对象 创建对象的几种方式: var obj = {}; var obj = new Object(); var obj = Object.create(fath ...

  4. 摘抄--全面理解面向对象的 JavaScript

    全面理解面向对象的 JavaScript JavaScript 函数式脚本语言特性以及其看似随意的编写风格,导致长期以来人们对这一门语言的误解,即认为 JavaScript 不是一门面向对象的语言,或 ...

  5. 面向对象的JavaScript --- 动态类型语言

    面向对象的JavaScript --- 动态类型语言 动态类型语言与面向接口编程 JavaScript 没有提供传统面向对象语言中的类式继承,而是通过原型委托的方式来实现对象与对象之间的继承. Jav ...

  6. 面向对象的JavaScript --- 封装

    面向对象的JavaScript --- 封装 封装 封装的目的是将信息隐藏.一般而言,我们讨论的封装是封装数据和封装实现.真正的封装为更广义的封装,不仅包括封装数据和封装实现,还包括封装类型和封装变化 ...

  7. 面向对象的JavaScript --- 多态

    面向对象的JavaScript --- 多态 多态 "多态"一词源于希腊文 polymorphism,拆开来看是poly(复数)+ morph(形态)+ism,从字面上我们可以理解 ...

  8. 面向对象的JavaScript --- 原型模式和基于原型继承的JavaScript对象系统

    面向对象的JavaScript --- 原型模式和基于原型继承的JavaScript对象系统 原型模式和基于原型继承的JavaScript对象系统 在 Brendan Eich 为 JavaScrip ...

  9. 第1章 面向对象的JavaScript

    针对基础知识的每一个小点,我都写了一些小例子,https://github.com/huyanluanyu1989/DesignPatterns.git,便于大家理解,如有疑问,大家可留言给我,最近工 ...

  10. javascript面向对象之Javascript 继承

    转自原文javascript面向对象之Javascript 继承 在JavaScript中实现继承可以有多种方法,下面说两种常见的. 一,call 继承 先定义一个“人”类 //人类 Person=f ...

随机推荐

  1. [Java][Web]Response学习.缓存

    response.setHeader("expires", String.valueOf(System.currentTimeMillis() + 1000 * 3600)); S ...

  2. node的express中间件之directory

    direcotry中间件用于在浏览器中流出网站某个目录下的所有子目录及文件. app.use(express.directory(path,[options])); 查看网站根目录下的文件及目录 va ...

  3. canvas之旋转一条线段

    <canvas id="canvas" width="600" height="500" style="background ...

  4. 检测SqlServer服务器性能

    通过性能监视器监视 Avg. Disk Queue Length   小于2 Avg. Disk sec/Read , Avg. Disk sec/Write  小于10ms 可以用数据收集器定时收集 ...

  5. Zookeeper的几个应用场景

    场景一 有这样一个场景:系统中有大约100w的用户,每个用户平 均有3个邮箱账号,每隔5分钟,每个邮箱账需要收取100封邮件,最多3亿份邮件需要下载到服务器中(不含附件和正文).用20台机器划分计算的 ...

  6. 关于OpenGL Framebuffer Object、glReadPixels与离屏渲染

    最近写论文需要用到离屏渲染(主要是因为模型太大普通窗口绘制根本做不了),于是翻阅了红宝书查了下相关api和用法.中文版的红宝书可读性有点差,很多地方翻译地晦涩,但好歹读起来比较快,主要相关章节为第8章 ...

  7. Python实践练习:strip()的正则表达式版本

    题目: 写一个函数,它接受一个字符串,做的事情和 strip()字符串方法一样.如果只传入了要去除的字符串,没有其他参数,那么就从该字符串首尾去除空白字符.否则,函数第二个参数指定的字符将从该字符串中 ...

  8. 第一章IP:网际协议

    I P是T C P / I P协议族中最为核心的协议.所有的 T C P.U D P.I C M P及I G M P数据都以I P数据报格式传输(见图 1 - 4).许多刚开始接触 T C P / I ...

  9. python学习——练习题(6)

    """ 题目:斐波那契数列. 程序分析:斐波那契数列(Fibonacci sequence),又称黄金分割数列,指的是这样一个数列:0.1.1.2.3.5.8.13.21 ...

  10. vagrant+docker搭建consul集群开发环境

    HashiCorp 公司推出的Consul是一款分布式高可用服务治理与服务配置的工具.关于其配置与使用可以参考这篇文章 consul 简介与配置说明. 一般,我们会在多台主机上安装并启动 consul ...