What techniques can be used to define a class in JavaScript and what are their trade-offs

Question

I prefer to use OOP in large scale projects like the one I m working on right now  I need to create several classes in JavaScript but  if I m not mistaken  there are at least a couple of ways to go about doing that  What would be the syntax and why would it be done in that way   I would like to avoid using third-party libraries - at least at first  Looking for other answers  I found the article Object-Oriented Programming with JavaScript  Part I  Inheritance - Doc JavaScript that discusses object-oriented programming in JavaScript  Is there a better way to do inheritance

User · Answer

x000D   x000D    new way using this and new x000D  function Persons name    x000D    this name   name  x000D    this greeting   function     x000D      alert  Hi  I  m     this name         x000D       x000D    x000D   x000D  var gee new Persons  gee    x000D  gee greeting    x000D   x000D  var gray new Persons  gray    x000D  gray greeting    x000D   x000D    old way x000D  function createPerson name   x000D   var obj     x000D   obj name name  x000D   obj greeting   function    x000D   console log  hello I am  obj name   x000D       x000D    return obj  x000D    x000D   x000D  var gita createPerson  Gita    x000D  gita greeting    x000D   x000D   x000D

User · Answer

I prefer to use Daniel X  Moore s  SUPER  SYSTEM   This is a discipline that provides benefits such as true instance variables  trait based inheritance  class hierarchies and configuration options  The example below illustrates the use of true instance variables  which I believe is the biggest advantage  If you don t need instance variables and are happy with only public or private variables then there are probably simpler systems   function Person I      I   I           Object reverseMerge I        name   McLovin       age  25      homeState   Hawaii           return       introduce  function           return  Hi I m     I name     and I m     I age                var fogel   Person     age   old enough      fogel introduce        Hi I m McLovin and I m old enough    Wow  that s not really very useful on it s own  but take a look at adding a subclass   function Ninja I      I   I           Object reverseMerge I        belt   black              Ninja is a subclass of person   return Object extend Person I         greetChallenger  function           return  In all my     I age     years as a ninja  I ve never met a challenger as worthy as you                     var resig   Ninja  name   John Resig      resig introduce        Hi I m John Resig and I m 25    Another advantage is the ability to have modules and trait based inheritance      The Bindable module function Bindable        var eventCallbacks          return       bind  function event  callback          eventCallbacks event    eventCallbacks event                eventCallbacks event  push callback               trigger  function event          var callbacks   eventCallbacks event          if callbacks  amp  amp  callbacks length            var self   this          callbacks forEach function callback              callback self                                       An example of having the person class include the bindable module   function Person I      I   I           Object reverseMerge I        name   McLovin       age  25      homeState   Hawaii           var self         introduce  function           return  Hi I m     I name     and I m     I age                   Including the Bindable module   Object extend self  Bindable        return self     var person   Person    person bind  eat   function       alert person introduce       and I m eating          person trigger  eat       Blasts the alert    Disclosure  I am Daniel X  Moore and this is my  SUPER  SYSTEM   It is the best way to define a class in JavaScript

User · Answer

If you re going for simple  you can avoid the  new  keyword entirely and just use factory methods   I prefer this  sometimes  because I like using JSON to create objects   function getSomeObj var1  var2     var obj          instancevar1  var1       instancevar2  var2       someMethod  function param                       stuff                 return obj     var myobj   getSomeObj  var1    var2    myobj someMethod  bla      I m not sure what the performance hit is for large objects  though

User · Answer

Code golf for  liammclennan s answer    x000D   x000D  var Animal   function  args    x000D    return   x000D      name  args name  x000D   x000D      getName  function      x000D        return this name     member access x000D         x000D   x000D      callGetName  function      x000D        return this getName       method call x000D        x000D       x000D     x000D   x000D  var cat   Animal   name   tiger      x000D  console log cat callGetName     x000D   x000D   x000D

User · Answer

