Constructors in JavaScript objects

Question

Can JavaScript classes objects have constructors  How are they created

User · Answer

I guess I ll post what I do with javascript closure since no one is using closure yet    var user   function id         private properties  amp  methods goes here    var someValue    function doSomething data        someValue   data             constructor goes here    if   id  return null        public properties  amp  methods goes here    return       id  id      method  function params          doSomething params                   Comments and suggestions to this solution are welcome

User · Answer

Here we need to notice one point in java script  it is a class-less language however we can achieve it by using functions in java script  The most common way to achieve this we need to create a function in java script and use new keyword to create an object and use this keyword to define property and methods Below is the example      Function constructor     var calculator function num1  num2      this name  This is function constructor      this mulFunc function          return num1 num2            var objCal new calculator 10 10     This is a constructor in java script alert objCal mulFunc       method call alert objCal name     property call    Constructors With Prototypes  var calculator function       this name  Constructors With Prototypes       calculator prototype mulFunc function num1  num2    return num1 num2     var objCal new calculator      This is a constructor in java script alert objCal mulFunc 10 10      method call alert objCal name      property call

User · Answer

In JavaScript the invocation type defines the behaviour of the function    Direct invocation func   Method invocation on an object obj func   Constructor invocation new func   Indirect invocation func call   or func apply       The function is invoked as a constructor when calling using new operator   function Cat name       this name   name    Cat prototype getName   function        return this name     var myCat   new Cat  Sweet       Cat function invoked as a constructor   Any instance or prototype object in JavaScript have a property constructor  which refers to the constructor function     Cat prototype constructor     Cat      gt  true myCat constructor             Cat      gt  true   Check this post about constructor property

User · Answer

Using Nick s sample above  you can create a constructor for objects without parameters using a return statement as the last statement in your object definition  Return your constructor function as below and it will run the code in   construct each time you create the object   function Box        var   construct   function            alert  Object Created            this color    green           this color           this getColor   function            return this color             construct       var b   new Box

User · Answer

Yes  you can define a constructor inside a class declaration like this   class Rectangle     constructor height  width        this height   height      this width   width

User · Answer

So what is the point of  constructor    property  Cannot figure out where it   could be useful  any ideas    The point of the constructor property is to provide some way of pretending JavaScript has classes  One of the things you cannot usefully do is change an object s constructor after it s been created  It s complicated   I wrote a fairly comprehensive piece on it a few years ago  http   joost zeekat nl constructors-considered-mildly-confusing html

User · Answer

They do if you use Typescript - open source from MicroSoft  -   class BankAccount    balance  number   constructor initially  number     this balance   initially      deposit credit  number     this balance    credit   return this balance         Typescript lets you  fake  OO constructs that are compiled into javascript constructs  If you re starting a large project it may save you a lot of time and it just reached milestone 1 0 version   http   www typescriptlang org Content TypeScript 20Language 20Specification pdf  The above code gets  compiled  to    var BankAccount    function          function BankAccount initially            this balance   initially            BankAccount prototype deposit   function  credit            this balance    credit          return this balance             return BankAccount

User · Answer

Here s a template I sometimes use for OOP-similar behavior in JavaScript  As you can see  you can simulate private  both static and instance  members using closures  What new MyClass   will return is an object with only the properties assigned to the this object and in the prototype object of the  class    var MyClass    function             private static     var nextId   1          constructor     var cls   function                 private         var id   nextId            var name    Unknown               public  this instance only          this get id   function      return id              this get name   function      return name             this set name   function  value                if  typeof value     string                   throw  Name must be a string               if  value length  lt  2    value length  gt  20                  throw  Name must be 2-20 characters long                name   value                            public static     cls get nextId   function              return nextId                 public  shared across instances      cls prototype             announce  function                  alert  Hi there  My id is     this get id       and my name is      this get name         r n                       The next fellow  s id will be     MyClass get nextId                                 return cls          I ve been asked about inheritance using this pattern  so here goes      It s a good idea to have a utility class to wire up inheritance  function inherit cls  superCls           We use an intermediary empty constructor to create an        inheritance chain  because using the super class  constructor        might have side effects      var construct   function            construct prototype   superCls prototype      cls prototype   new construct      cls prototype constructor   cls      cls super   superCls     var MyChildClass    function             constructor     var cls   function  surName               Call super constructor on this instance  any arguments            to the constructor would go after  this  in call                this constructor super call this               Shadowing instance properties is a little bit less            intuitive  but can be done          var getName   this get name              public  this instance only          this get name   function                  return getName call this          surName                        inherit cls  MyClass       lt -- important       return cls          And an example to use it all   var bob   new MyClass    bob set name  Bob    bob announce       id is 1  name shows as  Bob   var john   new MyChildClass  Doe    john set name  John    john announce       id is 2  name shows as  John Doe   alert john instanceof MyClass      true   As you can see  the classes correctly interact with each other  they share the static id from MyClass  the announce method uses the correct get name method  etc    One thing to note is the need to shadow instance properties  You can actually make the inherit function go through all instance properties  using hasOwnProperty  that are functions  and automagically add a super  lt method name gt  property  This would let you call this super get name   instead of storing it in a temporary value and calling it bound using call   For methods on the prototype you don t need to worry about the above though  if you want to access the super class  prototype methods  you can just call this constructor super prototype methodName  If you want to make it less verbose you can of course add convenience properties

