多个文件中的JavaScript类定义

Question

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?

Answer 1

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

Answer 2

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 = {}

2. 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; } }

3. 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.