I prefer to use Daniel X  Moore s  SUPER  SYSTEM   This is a discipline that provides benefits such as true instance variables  trait based inheritance  class hierarchies and configuration options  The example below illustrates the use of true instance variables  which I believe is the biggest advantage  If you don t need instance variables and are happy with only public or private variables then there are probably simpler systems   function Person I      I   I           Object reverseMerge I        name   McLovin       age  25      homeState   Hawaii           return       introduce  function           return  Hi I m     I name     and I m     I age                var fogel   Person     age   old enough      fogel introduce        Hi I m McLovin and I m old enough    Wow  that s not really very useful on it s own  but take a look at adding a subclass   function Ninja I      I   I           Object reverseMerge I        belt   black              Ninja is a subclass of person   return Object extend Person I         greetChallenger  function           return  In all my     I age     years as a ninja  I ve never met a challenger as worthy as you                     var resig   Ninja  name   John Resig      resig introduce        Hi I m John Resig and I m 25    Another advantage is the ability to have modules and trait based inheritance      The Bindable module function Bindable        var eventCallbacks          return       bind  function event  callback          eventCallbacks event    eventCallbacks event                eventCallbacks event  push callback               trigger  function event          var callbacks   eventCallbacks event          if callbacks  amp  amp  callbacks length            var self   this          callbacks forEach function callback              callback self                                       An example of having the person class include the bindable module   function Person I      I   I           Object reverseMerge I        name   McLovin       age  25      homeState   Hawaii           var self         introduce  function           return  Hi I m     I name     and I m     I age                   Including the Bindable module   Object extend self  Bindable        return self     var person   Person    person bind  eat   function       alert person introduce       and I m eating          person trigger  eat       Blasts the alert    Disclosure  I am Daniel X  Moore and this is my  SUPER  SYSTEM   It is the best way to define a class in JavaScript

User · Answer

The simple way is   function Foo a      var that this     function privateMethod                public methods   that add   function b        return a   b         that avg   function b        return that add b    2     calling another public method         var x   new Foo 10   alert x add 2       12 alert x avg 20       15   The reason for that is that this can be bound to something else if you give a method as an event handler  so you save the value during instantiation and use it later   Edit  it s definitely not the best way  just a simple way  I m waiting for good answers too

User · Answer

JavaScript is object-oriented  but it s radically different than other OOP languages like Java  C  or C    Don t try to understand it like that  Throw that old knowledge out and start anew  JavaScript needs a different thinking   I d suggest to get a good manual or something on the subject  I myself found ExtJS Tutorials the best for me  although I haven t used the framework before or after reading it  But it does give a good explanation about what is what in JavaScript world  Sorry  it seems that that content has been removed  Here s a link to archive org copy instead  Works today   P

User · Answer

A base  function Base kind        this kind   kind      A class     Shared var var  greeting    function  init         Class prototype   new Base        Class prototype constructor   Class      Class prototype log   function      log apply this  arguments          greeting    Good afternoon           function Class name  kind        Base call this  kind       this name   name        Shared function function  log         console log  greeting     Me name is     this name     and I m a     this kind       Action  var c   new Class  Joe    Object    c log        Good afternoon  Me name is Joe and I m a Object

User · Answer

Because I will not admit the YUI Crockford factory plan and because I like to keep things self contained and extensible this is my variation   function Person params      this name   params name    defaultnamevalue    this role   params role    defaultrolevalue     if typeof this speak    undefined     guarantees one time prototyping         Person prototype speak   function       do whatever             var Robert   new Person  name  Bob       where ideally the typeof test is on something like the first method prototyped

User · Answer

Following are the ways to create objects in javascript  which I ve used so far  Example 1   obj   new Object    obj name    test   obj sayHello   function         console log  Hello    this name       Example 2   obj       obj name    test   obj sayHello   function         console log  Hello    this name     obj sayHello      Example 3   var obj   function nameParam        this name   nameParam    obj prototype sayHello   function         console log  Hello    this name       Example 4  Actual benefits of Object create    please refer  this link    var Obj         init  function nameParam            this name   nameParam             sayHello  function             console log  Hello    this name            var usrObj   Object create Obj        lt    one level of inheritance  usrObj init  Bob    usrObj sayHello      Example 5  customised Crockford s Object create    Object build   function o       var initArgs   Array prototype slice call arguments 1     function F           if  typeof o init      function    amp  amp  initArgs length             o init apply this initArgs                  F prototype   o    return new F     MY GLOBAL    i  1  nextId  function   return this i         For example  var userB         init  function nameParam            this id   MY GLOBAL nextId            this name   nameParam             sayHello  function             console log  Hello    this name            var bob   Object build userB   Bob        Different from your code bob sayHello       To keep answer updated with ES6  ES2015  A class is defined like this   class Person       constructor strName  numAge            this name   strName          this age   numAge             toString             return    Class  Person  named     this name      amp  of age     this age                 let objPerson   new Person  Bob  33   console log objPerson toString

User · Answer

var Animal   function options        var name   options name      var animal            animal getName   function             return name              var somePrivateMethod   function                  return animal         usage var cat   Animal  name   tiger

User · Answer