User · Answer

just to offer up some variety  ds oop is a nice way to declare classes with constructors in javascript  It supports every possible type of inheritance  Including 1 type that even c  does not support  as well as Interfaces which is nice   var Color   ds make class       type   Color       constructor  function  r g b             this r   r                         now r g  and b are available to              this g   g                         other methods in the Color class             this b   b                                 var red   new Color 255 0 0        using the new keyword to instantiate the class

User · Answer

Using prototypes   function Box color     Constructor       this color   color     Box prototype getColor   function         return this color       Hiding  color   somewhat resembles a private member variable    function Box col       var color   col      this getColor   function               return color            Usage   var blueBox   new Box  blue    alert blueBox getColor        will alert blue  var greenBox   new Box  green    alert greenBox getColor        will alert green

User · Answer

Example here  http   jsfiddle net FZ5nC   Try this template    lt script gt                                                                    Register Namespace   ------------------------------------------------------------ var Name   Name      Name Space   Name Space                                                                         Constructor - MUST BE AT TOP OF FILE   ------------------------------------------------------------ Name Space ClassName   function Name Space ClassName                                                                        Member Functions  amp  Variables   ------------------------------------------------------------ Name Space ClassName prototype       v1  null   v2  null   f1  function Name Space ClassName f1                                                                          Static Variables   ------------------------------------------------------------ Name Space ClassName staticVar   0                                                                     Static Functions   ------------------------------------------------------------ Name Space ClassName staticFunc   function Name Space ClassName staticFunc       lt  script gt    You must adjust your namespace if you are defining a static class    lt script gt                                                                    Register Namespace   ------------------------------------------------------------ var Shape   Shape      Shape Rectangle   Shape Rectangle         In previous example  Rectangle was defined in the constructor   lt  script gt    Example class    lt script gt                                                                    Register Namespace   ------------------------------------------------------------ var Shape   Shape                                                                         Constructor - MUST BE AT TOP OF FILE   ------------------------------------------------------------ Shape Rectangle   function Shape Rectangle width  height  color       this Width   width      this Height   height      this Color   color                                                                       Member Functions  amp  Variables   ------------------------------------------------------------ Shape Rectangle prototype       Width  null   Height  null   Color  null   Draw  function Shape Rectangle Draw canvasId  x  y       var canvas   document getElementById canvasId       var context   canvas getContext  2d        context fillStyle   this Color      context fillRect x  y  this Width  this Height                                                                           Static Variables   ------------------------------------------------------------ Shape Rectangle Sides   4                                                                     Static Functions   ------------------------------------------------------------ Shape Rectangle CreateSmallBlue   function Shape Rectangle CreateSmallBlue        return new Shape Rectangle 5 8   0000ff      Shape Rectangle CreateBigRed   function Shape Rectangle CreateBigRed        return new Shape Rectangle 50 25   ff0000       lt  script gt    Example instantiation    lt canvas id  painting  width  500  height  500  gt  lt  canvas gt   lt script gt  alert  A rectangle has   Shape Rectangle Sides   sides      var r1   new Shape Rectangle 16  12    aa22cc    r1 Draw  painting  0  20    var r2   Shape Rectangle CreateSmallBlue    r2 Draw  painting   0  0    Shape Rectangle CreateBigRed   Draw  painting   10  0    lt  script gt    Notice functions are defined as A B   function A B    This is to make your script easier to debug  Open Chrome s Inspect Element panel  run this script  and expand the debug backtrace    lt script gt                                                                    Register Namespace   ------------------------------------------------------------ var Fail   Fail                                                                         Static Functions   ------------------------------------------------------------ Fail Test   function Fail Test        A Func That Does Not Exist       Fail Test     lt  script gt

User · Answer

Maybe it s gotten a little simpler  but below is what I ve come up with now in 2017   class obj     constructor in shape  in color       this shape   in shape      this color   in color         getInfo        return this shape     and     this color        setShape in shape       this shape   in shape        setColor in color       this color   in color          In using the class above  I have the following   var newobj   new obj  square    blue       Here  we expect to see  square and blue  console log newobj getInfo       newobj setColor  white    newobj setShape  sphere       Since we ve set new color and shape  we expect the following   sphere and white  console log newobj getInfo       As you can see  the constructor takes in two parameters  and we set the object s properties  We also alter the object s color and shape by using the setter functions  and prove that its change remained upon calling getInfo   after these changes   A bit late  but I hope this helps  I ve tested this with a mocha unit-testing  and it s working well

User · Answer

