从HTML在JavaScript中调用函数

Question

我正在尝试从HTML文件中的JavaScript调用方法。 具体来说，从Dog and Cat（在HTML下方显示）中调用方法“ speak”。 我想我应该在onload上使用window.onload = function()或类似的东西，但是我不知道如何调用方法。

这是HTML内容：

<!DOCTYPE html>
<html>
    <head>
        <script src="Ej6.js"></script>

        <script>
            window.onload = function() {
                            }
        </script>

    </head>

    <body>

    </body>
</html>

这是我的JavaScript代码，我要调用的函数是：

function Animal(name, eyeColor) {
    this.name = name;
    this.eyeColor = eyeColor;
}

Animal.prototype.getName=function() {
    return this.name;
};

Animal.prototype.getEyeColor=function() {
    return this.eyeColor;
};

Animal.prototype.toString=function() {
    return this.name + " " +
           this.eyeColor;
};

function Dog(name, eyeColor) {
    Animal.call(this, name, eyeColor);
}

Dog.prototype = new Animal();

Dog.prototype.toString=function() {
    return Animal.prototype.toString.call(this);
};

Dog.prototype.speak=function() {
    return "woof";
};

function Cat(name, eyeColor) {
    Animal.call(this, name, eyeColor);
}

Cat.prototype = new Animal();

Cat.prototype.toString=function() {
    return Animal.prototype.toString.call(this);
};

Cat.prototype.speak=function() {
    return "meow";
};

Answer 1

您可以像平常一样使用JavaScript，包括的每个脚本，无论间接使用<script src="..."></script>还是直接使用<script>...</script>具有相同的作用域。

 function Animal(name, eyeColor) { this.name = name; this.eyeColor = eyeColor; } Animal.prototype.getName = function() { return this.name; }; Animal.prototype.getEyeColor = function() { return this.eyeColor; }; Animal.prototype.toString = function() { return this.name + " " + this.eyeColor; }; function Dog(name, eyeColor) { Animal.call(this, name, eyeColor); } Dog.prototype = new Animal(); Dog.prototype.toString = function() { return Animal.prototype.toString.call(this); }; Dog.prototype.speak = function() { return "woof"; }; function Cat(name, eyeColor) { Animal.call(this, name, eyeColor); } Cat.prototype = new Animal(); Cat.prototype.toString = function() { return Animal.prototype.toString.call(this); }; Cat.prototype.speak = function() { return "meow"; }; 

 <!-- This is inside the HTML --> <script> window.onload = function() { myCat = new Cat("Kitten", "green"); console.log(myCat.speak()); } </script> 

Answer 2

window.onload在所有内容资源（图像等）均已加载后发生。 如果您不想使用它，则可以在主代码之后附加对象初始化示例。

 function Animal(name, eyeColor) { this.name = name; this.eyeColor = eyeColor; } Animal.prototype.getName = function() { return this.name; }; Animal.prototype.getEyeColor = function() { return this.eyeColor; }; Animal.prototype.toString = function() { return this.name + " " + this.eyeColor; }; function Dog(name, eyeColor) { Animal.call(this, name, eyeColor); } Dog.prototype = new Animal(); Dog.prototype.toString = function() { return Animal.prototype.toString.call(this); }; Dog.prototype.speak = function() { return "woof"; }; function Cat(name, eyeColor) { Animal.call(this, name, eyeColor); } Cat.prototype = new Animal(); Cat.prototype.toString = function() { return Animal.prototype.toString.call(this); }; Cat.prototype.speak = function() { return "meow"; }; const dog = new Dog('test', 'brown') console.log(dog.speak());