ES2015 Classes  In the ES2015 specification  you can use the class syntax which is just sugar over the prototype system   class Person     constructor name        this name   name        toString         return  My name is    this name             class Employee extends Person     constructor name  hours        super name       this hours   hours        toString         return     super toString     I work    this hours   hours            Benefits  The main benefit is that static analysis tools find it easier to target this syntax  It is also easier for others coming from class-based languages to use the language as a polyglot    Caveats  Be wary of its current limitations  To achieve private properties  one must resort to using Symbols or WeakMaps  In future releases  classes will most likely be expanded to include these missing features   Support  Browser support isn t very good at the moment  supported by nearly everyone except IE   but you can use these features now with a transpiler like Babel   Resources   Classes in ECMAScript 6  final semantics  What  Wait  Really  Oh no   a post about ES6 classes and privacy  Compatibility Table     Classes Babel     Classes

User · Answer

I think you should read Douglas Crockford s Prototypal Inheritance in JavaScript and Classical Inheritance in JavaScript   Examples from his page   Function prototype method   function  name  func        this prototype name    func      return this       Effect  It will allow you to add methods in more elegant way   function Parenizor value        this setValue value      Parenizor method  setValue   function  value        this value   value      return this        I also recommend his videos  Advanced JavaScript   You can find more videos on his page  http   javascript crockford com  In John Reisig book you can find many examples from Douglas Crockfor s website

User · Answer

JavaScript is object-oriented  but it s radically different than other OOP languages like Java  C  or C    Don t try to understand it like that  Throw that old knowledge out and start anew  JavaScript needs a different thinking   I d suggest to get a good manual or something on the subject  I myself found ExtJS Tutorials the best for me  although I haven t used the framework before or after reading it  But it does give a good explanation about what is what in JavaScript world  Sorry  it seems that that content has been removed  Here s a link to archive org copy instead  Works today   P

User · Answer

MooTools  My Object Oriented Tools  is centered on the idea of classes   You can even extend and implement with inheritance     When mastered  it makes for ridiculously reusable  powerful javascript

User · Answer

Object Based Classes with Inheritence  var baseObject              Replication   Constructor function      new   function             return Object create this                   aProperty   null      aMethod   function param         alert  Heres your     param                    newObject   baseObject new    newObject aProperty    Hello    anotherObject   Object create baseObject    anotherObject aProperty    There    console log newObject aProperty      Hello  console log anotherObject aProperty      There  console log baseObject aProperty     null   Simple  sweet  and gets  er done

User · Answer

var Student    function          function Student firstname  lastname            this firstname   firstname          this lastname   lastname          this fullname   firstname         lastname             Student prototype sayMyName   function              return this fullname              return Student         var user   new Student  Jane    User    var user fullname   user sayMyName      Thats the way TypeScript compiles class with constructor to JavaScript

User · Answer

JavaScript is object-oriented  but it s radically different than other OOP languages like Java  C  or C    Don t try to understand it like that  Throw that old knowledge out and start anew  JavaScript needs a different thinking   I d suggest to get a good manual or something on the subject  I myself found ExtJS Tutorials the best for me  although I haven t used the framework before or after reading it  But it does give a good explanation about what is what in JavaScript world  Sorry  it seems that that content has been removed  Here s a link to archive org copy instead  Works today   P

User · Answer

The best way to define a class in JavaScript is to not define a class   Seriously   There are several different flavors of object-orientation  some of them are     class-based OO  first introduced by Smalltalk  prototype-based OO  first introduced by Self  multimethod-based OO  first introduced by CommonLoops  I think  predicate-based OO  no idea    And probably others I don t know about   JavaScript implements prototype-based OO  In prototype-based OO  new objects are created by copying other objects  instead of being instantiated from a class template  and methods live directly in objects instead of in classes  Inheritance is done via delegation  if an object doesn t have a method or property  it is looked up on its prototype s   i e  the object it was cloned from   then the prototype s prototypes and so on   In other words  there are no classes   JavaScript actually has a nice tweak of that model  constructors  Not only can you create objects by copying existing ones  you can also construct them  out of thin air   so to speak  If you call a function with the new keyword  that function becomes a constructor and the this keyword will not point to the current object but instead to a newly created  empty  one  So  you can configure an object any way you like  In that way  JavaScript constructors can take on one of the roles of classes in traditional class-based OO  serving as a template or blueprint for new objects   Now  JavaScript is a very powerful language  so it is quite easy to implement a class-based OO system within JavaScript if you want to  However  you should only do this if you really have a need for it and not just because that s the way Java does it

User · Answer

