CODEWITHSUNDEEP
javascriptprototype
Rick
Rick

Reputation: 136

Prototype's function is not defined

I am new to the concept of prototypes in JavaScript. It is confusing to me, as there seem to be many ways of doing prototype 'inheritance'. Coming from a Java background, my code is mostly structured like classical OOP, as this is the way I can understand it easily.

I want to call a function defined in the prototype, but I am getting Uncaught ReferenceError: getShape is not defined. I am not even sure if I am doing this prototype thing correctly.

Here is a snippet of my code:

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'));

To explain shortly what I am trying to do: I have multiple svg icons and each one needs an animation on mouse-over. As the code for the animation is mostly the same, except for the specific movements, I figured using a prototype would be a good idea. The first thing I need to do for every icon is getting vars for every shape that I need to move independently. This is what I am trying to do with the getShape() function.

Is the getShape() function actually inherited by calling this.prototype = new mouseOverAnimation()? How should I call it?

Appendage with some side questions that may not be related to the main issue:

I am fairly new to more complex JavaScript. Therefor I am not sure of my use of this, prototype and the way I am trying to do function 'overloading'. Please feel free to correct me on anything that isn't really ok. Also, there is the use of jQuery in this snippet, because it is included in the library I am using for animation and it was used like this in an example I have used. However, for this instance, it is really not needed I think. Is it ok to still use this $('body') for simplicity's sake or is it better to change this to vanilla JS?

Upvotes: 0

Views: 943

Answers (1)

gurvinder372
gurvinder372

Reputation: 68443

I want to call a function defined in the prototype, but I am getting Uncaught ReferenceError: getShape is not defined.

You are getting this error since there is no getShape method in the someAnimationTest method's scope.

Is the getShape() function actually inherited by calling this.prototype = new mouseOverAnimation()?

getShape method is not inherited since it is not a property of mouseOverAnimation's prototype.

How should I call it?

You need to expose getShape method as mouseOverAnimation's property

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    
}

and invoke it as

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' 
}

Upvotes: 1

Related Questions