How to instantiate a javascript class in another js file?

Question

Suppose if I define a class in file1.js

function Customer(){
    this.name="Jhon";
    this.getName=function(){
        return this.name;
    };
};

Now if I want to create a Customer object in file2.js

var customer=new Customer();
var name=customer.getName();

I am getting exception: Customer is undefined, not a constructor.

But when i create a customer object in file2.js and pass it to file1.js then its working .

file1.js

    function Customer(){
        this.name="Jhon";
        this.getName=function(){
            return this.name;
        }
    }
    function customer(){
        return new Customer();
    }

file2.js

    var customer=customer();
    var name=customer.getName();

but i want to create a customer object in file1.js using new Customer(). How can i achieve that?

slebetman · Accepted Answer · 2012-10-10 06:01:11Z

48

It depends on what environment you're running in. In a web browser you simply need to make sure that file1.js is loaded before file2.js:

<script src="file1.js"></script>
<script src="file2.js"></script>

In node.js, the recommended way is to make file1 a module then you can load it with the require function:

require('path/to/file1.js');

It's also possible to use node's module style in HTML using the require.js library.

answered Oct 10, 2012 at 6:01

slebetman

115k19 gold badges147 silver badges180 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Thuy Over a year ago

Thank you! I needed to break up my React file into multiple classes and I couldn't use the require because it's not supported in the web browser. I can just simple reference class component A from class component B without any require, import or export. I simply needed to load FileA before File B.

slebetman Over a year ago

@Thuy React jsx compiler automatically splits your project into multiple small js files. Are you not using jsx?

Thuy Over a year ago

I can't install nodejs in my project web resources, so I need to link all of the React files necessary in the HTML file. That way, I don't need the require when one React file refers to another file.

slebetman Over a year ago

You only need node.js on your development PC/Mac/Laptop. You don't need it on your server. React compiles everything to static html and js files that you can then serve on anything

slebetman Over a year ago

You need node.js to write react code. You don't need node.js to run react code. Think of node.js as the compiler for React projects.

ColinWa · Accepted Answer · 2021-04-21 12:18:03Z

28

// Create Customer class as follows:
export default class Customer {
   getName() {
     return 'stackoverflow';
   }
}

// Import the class 
// no need for .js extension in path cos it gets inferred automatically
import Customer from './path/to/Customer'; 
// OR
const Customer = require('./path/to/Customer') 

// Use the class
var customer = new Customer();
var name = customer.getName();

edited Apr 21, 2021 at 12:18

answered Sep 27, 2019 at 12:06

ColinWa

9981 gold badge12 silver badges27 bronze badges

5 Comments

Krishna Over a year ago

Although this solution works like a charm, this needs babel setup in the nodejs config. Learn't it the hard way!

user172431 Over a year ago

@Krishna -- this could be my issue. When the class is defined in a separate file, instances passed between the files are not recognizing the class instances and allowing the methods. Do you have a link to the babel setup solution?

ColinWa Over a year ago

@user172431 npm install babel-cli babel-core --save-dev. Search [npmjs.com]

Aaron Franke Over a year ago

I'm getting two errors. One, SyntaxError: export declarations may only appear at top level of a module Two, ReferenceError: require is not defined

ColinWa Over a year ago

@AaronFranke, require above is for Node.js applications, but there is a require.js library file that you can add to your project [npmjs.com/package/require.js] or [npmjs.com/package/require.js].

Camilo Ortegón · Accepted Answer · 2017-03-02 01:22:01Z

9

You can export your methods to access from other files like this:

file1.js

var name = "Jhon";
exports.getName = function() {
  return name;
}

file2.js

var instance = require('./file1.js');
var name = instance.getName();

answered Mar 2, 2017 at 1:22

Camilo Ortegón

3,7423 gold badges29 silver badges34 bronze badges

1 Comment

Aaron Franke Over a year ago

ReferenceError: require is not defined

Mifeng · Accepted Answer · 2012-10-10 05:59:13Z

5

If you are using javascript in HTML, you should include file1.js and file2.js inside your html:

<script src="path_to/file1.js"></script>
<script src="path_to/file2.js"></script>

Note, file1 should come first before file2.

answered Oct 10, 2012 at 5:59

Mifeng

1,56515 silver badges26 bronze badges

Comments

Thom Porter · Accepted Answer · 2012-10-10 06:04:33Z

4

Make sure the dom is loaded before you run your code in file2... If you're using jQuery:

$(function(){
  var customer=customer();
  var name=customer.getName();
});

Then it doesn't matter what order the files are in, the code won't run until all of the files are loaded.

answered Oct 10, 2012 at 6:04

Thom Porter

2,6162 gold badges22 silver badges24 bronze badges

Comments

Nokia808Freak · Accepted Answer · 2012-10-10 05:59:34Z

Possible Suggestions to make it work:

Some modifications (U forgot to include a semicolon in the statement this.getName=function(){...} it should be this.getName=function(){...};)

function Customer(){
this.name="Jhon";
this.getName=function(){
return this.name;
};
}

(This might be one of the problem.)

and

Make sure U Link the JS files in the correct order

<script src="file1.js" type="text/javascript"></script>
<script src="file2.js" type="text/javascript"></script>

SpeedoThreeSixty · Accepted Answer · 2020-08-14 21:45:37Z

It is saying the value is undefined because it is a constructor function, not a class with a constructor. In order to use it, you would need to use Customer() or customer().

First, you need to load file1.js before file2.js, like slebetman said:

<script defer src="file1.js" type="module"></script>
<script defer src="file2.js" type="module"></script>

Then, you could change your file1.js as follows:

export default class Customer(){
    constructor(){
        this.name="Jhon";
        this.getName=function(){
            return this.name;
        };
    }
}

And the file2.js as follows:

import { Customer } from "./file1";
var customer=new Customer();

Please correct me if I am wrong.

Collectives™ on Stack Overflow

How to instantiate a javascript class in another js file?

7 Answers 7

5 Comments

5 Comments

1 Comment

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

5 Comments

5 Comments

1 Comment

Comments

Comments

Comments

Comments

Related