The best way to define a class in JavaScript is to not define a class   Seriously   There are several different flavors of object-orientation  some of them are     class-based OO  first introduced by Smalltalk  prototype-based OO  first introduced by Self  multimethod-based OO  first introduced by CommonLoops  I think  predicate-based OO  no idea    And probably others I don t know about   JavaScript implements prototype-based OO  In prototype-based OO  new objects are created by copying other objects  instead of being instantiated from a class template  and methods live directly in objects instead of in classes  Inheritance is done via delegation  if an object doesn t have a method or property  it is looked up on its prototype s   i e  the object it was cloned from   then the prototype s prototypes and so on   In other words  there are no classes   JavaScript actually has a nice tweak of that model  constructors  Not only can you create objects by copying existing ones  you can also construct them  out of thin air   so to speak  If you call a function with the new keyword  that function becomes a constructor and the this keyword will not point to the current object but instead to a newly created  empty  one  So  you can configure an object any way you like  In that way  JavaScript constructors can take on one of the roles of classes in traditional class-based OO  serving as a template or blueprint for new objects   Now  JavaScript is a very powerful language  so it is quite easy to implement a class-based OO system within JavaScript if you want to  However  you should only do this if you really have a need for it and not just because that s the way Java does it

User · Answer

Here s the way to do it without using any external libraries      Define a class like this function Person name  gender          Add object properties like this    this name   name     this gender   gender        Add methods like this   All Person objects will be able to invoke this Person prototype speak   function        alert  Howdy  my name is    this name          Instantiate new objects with  new  var person   new Person  Bob    M        Invoke methods like this person speak       alerts  Howdy  my name is Bob    Now the real answer is a whole lot more complex than that  For instance  there is no such thing as classes in JavaScript  JavaScript uses a prototype-based inheritance scheme     In addition  there are numerous popular JavaScript libraries that have their own style of approximating class-like functionality in JavaScript  You ll want to check out at least Prototype and jQuery     Deciding which of these is the  best  is a great way to start a holy war on Stack nbsp Overflow  If you re embarking on a larger JavaScript-heavy project  it s definitely worth learning a popular library and doing it their way  I m a Prototype guy  but Stack nbsp Overflow seems to lean towards jQuery   As far as there being only  one way to do it   without any dependencies on external libraries  the way I wrote is pretty much it

User · Answer

The best way to define a class in JavaScript is to not define a class   Seriously   There are several different flavors of object-orientation  some of them are     class-based OO  first introduced by Smalltalk  prototype-based OO  first introduced by Self  multimethod-based OO  first introduced by CommonLoops  I think  predicate-based OO  no idea    And probably others I don t know about   JavaScript implements prototype-based OO  In prototype-based OO  new objects are created by copying other objects  instead of being instantiated from a class template  and methods live directly in objects instead of in classes  Inheritance is done via delegation  if an object doesn t have a method or property  it is looked up on its prototype s   i e  the object it was cloned from   then the prototype s prototypes and so on   In other words  there are no classes   JavaScript actually has a nice tweak of that model  constructors  Not only can you create objects by copying existing ones  you can also construct them  out of thin air   so to speak  If you call a function with the new keyword  that function becomes a constructor and the this keyword will not point to the current object but instead to a newly created  empty  one  So  you can configure an object any way you like  In that way  JavaScript constructors can take on one of the roles of classes in traditional class-based OO  serving as a template or blueprint for new objects   Now  JavaScript is a very powerful language  so it is quite easy to implement a class-based OO system within JavaScript if you want to  However  you should only do this if you really have a need for it and not just because that s the way Java does it

User · Answer

Here s the way to do it without using any external libraries      Define a class like this function Person name  gender          Add object properties like this    this name   name     this gender   gender        Add methods like this   All Person objects will be able to invoke this Person prototype speak   function        alert  Howdy  my name is    this name          Instantiate new objects with  new  var person   new Person  Bob    M        Invoke methods like this person speak       alerts  Howdy  my name is Bob    Now the real answer is a whole lot more complex than that  For instance  there is no such thing as classes in JavaScript  JavaScript uses a prototype-based inheritance scheme     In addition  there are numerous popular JavaScript libraries that have their own style of approximating class-like functionality in JavaScript  You ll want to check out at least Prototype and jQuery     Deciding which of these is the  best  is a great way to start a holy war on Stack nbsp Overflow  If you re embarking on a larger JavaScript-heavy project  it s definitely worth learning a popular library and doing it their way  I m a Prototype guy  but Stack nbsp Overflow seems to lean towards jQuery   As far as there being only  one way to do it   without any dependencies on external libraries  the way I wrote is pretty much it

