1

I finally got fed up with being confused about and just tested the following three snippets:

class A {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }

  calcArea = function() {
    return this.height * this.width;
  }
}

class B {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }

  calcArea = () => {
    return this.height * this.width;
  }
}

class C {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }

  calcArea() {
    return this.height * this.width;
  }
}

As you can see, each class uses a different syntax to declare its calcArea function. I understand well the difference between normal functions and fat arrow functions with regards to lexical scoping vs dynamic scoping, but I don't see any difference in this case. In all three cases, the result of calcArea is as expected. In all three cases, this correctly points to the instance of the class.

It's also unclear to me whether the syntax in class C is a shortcut for A or for B.

Is there any difference between declaring methods in these different ways?

temporary_user_name
  • 35,956
  • 47
  • 141
  • 220
  • Does this answer your question? [Are 'Arrow Functions' and 'Functions' equivalent / exchangeable?](https://stackoverflow.com/questions/34361379/are-arrow-functions-and-functions-equivalent-exchangeable) – emrhzc May 01 '20 at 19:48
  • Difference between first two: `(1, new A(4, 4).calcArea)();`, difference between second two: `new A().hasOwnProperty("calcArea")`. – ASDFGerte May 01 '20 at 19:51
  • @ASDFGerte not sure I follow that first example....what is `1` being passed to? – temporary_user_name May 01 '20 at 19:54
  • nothing, it's just the shortest way i know to generate an indirect call, to remove the object reference for `this`. If you want it longer, add an intermediate variable: `let f = new A(4, 4).calcArea; f();`. If you do the same for `B`, you'll get different results. This difference is well explained in the suggested dupe link btw, the difference between `A` (or `B`, along with the previous) and `C` is mainly, whether it's on the prototype or an instance method. – ASDFGerte May 01 '20 at 19:55
  • I see the difference between the first two, by executing your example, but I don't understand it. `a = new A(4,4); a.calcArea()` still works....how have you removed the reference? how could that realistically happen? – temporary_user_name May 01 '20 at 20:10
  • 1
    E.g. by passing the function as a callback. See [how-does-the-this-keyword-work](https://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work). As mentioned, you should also read the suggested dupe target, it elaborates on the difference between `A` and `B`. – ASDFGerte May 01 '20 at 20:11
  • Note for my future self: the meaning of ASDFGerte's first example is more clearly represented by `a = new A(4, 4); y = a.calcArea; y();` and then the same thing with `B`. I get it now Gerte, thanks. – temporary_user_name May 01 '20 at 20:25
  • 1
    Yes, sorry, i chose that way out of habit, but it probably creates additional confusion, when not having been seen before. As a side reference, here is an [explanation for the comma operator used for indirect function calls](https://stackoverflow.com/questions/5161502/indirect-function-call-in-javascript). It's just a very short way to do it. – ASDFGerte May 01 '20 at 20:33
  • `C` should be equivalent to `A` and will be using dynamic scoping, while `B` is different and will be using lexical scoping. – Hao Chang Jul 19 '22 at 08:15

0 Answers0