Using classical inheritance, is it a good or bad idea to use 'class level' /member variables in JavaScript?

Question

We simulate classes in JavaScript using this kind of structure:

OurApplication.TableViewer = Class.extend ({
    init: function() {},
    viewLogic: function() {},
    logLogic: function() {}
}

Class.extend is a function that runs 'init' like a constructor and otherwise simulates classes in a somewhat Java-like way. I think this is similar to what Crockford calls 'classical inheritance' and this general approach (if not the exact syntax) seems to be somewhat commonly used/recommended, so I'm hoping that it's not controversial.

My question is, how data that is global to the 'class' should best be passed between functions within the same 'class';

Method A:

OurApplication.TableViewer = Class.extend ({
    init: function() {
        this.foo = 'bar';
        viewLogic();
        logLogic();
    },
    viewLogic: function() {
        document.write(this.foo);
    },
    logLogic: function() {
        console.log(this.foo);
    }
}

Method B:

OurApplication.TableViewer = Class.extend ({
    init: function() {
        viewLogic('bar');
        logLogic('bar');
    },
    viewLogic: function(foo) {
        document.write(foo);
    }
    logLogic: function(foo) {
        console.log(foo);
    }
}

I couldn't find a lot, but I did find this post which I think is the same topic but for Java. I would say it is barely favoring 'method A', but it's not at all clear.

Obviously there are some situations where it makes sense to pass data as a parameter (eg inside a loop where the value being passed changes each time; you could alter 'this.foo' to be the new value each time, but that seems awkward).

Any opinions/insights appreciated.

If you can pass parameters, your object has less state and is therefore easier to maintain. However, this is an opinion based question, which is not a good fit for SO. Go to http://programmers.stackexchange.com/ — Ruan Mendes, Sep 16 '13 at 23:57

elclanrs · Accepted Answer · 2013-09-17T00:15:59.010

It depends on the implementation. If you think of a basic implementation of a "class" in JavaScript, global properties would be attached to the constructor, instance properties to this and public methods to the prototype:

var Car = (function CarClass(){

  // Private sutff to be shared with all instances
  var className = 'Car';

  // Constructor
  function Car(make, model) {
    // Instance properties
    this.make = make;
    this.model = model;
  }

  // Global public properties to be shared with all instances
  Car.colors = ['red', 'green', 'blue', 'gray'];

  // Public methods
  Car.prototype = {

    // Method that uses private, global, instance and local variables
    getCarInManyColors: function() {
      return Car.colors.map(function(color) {
        return className +': '+ color +' '+ this.make +' '+ this.model;
      }.bind(this));
    }
  };

  return Car;
}());

score 0 · Answer 2 · answered Sep 16 '13 at 23:59

I would argue that data that is member of a class (global to the class to use your own terminology) should never need to be passed to its functions, otherwise, what's the point of tracking it as a member field?

So the question becomes: should the data be a member of a class? And from an OOP point of view, if the data remains unchanged for reasonably long periods of time, it should. In other words, in your example, if the passed foo variable tends to stay the same when you call viewLogic and logLogic, then I would store it as a member.

If you like to use JavaScript in a more object oriented fashion, I'd urge you to checkout Typescript

Using classical inheritance, is it a good or bad idea to use 'class level' /member variables in JavaScript?

2 Answers2