User · Answer

You probably want to create a type by using the Folding Pattern          Here is the constructor section      var myType   function              var N          Enclosed  private  members are here              X   this     Exposed  public  members are here            function ENCLOSED FIELDS                 N toggle   false              N text                               function EXPOSED FIELDS                 X count   0              X numbers    1  2  3                             The properties below have access to the enclosed fields             Careful with functions exposed within the closure of the            constructor  each new instance will have it s own copy           function EXPOSED PROPERTIES WITHIN CONSTRUCTOR                 Object defineProperty X   toggle                     get  function                          var before   N toggle                      N toggle    N toggle                      return before                                                 Object defineProperty X   text                     get  function                          return N text                                     set  function  value                        N text   value                                                                 Here is the prototype section       function PROTOTYPE             var P   myType prototype            function EXPOSED PROPERTIES WITHIN PROTOTYPE                 Object defineProperty P   numberLength                     get  function                          return this numbers length                                                            function EXPOSED METHODS                 P incrementNumbersByCount   function                      var i                  for  i   0  i  lt  this numbers length  i                          this numbers i     this count                                               P tweak   function                      if  this toggle                        this count                                      this text    tweaked                                            That code will give you a type called myType  It will have internal private fields called toggle and text  It will also have these exposed members  the fields count and numbers  the properties toggle  text and numberLength  the methods incrementNumbersByCount and tweak   The Folding Pattern is fully detailed here  Javascript Folding Pattern

User · Answer

I think you should read Douglas Crockford s Prototypal Inheritance in JavaScript and Classical Inheritance in JavaScript   Examples from his page   Function prototype method   function  name  func        this prototype name    func      return this       Effect  It will allow you to add methods in more elegant way   function Parenizor value        this setValue value      Parenizor method  setValue   function  value        this value   value      return this        I also recommend his videos  Advanced JavaScript   You can find more videos on his page  http   javascript crockford com  In John Reisig book you can find many examples from Douglas Crockfor s website

User · Answer

Here s the way to do it without using any external libraries      Define a class like this function Person name  gender          Add object properties like this    this name   name     this gender   gender        Add methods like this   All Person objects will be able to invoke this Person prototype speak   function        alert  Howdy  my name is    this name          Instantiate new objects with  new  var person   new Person  Bob    M        Invoke methods like this person speak       alerts  Howdy  my name is Bob    Now the real answer is a whole lot more complex than that  For instance  there is no such thing as classes in JavaScript  JavaScript uses a prototype-based inheritance scheme     In addition  there are numerous popular JavaScript libraries that have their own style of approximating class-like functionality in JavaScript  You ll want to check out at least Prototype and jQuery     Deciding which of these is the  best  is a great way to start a holy war on Stack nbsp Overflow  If you re embarking on a larger JavaScript-heavy project  it s definitely worth learning a popular library and doing it their way  I m a Prototype guy  but Stack nbsp Overflow seems to lean towards jQuery   As far as there being only  one way to do it   without any dependencies on external libraries  the way I wrote is pretty much it

User · Answer

A base  function Base kind        this kind   kind      A class     Shared var var  greeting    function  init         Class prototype   new Base        Class prototype constructor   Class      Class prototype log   function      log apply this  arguments          greeting    Good afternoon           function Class name  kind        Base call this  kind       this name   name        Shared function function  log         console log  greeting     Me name is     this name     and I m a     this kind       Action  var c   new Class  Joe    Object    c log        Good afternoon  Me name is Joe and I m a Object

User · Answer

JavaScript is object-oriented  but it s radically different than other OOP languages like Java  C  or C    Don t try to understand it like that  Throw that old knowledge out and start anew  JavaScript needs a different thinking   I d suggest to get a good manual or something on the subject  I myself found ExtJS Tutorials the best for me  although I haven t used the framework before or after reading it  But it does give a good explanation about what is what in JavaScript world  Sorry  it seems that that content has been removed  Here s a link to archive org copy instead  Works today   P

User · Answer

Because I will not admit the YUI Crockford factory plan and because I like to keep things self contained and extensible this is my variation   function Person params      this name   params name    defaultnamevalue    this role   params role    defaultrolevalue     if typeof this speak    undefined     guarantees one time prototyping         Person prototype speak   function       do whatever             var Robert   new Person  name  Bob       where ideally the typeof test is on something like the first method prototyped

User · Answer

