- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
以下代码块包含一系列涵盖 Javascript 中面向对象编程的函数。它基于 Youtuber Derek Banas 的第三个视频教程。
他从未完全完成他的 .getStuff 方法,但我一直在尝试使用方法重载和 switch 语句来完成它。
显然,它后面的打印语句没有被执行,所以看起来有问题。我的代码有什么问题吗?
另外,我有一个一般性问题,如何在乐队网站上使用面向对象编程?这些想法对于游戏来说很好,但我没有看到在一般网站中的用途(到目前为止我已经学习了 Pygame 的 OO 编程,它对于游戏设置完全有意义,但不知道在网站中的用途)。
这是我的代码,跳到底部的 .getStuff 方法:
<!DOCTYPE html>
<html>
<head>
<title> Tutorial 3 (Object Orientated Programming) </title>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8"/>
<script>
// This tutorial will cover OO based programming
// Object: Stores variables and the functions to manipulate these variables in one place
// Class: This is the blueprint that defines what variables and functions each object will
// have
// Property: Names given to variables stored inside of objects
// Methods: Name given to functions that are part of an object
// The following example will create an Animal object
// This is also called a constructor since it is a function that is designed to
// create (construct) a new object
function Animal()
{
// Define all the properties that you want the Animal object to contain:
// this: "This" is a reference to object that you create
this.name = "No Name";
this.sound = "Grrr";
this.owner = "No Owner";
}
// The following will create a prototype for a method that can be used by the Animal
// object
// Format is: nameOfObject.prototype.setOwner: this sets the value for the variable
// function(property that the function will accept)
// Encapsulation: Grouping of properties and their methods needed to manipulate
// those properties
Animal.prototype.setOwner = function(newOwner)
{
// The following checks if a newOwner value has been passed
if(typeof newOwner != 'undefined')
{
// You now want the value of owner to be the value of owner that has been
// passed to it as a parameter:
this.owner = newOwner;
}
else
{
document.write("Please enter a valid owner." + "</br>");
}
}
// This function will return whatever the name of the current owner is
Animal.prototype.getOwner = function()
{
return this.owner;
}
// Set the name of the animal using the previous method:
Animal.prototype.setName = function(newName)
{
if(typeof newName != 'undefined')
{
this.name = newName;
}
else
{
document.write("Please enter a valid name." + "</br>");
}
}
Animal.prototype.getName = function()
{
return this.name;
}
// Set the sound for the object:
Animal.prototype.setSound = function(newSound)
{
if(typeof newSound != 'undefined')
{
this.sound = newSound;
}
else
{
document.write("Please enter a valid sound." + "</br>");
}
}
Animal.prototype.getSound = function()
{
return this.sound;
}
// The following will literally create new Animal objects and probably call these
// function prototypes by passing in parameters for sound, name, and owner
var dog = new Animal();
// ^ This object has now been created and contains the defaults for sound, name, and owner
// according to the original function
// Now we are going to set the properties individually:
dog.setName("Cheyenne");
dog.setSound("Bark!");
dog.setOwner("Sam");
// Now, finally use the get versions of the functions by simply calling them via a document.write
document.write("The name of the dog is: " + dog.getName() + "</br>");
document.write("The sound of the dog is: " + dog.getSound() + "</br>");
document.write("The owner of the dog is: " + dog.getOwner() + "</br>");
// My small goal:
// Make a cat object instead:
var cat = new Animal();
cat.setName("Mr. Buttons")
cat.setSound("Purrrr")
cat.setOwner("Crazy Cat Lady")
// Print the results to screen:
document.write("The name of cat is: " + cat.getName() + "</br>");
document.write("The sound of the cat is: " + cat.getSound() + "</br>");
document.write("The owner of the cat is: " + cat.getOwner() + "</br>");
function Cat()
{
// The following will "inherit" all the attributes of the Animal class:
// This is a reference to the next cat object that you create.
// This forces the animal constructor to be called
Animal.call(this)
this.mood = "Crazy";
}
// Superclass: the class you want your new class to inherit from
// Without the following statement, Cat would become a subclass instead
Cat.prototype = new Animal();
// Here we are making the constructor be of type Cat
Cat.prototype.constructor = Cat();
// Create a getMood method:
Cat.prototype.getMood = function()
{
return this.mood;
}
// Create a setMOood method where the user passed in a mood as a parameter:
Cat.prototype.setMood = function(newMood)
{
if(typeof newMood != 'undefined')
{
this.mood = newMood;
}
else
{
document.write("Please enter a valid mood!</br>");
}
}
// Make a new Panda object:
function Panda()
{
Animal.call(this);
this.mood = "Calm";
}
Panda.prototype = new Animal();
Panda.prototype.constructor = Panda();
// Get Mood:
Panda.prototype.getMood = function()
{
return this.mood;
}
// Set Mood:
Panda.prototype.setMood = function(newMood)
{
if(typeof newMood != 'undefined')
{
this.mood = newMood;
}
else
{
document.write("Please enter a valid mood!</br>");
}
}
myPanda = new Panda();
myPanda.setMood("Excited");
document.write("myPanda's mood is: " + myPanda.getMood() + "</br>");
theGreatOne = new Panda();
theGreatOne.setMood("Courageous");
document.write("theGreatOne's mood is: " + theGreatOne.getMood() + "</br>");
// The following will determine if myPanda is an INSTANCE of the Panda class or
// an actual Panda object:
document.write("Is myPanda an instance of the Panda class?: " + (myPanda instanceof Panda) + "</br>");
// The following will use "typeof" to determine the data type of the myPanda object
// and the Panda class
// As seen by the example, classes are classified as functions in Javascripts
document.write("What is the data type of myPanda?: " + (typeof myPanda) + "</br>");
document.write("What is the data type of Panda?: " + (typeof Panda) + "</br>");
// Method Overloading: Creating multiple different versions or methods that all
// have a different number of attributes
// Aka, a different version of a method will be called depending on how many
// arguments are passed to the function
setStuff(newName);
setStuff(newName, newSound);
setStuff(newName, newSound, newOwner);
Panda.prototype.setStuff = function(newName, newSound, newOwner)
{
if((typeof newName != 'undefined') && (typeof newSound != 'undefined') && (typeof newOwner != 'undefined'))
{
Panda.prototype.setStuff = function(newName, newSound, newOwner)
{
switch(arguments.length)
{
case 3:
this.owner = newOwner;
case 2:
this.sound = newSound;
case 1:
this.name = newName;
}
}
}
else
{
document.write("Please enter a valid name</br>");
}
}
newPanda.setStuff("Jiggly");
document.write("myPanda's new name is: " + myPanda.getName() + "</br>");
// ^ Work on fixing this
// Continue at 15:51
// https://www.youtube.com/watch?v=xVnW7ZMqBus
// Polymorphism:
// doAnimalStuff(Animal){ document.write(Animal.getName() + Animal.getOwner()) };
</script>
<noscript>
</noscript>
</head>
<body>
<p> This is a sample paragraph </p>
</body>
</html>
最佳答案
Cat.prototype = new Animal();
Don't do this 。更好:
Cat.prototype = Object.create(Animal.prototype);
<小时/>
document.write("The name of cat is: " + cat.getName() + "</br>");
Try not to use document.write
。对于像这样的脚本,请改用 console.log
。
// Method Overloading: Creating multiple different versions or methods that all
// have a different number of attributes
// Aka, a different version of a method will be called depending on how many
// arguments are passed to the function
setStuff(newName);
setStuff(newName, newSound);
setStuff(newName, newSound, newOwner);
这三行可能也应该出现在注释中。任何地方都没有定义 setStuff 函数,因此尝试调用它会引发错误并停止脚本执行。检查你的错误控制台。更好:
// setStuff(newName);
// setStuff(newName, newSound);
// setStuff(newName, newSound, newOwner);
<小时/>
Cat.prototype.setMood = function(newMood) {
…
document.write("Please enter a valid mood!</br>");
}
OOP 提示:尽量不要在 setter 方法中进行用户交互。这太具体了,并且确实假设 a) 用户调用了该方法(而不是程序员) b) 用户在某处输入了某些内容 c) 的首选输出方法这种错误是document.write
。这可能不是真的。
相反,执行抛出新错误(“不是有效的心情”)
左右。如果它是用户可以输入的内容,则在 UI 代码中捕获它,并在那里输出错误消息。和猫没有任何关系。
Panda.prototype.setStuff = function(newName, newSound, newOwner) {
if((typeof newName != 'undefined') && (typeof newSound != 'undefined') && (typeof newOwner != 'undefined')) {
Panda.prototype.setStuff = function(newName, newSound, newOwner) {
呃,什么?仅声明(分配)该方法一次!我没有仔细检查,但右大括号处似乎也存在语法错误。
<小时/>Cat.prototype.getMood = …
Cat.prototype.setMood = …
Panda.prototype.getMood = …
Panda.prototype.setMood = …
Don't repeat yourself!可能的 OOP 解决方案包括:
Animal
类上定义情绪AnimalWithMood
只有部分动物才能有心情switch(arguments.length) {
case 3:
this.owner = newOwner;
case 2:
this.sound = newSound;
case 1:
this.name = newName;
}
有趣的失败用法。但是,如果传递 4 个参数会发生什么情况,那么它们应该被忽略吗?
安explicit check会更好:
if (arguments.length >= 3)
this.owner = newOwner;
if (arguments.length >= 2)
this.sound = newSound;
if (arguments.length >= 1)
// do validity checks in this block!
this.name = newName;
OOP 提示:像这样的 setStuff
之类的上帝方法是被鄙视的 - 你可以在方法名称中看到它,其中已经包含了“stuff”。考虑使用方法链或对象作为参数的更流畅的接口(interface)。
I have a general question, how could I use object orientated programming on a band website?
太笼统了。 OOP 是一种编程范式,与代码的功能无关。此外,“XY 网站”通常不需要任何类型的编程。更具体地说明您希望在页面上看到哪些交互式/动态内容。
关于javascript - 关于我的 .getStuff 方法和 Javascript OO 编程的两个问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23032725/
我正在尝试打印 timeval 类型的值。实际上我可以打印它,但我收到以下警告: 该行有多个标记 格式“%ld”需要“long int”类型,但参数 2 的类型为“struct timeval” 程序
我正在编写自己的 unix 终端,但在执行命令时遇到问题: 首先,我获取用户输入并将其存储到缓冲区中,然后我将单词分开并将它们存储到我的 argv[] 数组中。IE命令是“firefox”以启动存储在
我是 CUDA 的新手。我有一个关于一个简单程序的问题,希望有人能注意到我的错误。 __global__ void ADD(float* A, float* B, float* C) { con
我有一个关于 C 语言 CGI 编程的一般性问题。 我使用嵌入式 Web 服务器来处理 Web 界面。为此,我在服务器中存储了一个 HTML 文件。在此 HTML 文件中包含 JavaScript 和
**摘要:**在代码的世界中,是存在很多艺术般的写法,这可能也是部分程序员追求编程这项事业的内在动力。 本文分享自华为云社区《【云驻共创】用4种代码中的艺术试图唤回你对编程的兴趣》,作者: break
我有一个函数,它的任务是在父对象中创建一个变量。我想要的是让函数在调用它的级别创建变量。 createVariable testFunc() [1] "test" > testFunc2() [1]
以下代码用于将多个连续的空格替换为1个空格。虽然我设法做到了,但我对花括号的使用感到困惑。 这个实际上运行良好: #include #include int main() { int ch, la
我正在尝试将文件写入磁盘,然后自动重新编译。不幸的是,某事似乎不起作用,我收到一条我还不明白的错误消息(我是 C 初学者 :-)。如果我手动编译生成的 hello.c,一切正常吗?! #include
如何将指针值传递给结构数组; 例如,在 txt 上我有这个: John Doe;xxxx@hotmail.com;214425532; 我的代码: typedef struct Person{
我尝试编写一些代码来检索 objectID,结果是 2B-06-01-04-01-82-31-01-03-01-01 . 这个值不正确吗? // Send a SysObjectId SNMP req
您好,提前感谢您的帮助, (请注意评论部分以获得更多见解:即,以下示例中的成本列已添加到此问题中;西蒙提供了一个很好的答案,但成本列本身并未出现在他的数据响应中,尽管他提供的功能与成本列一起使用) 我
我想知道是否有人能够提出一些解决非线性优化问题的软件包的方法,而非线性优化问题可以为优化解决方案提供整数变量?问题是使具有相等约束的函数最小化,该函数受某些上下边界约束的约束。 我已经在R中使用了'n
我是 R 编程的初学者,正在尝试向具有 50 列的矩阵添加一个额外的列。这个新列将是该行中前 10 个值的平均值。 randomMatrix <- generateMatrix(1,5000,100,
我在《K&R II C 编程 ANSI C》一书中读到,“>>”和“0; nwords--) sum += *buf++; sum = (sum >>
当下拉列表的选择发生变化时,我想: 1) 通过 div 在整个网站上显示一些 GUI 阻止覆盖 2)然后处理一些代码 3) 然后隐藏叠加层。 问题是,当我在事件监听器函数中编写此逻辑时,将执行 onC
我正在使用 Clojure 和 RESTEasy 设计 JAX-RS REST 服务器. 据我了解,用 Lisp 系列语言编写的应用程序比用“传统”命令式语言编写的应用程序更多地构建为“特定于领域的语
我目前正在研究一种替代出勤监控系统作为一项举措。目前,我设计的用户表单如下所示: Time Stamp Userform 它的工作原理如下: 员工将选择他/她将使用的时间戳类型:开始时间、超时、第一次
我是一名学生,试图自学编程,从在线资源和像您这样的人那里获得帮助。我在网上找到了一个练习来创建一个小程序来执行此操作: 编写一个程序,读取数字 a 和 b(长整型)并列出 a 和 b 之间有多少个数字
我正在尝试编写一个 shell 程序,给定一个参数,打印程序的名称和参数中的每个奇数词(即,不是偶数词)。但是,我没有得到预期的结果。在跟踪我的程序时,我注意到,尽管奇数词(例如,第 5 个词,5 %
只是想知道是否有任何 Java API 可以让您控制台式机/笔记本电脑外壳上的 LED? 或者,如果不可能,是否有可能? 最佳答案 如果你说的是前面的 LED 指示电源状态和 HDD 繁忙状态,恐怕没
我是一名优秀的程序员,十分优秀!