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

User · Answer

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    lt script src  file1 js  gt  lt  script gt   lt script src  file2 js  gt  lt  script gt    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

User · Answer

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

User · Answer

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   lt script src  file1 js  type  text javascript  gt  lt  script gt   lt script src  file2 js  type  text javascript  gt  lt  script gt

User · Answer

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

User · Answer

If you are using javascript in HTML  you should include file1 js and file2 js inside your html    lt script src  path to file1 js  gt  lt  script gt   lt script src  path to file2 js  gt  lt  script gt    Note  file1 should come first before file2

User · Answer

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   lt script defer src  quot file1 js quot  type  quot module quot  gt  lt  script gt   lt script defer src  quot file2 js quot  type  quot module quot  gt  lt  script gt   Then  you could change your file1 js as follows  export default class Customer        constructor            this name  quot Jhon quot           this getName function                return this name                      And the file2 js as follows  import   Customer   from  quot   file1 quot   var customer new Customer     Please correct me if I am wrong

User · Answer

Create Customer class as follows  export default class Customer        Import the class     no need for  js extension in path cos 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

[javascript] How to instantiate a javascript class in another js file?

Examples related to javascript