I think you should read Douglas Crockford s Prototypal Inheritance in JavaScript and Classical Inheritance in JavaScript   Examples from his page   Function prototype method   function  name  func        this prototype name    func      return this       Effect  It will allow you to add methods in more elegant way   function Parenizor value        this setValue value      Parenizor method  setValue   function  value        this value   value      return this        I also recommend his videos  Advanced JavaScript   You can find more videos on his page  http   javascript crockford com  In John Reisig book you can find many examples from Douglas Crockfor s website

User · Answer

Object Based Classes with Inheritence  var baseObject              Replication   Constructor function      new   function             return Object create this                   aProperty   null      aMethod   function param         alert  Heres your     param                    newObject   baseObject new    newObject aProperty    Hello    anotherObject   Object create baseObject    anotherObject aProperty    There    console log newObject aProperty      Hello  console log anotherObject aProperty      There  console log baseObject aProperty     null   Simple  sweet  and gets  er done

User · Answer

ES2015 Classes  In the ES2015 specification  you can use the class syntax which is just sugar over the prototype system   class Person     constructor name        this name   name        toString         return  My name is    this name             class Employee extends Person     constructor name  hours        super name       this hours   hours        toString         return     super toString     I work    this hours   hours            Benefits  The main benefit is that static analysis tools find it easier to target this syntax  It is also easier for others coming from class-based languages to use the language as a polyglot    Caveats  Be wary of its current limitations  To achieve private properties  one must resort to using Symbols or WeakMaps  In future releases  classes will most likely be expanded to include these missing features   Support  Browser support isn t very good at the moment  supported by nearly everyone except IE   but you can use these features now with a transpiler like Babel   Resources   Classes in ECMAScript 6  final semantics  What  Wait  Really  Oh no   a post about ES6 classes and privacy  Compatibility Table     Classes Babel     Classes

User · Answer

If you re going for simple  you can avoid the  new  keyword entirely and just use factory methods   I prefer this  sometimes  because I like using JSON to create objects   function getSomeObj var1  var2     var obj          instancevar1  var1       instancevar2  var2       someMethod  function param                       stuff                 return obj     var myobj   getSomeObj  var1    var2    myobj someMethod  bla      I m not sure what the performance hit is for large objects  though

User · Answer

Because I will not admit the YUI Crockford factory plan and because I like to keep things self contained and extensible this is my variation   function Person params      this name   params name    defaultnamevalue    this role   params role    defaultrolevalue     if typeof this speak    undefined     guarantees one time prototyping         Person prototype speak   function       do whatever             var Robert   new Person  name  Bob       where ideally the typeof test is on something like the first method prototyped

User · Answer

The best way to define a class in JavaScript is to not define a class   Seriously   There are several different flavors of object-orientation  some of them are     class-based OO  first introduced by Smalltalk  prototype-based OO  first introduced by Self  multimethod-based OO  first introduced by CommonLoops  I think  predicate-based OO  no idea    And probably others I don t know about   JavaScript implements prototype-based OO  In prototype-based OO  new objects are created by copying other objects  instead of being instantiated from a class template  and methods live directly in objects instead of in classes  Inheritance is done via delegation  if an object doesn t have a method or property  it is looked up on its prototype s   i e  the object it was cloned from   then the prototype s prototypes and so on   In other words  there are no classes   JavaScript actually has a nice tweak of that model  constructors  Not only can you create objects by copying existing ones  you can also construct them  out of thin air   so to speak  If you call a function with the new keyword  that function becomes a constructor and the this keyword will not point to the current object but instead to a newly created  empty  one  So  you can configure an object any way you like  In that way  JavaScript constructors can take on one of the roles of classes in traditional class-based OO  serving as a template or blueprint for new objects   Now  JavaScript is a very powerful language  so it is quite easy to implement a class-based OO system within JavaScript if you want to  However  you should only do this if you really have a need for it and not just because that s the way Java does it

User · Answer

If you re going for simple  you can avoid the  new  keyword entirely and just use factory methods   I prefer this  sometimes  because I like using JSON to create objects   function getSomeObj var1  var2     var obj          instancevar1  var1       instancevar2  var2       someMethod  function param                       stuff                 return obj     var myobj   getSomeObj  var1    var2    myobj someMethod  bla      I m not sure what the performance hit is for large objects  though

User · Answer

var Animal   function options        var name   options name      var animal            animal getName   function             return name              var somePrivateMethod   function                  return animal         usage var cat   Animal  name   tiger

User · Answer

I think you should read Douglas Crockford s Prototypal Inheritance in JavaScript and Classical Inheritance in JavaScript   Examples from his page   Function prototype method   function  name  func        this prototype name    func      return this       Effect  It will allow you to add methods in more elegant way   function Parenizor value        this setValue value      Parenizor method  setValue   function  value        this value   value      return this        I also recommend his videos  Advanced JavaScript   You can find more videos on his page  http   javascript crockford com  In John Reisig book you can find many examples from Douglas Crockfor s website

