以下代码块包含一系列功能，涵盖Javascript中面向对象的编程。它基于Youtuber的第三个视频教程，Derek Banas。
他从来没有完成他的.getStuff方法，但我一直试图用方法重载和switch语句来完成它。
显然，之后的打印语句没有被执行，所以看起来有些不对劲。我的代码出了什么问题？
另外，我有一个普遍的问题，我如何在乐队网站上使用面向对象的编程？这些想法适用于游戏，但我没有看到在一般网站中的使用（到目前为止我已经为Pygame学习了OO编程，它对于游戏设置是完全有意义的，但是在网站上使用它们。）< / p>
这是我的代码，跳到.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>
答案 0 :(得分：3)
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。不是那样可能是真的。
相反，请执行throw new Error("not a valid mood")左右。如果它是用户可以输入的内容，则在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这样的上帝方法被鄙视 - 你可以在方法名称上看到它，包括“东西”。考虑使用方法链接或对象作为参数的更流畅的接口。
我有一个普遍的问题，我如何在乐队网站上使用面向对象的编程？
太笼统了。 OOP是一种编程范例，与代码的功能无关。此外，“XY网站”通常不需要任何类型的编程。更具体地说，您希望在页面上看到的交互式/动态内容。