Question

我是JavaScript中原型概念的新手。这对我来说很困惑，因为似乎有许多方法可以做原型'继承'。来自Java背景，我的代码大部分都是经典的OOP，因为这是我可以轻松理解的方式。

我想调用原型中定义的函数，但我得到Uncaught ReferenceError: getShape is not defined。我甚至不确定我是否正确地做了这个原型。

以下是我的代码片段：

function mouseOverAnimation($main,svgId) {
    this.svg = getShape(svgId,$main); // this line works

    function getShape(shapeId,parent) {
        if (parent == undefined) { parent = svg; }
        var shape = parent.find(shapeId);
        return shape;
    }
}

function someAnimationTest($main) {
    this.prototype = new mouseOverAnimation($main,'#icon1');
    this.ball1 = getShape('#ball1'); // this line is giving me the error
}

new someAnimationTest($('body'));

简要解释一下我要做的事情：我有多个svg图标，每个人都需要动画鼠标悬停。由于动画的代码大致相同，除了特定的动作，我认为使用原型将是一个好主意。我需要为每个图标做的第一件事是为每个我需要独立移动的形状获得变量。这就是我尝试使用getShape()函数。

getShape()函数是否通过调用this.prototype = new mouseOverAnimation()实际继承了？我该怎么称呼它？

附件有一些可能与主要问题无关的问题：

我对更复杂的JavaScript相当新。因此，我不确定我使用this，prototype以及我尝试执行“重载”功能的方式。请随意纠正任何不太好的事情。此外，在这个代码片段中使用了jQuery，因为它包含在我用于动画的库中，并且在我使用的示例中使用了它。但是，对于这个例子，我认为真的不需要。为简单起见，仍然可以使用此$('body')，还是将其更改为vanilla JS更好？

Answer 1

我想调用原型中定义的函数，但我得到了未捕获的ReferenceError：未定义getShape。

由于getShape方法范围内没有someAnimationTest方法，您收到此错误。

getShape（）函数是否实际上是通过调用继承的 this.prototype = new mouseOverAnimation（）？

getShape方法不会被继承，因为它不是mouseOverAnimation原型的属性。

我该怎么称呼它？

您需要将getShape方法公开为mouseOverAnimation的属性

function mouseOverAnimation($main,svgId) {
    this.getShape = function (shapeId,parent) { 
        if (parent == undefined) { parent = svg; }
        var shape = parent.find(shapeId);
        return shape;
    }
    this.svg = this.getShape(svgId,$main); // this line works    
}

并将其作为

调用

function someAnimationTest($main) {
    this.moaInstance = new mouseOverAnimation($main,'#icon1'); //not using this.prototype as this has nothing to do with prototypical inheritence 
    this.ball1 = this.moaInstance.getShape('#ball1'); //notice that method is invoked via the instance of mouseOverAnimation 'this.moaInstance' 
}

原型的功能未定义

1 个答案: