javascript - 关于我的 .getStuff 方法和 Javascript OO 编程的两个问题-6ren

javascript - 关于我的 .getStuff 方法和 Javascript OO 编程的两个问题

转载作者：行者123 更新时间：2023-11-28 19:53:27

以下代码块包含一系列涵盖 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只有部分动物才能有心情
如果您希望任意类都有心情，请使用 mixin 模式

<小时/>

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/

文章推荐： ios - 未调用 UIButton 函数

文章推荐： python - 将字符串转换为python中的列表

文章推荐： windows - 如何使用批处理语言的timeout命令？

javascript - 关于我的 .getStuff 方法和 Javascript OO 编程的两个问题
以下代码块包含一系列涵盖 Javascript 中面向对象编程的函数。它基于 Youtuber Derek Banas 的第三个视频教程。他从未完全完成他的 .getStuff 方法，但我一直在尝试

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 关于我的 .getStuff 方法和 Javascript OO 编程的两个问题