User · Answer

var Student    function          function Student firstname  lastname            this firstname   firstname          this lastname   lastname          this fullname   firstname         lastname             Student prototype sayMyName   function              return this fullname              return Student         var user   new Student  Jane    User    var user fullname   user sayMyName      Thats the way TypeScript compiles class with constructor to JavaScript

User · Answer

The simple way is   function Foo a      var that this     function privateMethod                public methods   that add   function b        return a   b         that avg   function b        return that add b    2     calling another public method         var x   new Foo 10   alert x add 2       12 alert x avg 20       15   The reason for that is that this can be bound to something else if you give a method as an event handler  so you save the value during instantiation and use it later   Edit  it s definitely not the best way  just a simple way  I m waiting for good answers too

User · Answer

If you re going for simple  you can avoid the  new  keyword entirely and just use factory methods   I prefer this  sometimes  because I like using JSON to create objects   function getSomeObj var1  var2     var obj          instancevar1  var1       instancevar2  var2       someMethod  function param                       stuff                 return obj     var myobj   getSomeObj  var1    var2    myobj someMethod  bla      I m not sure what the performance hit is for large objects  though

User · Answer

Based on the example of Triptych  this might even be simpler          Define a class and instantiate it     var ThePerson   new function Person name  gender               Add class data members         this name   name          this gender   gender             Add class methods         this hello   function      alert  Hello  this is     this name            Bob    M       this instantiates the  new  object         Use the object     ThePerson hello       alerts  Hello  this is Bob    This only creates a single object instance  but is still useful if you want to encapsulate a bunch of names for variable and methods in a class  Normally there would not be the  Bob  M  arguments to the constructor  for example if the methods would be calls to a system with its own data  such as a database or network   I am still too new with JS to see why this does not use the prototype thing

User · Answer

The simple way is   function Foo a      var that this     function privateMethod                public methods   that add   function b        return a   b         that avg   function b        return that add b    2     calling another public method         var x   new Foo 10   alert x add 2       12 alert x avg 20       15   The reason for that is that this can be bound to something else if you give a method as an event handler  so you save the value during instantiation and use it later   Edit  it s definitely not the best way  just a simple way  I m waiting for good answers too

User · Answer

Following are the ways to create objects in javascript  which I ve used so far  Example 1   obj   new Object    obj name    test   obj sayHello   function         console log  Hello    this name       Example 2   obj       obj name    test   obj sayHello   function         console log  Hello    this name     obj sayHello      Example 3   var obj   function nameParam        this name   nameParam    obj prototype sayHello   function         console log  Hello    this name       Example 4  Actual benefits of Object create    please refer  this link    var Obj         init  function nameParam            this name   nameParam             sayHello  function             console log  Hello    this name            var usrObj   Object create Obj        lt    one level of inheritance  usrObj init  Bob    usrObj sayHello      Example 5  customised Crockford s Object create    Object build   function o       var initArgs   Array prototype slice call arguments 1     function F           if  typeof o init      function    amp  amp  initArgs length             o init apply this initArgs                  F prototype   o    return new F     MY GLOBAL    i  1  nextId  function   return this i         For example  var userB         init  function nameParam            this id   MY GLOBAL nextId            this name   nameParam             sayHello  function             console log  Hello    this name            var bob   Object build userB   Bob        Different from your code bob sayHello       To keep answer updated with ES6  ES2015  A class is defined like this   class Person       constructor strName  numAge            this name   strName          this age   numAge             toString             return    Class  Person  named     this name      amp  of age     this age                 let objPerson   new Person  Bob  33   console log objPerson toString

User · Answer

Because I will not admit the YUI Crockford factory plan and because I like to keep things self contained and extensible this is my variation   function Person params      this name   params name    defaultnamevalue    this role   params role    defaultrolevalue     if typeof this speak    undefined     guarantees one time prototyping         Person prototype speak   function       do whatever             var Robert   new Person  name  Bob       where ideally the typeof test is on something like the first method prototyped

User · Answer

The simple way is   function Foo a      var that this     function privateMethod                public methods   that add   function b        return a   b         that avg   function b        return that add b    2     calling another public method         var x   new Foo 10   alert x add 2       12 alert x avg 20       15   The reason for that is that this can be bound to something else if you give a method as an event handler  so you save the value during instantiation and use it later   Edit  it s definitely not the best way  just a simple way  I m waiting for good answers too

