Error when calling methods within a Javascript class

Question

I've defined a javascript class for matrix transformations (of points to be drawn on an html5 canvas) which has multiple methods (e.g. multiply,rotate, scale, translate). In my rotate method, I need to call multiply, but since it is another method defined within the class, it has to be called in a way different from if was called outside of the class definition. For the class constructor, I have:

function Transform() {
            this.identity();
        }

and for the rotate method:

Transform.prototype.rotateX = function(rad) {
            var c = Math.cos(rad);
            var s = Math.sin(rad);
            var rx = [[1, 0, 0, 0],
                      [0, c, -s, 0],
                      [0, s, c, 0],
                      [0, 0, 0, 1]];
            this.m = multiply(rx, this.m);
            document.write('matrix rx:<br />');
            display(rx);
            document.write('rx * this.m =<br />');
            display(this.m);
        };

I'm coming from a C++ background with OOP, so this way of defining classes seems a little strange, but it seems that you should be able to call a function defined in the class without using the dot operator similar to how in C++ if you have a method defined using the scope qualification operator, you can freely access any of the class' data. For some reason, in javascript, this must not be the case, as I'm getting the error: Uncaught ReferenceError: multiply is not defined

What is the proper way to call methods defined in a Javascript class both inside and outside of the class definition?

where is multiply defined.... you might have to use this.multiply if it is added to the prototype — Arun P Johny
– Arun P Johny, Commented Oct 21, 2015 at 3:02

T.J. Crowder · Accepted Answer · 2015-10-21 03:15:19Z

but it seems that you should be able to call a function defined in the class without using the dot operator similar to how in C++

Nope. In JavaScript, the this is not optional, so if multiply is attached to the object (from the prototype, or just assigned to it in the constructor), you need this:

this.m = this.multiply(rx, this.m);

You might be thinking of calling an in-scope function, which doesn't require this. Here's an example of all three:

function Thingy(prop) {
  this.prop = prop;

  // Here's a "method" we add in the constructor:
  this.method1 = function() {
    snippet.log("Thingy#method1, prop = " + this.prop);
  };
};
Thingy.prototype.method2 = function() {
  snippet.log("Thingy#method2, prop = " + this.prop);
};
Thingy.prototype.method3 = function() {
  snippet.log("Thingy#method3, prop = " + this.prop);

  this.method1();
  this.method2();
  inScopeOnlyForMethod3();
  inScopeOnlyForMethod3.call(this);

  function inScopeOnlyForMethod3() {
    snippet.log("inScopeOnlyForMethod3, prop = " + this.prop);
  }
};

var t = new Thingy(42);
t.method3();

<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="//tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

Note that this in JavaScript is fundamentally different from this in C++. In JavaScript, this for function functions is usually determined by how the function was called, not where it's defined. (ES2015 — the latest JavaScript standard — defines "arrow" functions that don't use the function keyword, which inherit this from the context where they're created.)

Similarly, C++ classes are fundamentally different from JavaScript's constructor functions and prototypes. (And note that you can do JavaScript's prototypicaly inheritance with constructor functions, or directly via Object.create.)

Collectives™ on Stack Overflow

Error when calling methods within a Javascript class

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related