0

I know that the following is valid in JavaScript:

function Rectangle(x, y, w, h) {
  this.x = x;
  this.y = y;
  this.w = w;
  this.h = h;
}

Rectangle.getRight = function(rect) { return rect.x + rect.w; };
Rectangle.sides = 4;

I've read about how this is a way to emulate static methods/properties on a "class" in JavaScript. With the code above, any time I want to get the right side of a rectangle I can do this:

var rect = new Rectangle(0, 0, 10, 20);

Rectangle.getRight(rect); // 10

These properties could be defined on the Rectangle's prototype as well:

Rectangle.prototype = {
  getRight() { return this.x + this.w; },
  sides:4
};

Then I could do the following:

rect.getRight(); // 10

Obviously using a prototype results in cleaner looking code, but prototype inheritance can be problematic. Maybe I have a Hitbox class which is basically a rectangle, so it should inherit from the Rectangle prototype, but I don't need the sides property, so inheritance in this case creates bloat. The Rectangle prototype has properties that Hitbox doesn't need, and the Hitbox prototype has methods that Rectangle doesn't need, but I can use Rectangle.getRight on instances of both classes.

My question is whether it is good practice to define methods and properties on functions. Also, are there performance issues with this approach? Would it be preferable to define getRight on an Object that acts as a container for rectangle methods rather than on a Function? Basically, I want to know if there are any reasons not to use this design pattern.

Frank
  • 2,050
  • 6
  • 22
  • 40
  • Both options are fine and heave their pros and cons. May I ask why you're not using the ES6 Class Syntax? It abstracts these questions away and also comes with the ability for extending... – Dom Feb 05 '21 at 00:28
  • What are some of the cons for defining properties/methods on functions? As for ES6 classes, they still don't offer multiple inheritance and I actually don't like the way they abstract away what's actually happening. – Frank Feb 05 '21 at 00:48
  • 1
    "*Is defining properties on a function in JavaScript considered bad practice? *" - no, absolutely not. We do it all the time, for various reasons. There are no performance issues. But what you actually seem to be asking is "*When should I define a function as a static vs instance method?*", which is context-dependant and too broad too answer here. – Bergi Feb 05 '21 at 01:26
  • At the risk of being a stick-in-the-mud, when you do use function properties, be sure to document them very well. But of course, you should always do this anyway. :) –  Feb 05 '21 at 02:19
  • One of my main concerns was performance, but I'm glad to hear it's not an issue. Also, it just doesn't seem like a common design pattern in articles online, so I was worried there was some reason it wasn't more common. – Frank Feb 05 '21 at 03:48
  • It just seems to me that objects are intended to hold properties and methods, while functions are not. I figured functions would be less optimized when it comes to looking up properties. I need to do more research into what functions and objects are behind the scenes. They very well may be the same in this regard. – Frank Feb 05 '21 at 03:53
  • 2
    @Frank Every function is an object in JavaScript. Property lookup works exactly the same as on any other object. They are only special insofar that they have internal references to a closed-over scope and code to be executed when called. – Bergi Feb 05 '21 at 04:46

0 Answers0