User · Answer

Code golf for  liammclennan s answer    x000D   x000D  var Animal   function  args    x000D    return   x000D      name  args name  x000D   x000D      getName  function      x000D        return this name     member access x000D         x000D   x000D      callGetName  function      x000D        return this getName       method call x000D        x000D       x000D     x000D   x000D  var cat   Animal   name   tiger      x000D  console log cat callGetName     x000D   x000D   x000D

User · Answer

Based on the example of Triptych  this might even be simpler          Define a class and instantiate it     var ThePerson   new function Person name  gender               Add class data members         this name   name          this gender   gender             Add class methods         this hello   function      alert  Hello  this is     this name            Bob    M       this instantiates the  new  object         Use the object     ThePerson hello       alerts  Hello  this is Bob    This only creates a single object instance  but is still useful if you want to encapsulate a bunch of names for variable and methods in a class  Normally there would not be the  Bob  M  arguments to the constructor  for example if the methods would be calls to a system with its own data  such as a database or network   I am still too new with JS to see why this does not use the prototype thing

User · Answer

x000D   x000D    new way using this and new x000D  function Persons name    x000D    this name   name  x000D    this greeting   function     x000D      alert  Hi  I  m     this name         x000D       x000D    x000D   x000D  var gee new Persons  gee    x000D  gee greeting    x000D   x000D  var gray new Persons  gray    x000D  gray greeting    x000D   x000D    old way x000D  function createPerson name   x000D   var obj     x000D   obj name name  x000D   obj greeting   function    x000D   console log  hello I am  obj name   x000D       x000D    return obj  x000D    x000D   x000D  var gita createPerson  Gita    x000D  gita greeting    x000D   x000D   x000D

User · Answer

You probably want to create a type by using the Folding Pattern          Here is the constructor section      var myType   function              var N          Enclosed  private  members are here              X   this     Exposed  public  members are here            function ENCLOSED FIELDS                 N toggle   false              N text                               function EXPOSED FIELDS                 X count   0              X numbers    1  2  3                             The properties below have access to the enclosed fields             Careful with functions exposed within the closure of the            constructor  each new instance will have it s own copy           function EXPOSED PROPERTIES WITHIN CONSTRUCTOR                 Object defineProperty X   toggle                     get  function                          var before   N toggle                      N toggle    N toggle                      return before                                                 Object defineProperty X   text                     get  function                          return N text                                     set  function  value                        N text   value                                                                 Here is the prototype section       function PROTOTYPE             var P   myType prototype            function EXPOSED PROPERTIES WITHIN PROTOTYPE                 Object defineProperty P   numberLength                     get  function                          return this numbers length                                                            function EXPOSED METHODS                 P incrementNumbersByCount   function                      var i                  for  i   0  i  lt  this numbers length  i                          this numbers i     this count                                               P tweak   function                      if  this toggle                        this count                                      this text    tweaked                                            That code will give you a type called myType  It will have internal private fields called toggle and text  It will also have these exposed members  the fields count and numbers  the properties toggle  text and numberLength  the methods incrementNumbersByCount and tweak   The Folding Pattern is fully detailed here  Javascript Folding Pattern

User · Answer

MooTools  My Object Oriented Tools  is centered on the idea of classes   You can even extend and implement with inheritance     When mastered  it makes for ridiculously reusable  powerful javascript

User · Answer

Here s the way to do it without using any external libraries      Define a class like this function Person name  gender          Add object properties like this    this name   name     this gender   gender        Add methods like this   All Person objects will be able to invoke this Person prototype speak   function        alert  Howdy  my name is    this name          Instantiate new objects with  new  var person   new Person  Bob    M        Invoke methods like this person speak       alerts  Howdy  my name is Bob    Now the real answer is a whole lot more complex than that  For instance  there is no such thing as classes in JavaScript  JavaScript uses a prototype-based inheritance scheme     In addition  there are numerous popular JavaScript libraries that have their own style of approximating class-like functionality in JavaScript  You ll want to check out at least Prototype and jQuery     Deciding which of these is the  best  is a great way to start a holy war on Stack nbsp Overflow  If you re embarking on a larger JavaScript-heavy project  it s definitely worth learning a popular library and doing it their way  I m a Prototype guy  but Stack nbsp Overflow seems to lean towards jQuery   As far as there being only  one way to do it   without any dependencies on external libraries  the way I wrote is pretty much it

[javascript] What techniques can be used to define a class in JavaScript, and what are their trade-offs?

Examples related to javascript

Examples related to oop

Examples related to class