I found this tutorial very useful  This approach is used by most of jQuery plug-ins    http   www htmlgoodies com html5 tutorials create-an-object-oriented-javascript-class-constructor html fbid OVYAQL TDpK  var Class   function methods           var klass   function                 this initialize apply this  arguments                           for  var property in methods            klass prototype property    methods property              if   klass prototype initialize  klass prototype initialize   function                 return klass           Now    var Person   Class        initialize  function name  age            this name   name          this age    age             toString  function             return  My name is   this name   and I am   this age   years old                var alice   new Person  Alice   26   alert alice name     displays  Alice  alert alice age     displays  26  alert alice toString       displays  My name is Alice and I am 26 years old  in most browsers    IE 8 and below display the Object s toString   instead    Object object

User · Answer

This pattern has served me well  With this pattern  you create classes in separate files  load them into your overall app  as needed       Namespace     Creating new if not instantiated yet  otherwise  use existing and just add to it  var myApp   myApp             Package      Similar to how you would establish a package in other languages  function          Class  var MyClass   function params        this initialize params              Private Static  vars            - Only accessible to functions in this class            - Doesn t get wiped out when we create a new instance      var countInstances   0      var allInstances                Private Static  functions            - Same as above  but it s a function accessible              only to other functions in this class      function doSomething                   Public Static  vars           - Everyone has access            - Doesn t get wiped out when we create a new instance      MyClass counter   0           Public Static  functions           - Same as above  but anyone can call this  static method             - Kinda like a singleton class situation      MyClass foobar   function                  Public properties and methods are built into the  prototype            - This is how each instance can become unique unto itself            - Establishing  p  as  local   Static Private  variable              simply so we don t have to keep typing  MyClass prototype               for each property and function  var p   MyClass prototype           Public  vars     p id   null      p firstname   null      p lastname   null           Private  vars           - Only used by  this  instance            - There isn t  true  privacy for each              instance so we have to fake it             - By tradition  we indicate  privacy                by prefixing it with an underscore             - So technically  anyone can access  but we simply              don t tell anyone about it  e g  in your API              so no one knows about it        p  foo   null       p initialize   function params           this id   MyClass counter            this firstname   params firstname          this lastname   params lastname          MyClass counter            countInstances            allInstances push this              p doAlert   function theMessage           alert this firstname         this lastname     said      theMessage      My id     this id       Total People     countInstances      First Person     allInstances 0  firstname         allInstances 0  lastname              Assign class to app myApp MyClass   MyClass      Close the  Package            Usage example  var bob   new myApp MyClass     firstname        bob                                   lastname         er                                   bob doAlert  hello there

User · Answer

While using Blixt s great template from above  I found out that it doesn t work well with multi-level inheritance  MyGrandChildClass extending MyChildClass extending MyClass      it cycles on calling first parent s constructor over and over  So here is a simple workaround     if you need multi-level inheritance  instead of using this constructor super call this  surName   use chainSuper this  call this  surName   with the chain function defined like this   function chainSuper cls      if  cls   depth    undefined  cls   depth   1  else cls   depth      var depth   cls   depth    var sup   cls constructor super    while  depth  gt  1        if  sup super    undefined  sup   sup super      depth--        return sup

User · Answer

This is a constructor   function MyClass        When you do  var myObj   new MyClass      MyClass is executed  and a new object is returned of that class

User · Answer

http   www jsoops net  is quite good for oop in Js  If provide private  protected  public variable and function  and also Inheritance feature  Example Code   var ClassA   JsOops function  pri  pro  pub      pri   private  pro   protected  pub   public      pri className    I am A         this init   function  var1    constructor               pri className    var1             pub getData   function                  return  ClassA Top     pro getClassName        This     pri getClassName                ID     pro getClassId                     pri getClassName   function      return pri className        pro getClassName   function      return pri className        pro getClassId   function      return 1         var newA   new ClassA  Class          Access public function console log typeof  newA getData       function console log newA getData        ClassA Top I am A Class  This I am A Class  ID 1        You can not access constructor  private and protected function console log typeof  newA init                  undefined console log typeof  newA className             undefined console log typeof  newA pro                   undefined console log typeof  newA getClassName          undefined

User · Answer

In most cases you have to somehow declare the property you need before you can call a method that passes in this information  If you do not have to initially set a property you can just call a method within the object like so  Probably not the most pretty way of doing this but this still works   var objectA         color           callColor   function            console log this color             this callColor       var newObject   new objectA

User · Answer

It seems to me most of you are giving example of getters and setters not a constructor  ie http   en wikipedia org wiki Constructor  object-oriented programming    lunched-dan was closer but the example didn t work in jsFiddle   This example creates a private constructor function that only runs during the creation of the object   var color    black    function Box           private property    var color              private constructor     var   construct   function            alert  Object Created            color    green                 getter    this getColor   function            return color              setter    this setColor   function data           color   data           var b   new Box     alert b getColor        should be green  b setColor  orange     alert b getColor        should be orange  alert color      should be black   If you wanted to assign public properties then the constructor could be defined as such   var color    black    function Box           public property    this color              private constructor     var   construct   function that           alert  Object Created            that color    green        this         getter    this getColor   function            return this color              setter    this setColor   function color           this color   color           var b   new Box     alert b getColor        should be green  b setColor  orange      alert b getColor        should be orange  alert color      should be black

[javascript] Constructors in JavaScript objects

Examples related to javascript

Examples related to oop