CODEWITHSUNDEEP
javascript
Some User
Some User

Reputation: 5827

JavaScript Class Definition in Multiple Files

I'm learning JavaScript. I come from a C# background. In C#, there is the concept of partial classes. In other words, a way to split the definition of a class across files. Is there a way to do this in JavaScript?

Currently, I have a directory structure like this:

/
  MyClass.js
  child-folder
    MyClassAdditions.js

MyClass.js

function MyClass() {
}

Is there a way to add additional functions to MyClass from MyClassAdditions.js? If so, how?

Upvotes: 1

Views: 3218

Answers (2)

Muhammad Musavi
Muhammad Musavi

Reputation: 2696

Since I have had similar problem I recommend this way which I think you can find nowhere, I found every part in a separated document:

  1. When loading your main js file, you define the class MyClass():

MyClass = {}

  1. Then in your MyClass.js file which is supposed to deal with laptop info, you can define some functions and properties like this:
MyClass.laptop = {
        brand : "Dell",
        model: "1525",
        color: "silver",
        getBrandAndModel: function(){
            return MyClass.laptop.brand + ", " + MyClass.laptop.model;
        },
        getBrandAndColor: function(){
            return MyClass.laptop.brand + ", " + MyClass.laptop.color;
        },
        colorizeIt: function(colorName){
            return MyClass.laptop.brand + ", " + colorName;
        }
     }
  1. Now in the MyClassAdditions.js which you are going to deal with cellphone info you go like this:
MyClass.cellphone = {
    brand : "Samsung",
    color: "Black",
    width: 8,
    height: 15,
    getDimention: function(){
        return MyClass.cellphone.width + " * " + MyClass.cellphone.height;
    },
 }

in this way, you have added two parts in two separated js files into an object named MyClass.

Now test this examples to make sure it really works:

        MyClass.laptop.brand  //"Dell"
        MyClass.laptop.getBrandAndColor() //"Dell, silver"
        MyClass.cellphone.color //"Black"
        MyClass.cellphone.getDimention() //"8 * 15"

It's like you have created following object in the first place:

      MyClass = {
        laptop : {
            brand : "Dell",
            model: "1525",
            color: "silver",
            getBrandAndModel: function(){
                return MyClass.laptop.brand + ", " + MyClass.laptop.model;
            },
            getBrandAndColor: function(){
                return MyClass.laptop.brand + ", " + MyClass.laptop.color;
            },
            colorizeIt: function(colorName){
                return MyClass.laptop.brand + ", " + colorName;
            }
         },
         cellphone :{
            brand : "Samsung",
            color: "Black",
            width: 8,
            height: 15,
            getDimention: function(){
                return MyClass.cellphone.width + " * " + MyClass.cellphone.height;
            },
         }
      }

By the way you can delete a part of object by the keyword delete like this:

    delete  MyClass.cellphone

now MyClass.cellphone returns undefined while MyClass.laptop returns object.

Upvotes: 0

Ryan Wheale
Ryan Wheale

Reputation: 28400

Update 2018-05-21 - JavaScript now has formal classes, and the syntax looks like this:

class MyClass {
  constructor(param1) {
    this.param1 = param1;
  }
  // This is the same as MyClass.prototype.printParams
  printPrams() {
    console.log("The value of param1 is", this.param1);
  }
}

Original answer from 2015:

While JS currently doesn't have formal classes, you can create constructor objects which can get instantiated. You can even extend these objects or add onto them later. Here's a simple example:

// create your constructor
var MyClass = function(param1) {
    // create instance properties here
    this.param1 = param1;
};

// all instances of your class will point to the constructors prototype
MyClass.prototype.printParams = function () {
    console.log("The value of param1 is", this.param1);
};

// lets create two instances so we can see how the prototype thing works
var foo = new MyClass("foo");
var bar = new MyClass("bar");

foo.printParams(); // => The value of param1 is foo
bar.printParams(); // => The value of param1 is bar

foo.param1 = "oof";
foo.printParams(); // => The value of param1 is oof

// Now, lets change how printParams works.
// Remember, we still have instances of foo and bar already created.
// Since they both point to their constructors prototype, you 
// can change things later... at any time.
MyClass.prototype.printParams = function () {
    console.log("PARAM1 SAID WHAT??", this.param1);
};
MyClass.prototype.sayNothing = function () {
    console.log("nothing");
};

// All instances get these new methods, yay prototypal inheritance
foo.printParams(); // => PARAM1 SAID WHAT?? oof
bar.printParams(); // => PARAM1 SAID WHAT?? bar
foo.sayNothing(); // => nothing
bar.sayNothing(); // => nothing

// Lets say we want foo to have it's own sayNothing method, 
// you can define one on the instance itself - not really cool, but doable
foo.sayNothing = function () {
    console.log("nothing at all");
    // If you want to be cool, you can call the shared prototype method too
    this.constructor.prototype.sayNothing.call(this);
};

// bar is still going to use the method defined on the prototype
// while foo will have its own implementation of sayNothing
foo.sayNothing(); // => nothing at all
                  // => nothing
bar.sayNothing(); // => nothing

Upvotes: 2

Related Questions