javascript - Is it a good practice to create nested properties with prototype? And how to do it properly? -

i'm coding unneeded image manipulation library in hopes of learning how create simple library or framework javascript in proper , performant way.

basic flow chart following:

create image object -> specify url , color mode -> initiate object main manipulation methods set specific ones color mode of current image -> use manipulation methods.

i curious how more experience coders approach situation. if think there better or more fun way please share flow charts, eager learn.

here code snippet:

function imagelib(url,colormode){     this.url = url;     this.colormode = colormode; }  imagelib.prototype.init = function() {     switch (this.colormode ) {         case "blackandwhite" :             this.colorenhance = imagelib.colormodehandlers.blackandwhite.method1;             this.resize = imagelib.colormodehandlers.blackandwhite.method2;             this.sharpen = imagelib.colormodehandlers.blackandwhite.method3;             this.blur = imagelib.colormodehandlers.blackandwhite.method4;             break;          case "semitransparent" :             this.colorenhance = imagelib.colormodehandlers.semitransparent.method1;             this.resize = imagelib.colormodehandlers.semitransparent.method2;             this.sharpen = imagelib.colormodehandlers.semitransparent.method3;             this.blur = imagelib.colormodehandlers.semitransparent.method4;             break;          case "sephia" :             this.colorenhance = imagelib.colormodehandlers.sephia.method1;             this.resize = imagelib.colormodehandlers.sephia.method2;             this.sharpen = imagelib.colormodehandlers.sephia.method3;             this.blur = imagelib.colormodehandlers.sephia.method4;             break;          case "fullcolor" :         case default:             this.colorenhance = imagelib.colormodehandlers.fullcolor.method1;             this.resize = imagelib.colormodehandlers.fullcolor.method2;             this.sharpen = imagelib.colormodehandlers.fullcolor.method3;             this.blur = imagelib.colormodehandlers.fullcolor.method4;             break;          }     };  }  imagelib.prototype.colormodehandlers.blackandwhite = {     method1: function (){...},     method2: function (){...},     method3: function (){...},     method4: function (){...} }  imagelib.prototype.colormodehandlers.semitransparent = {     method1: function (){...},     method2: function (){...},     method3: function (){...},     method4: function (){...} }  imagelib.prototype.colormodehandlers.sephia = {     method1: function (){...},     method2: function (){...},     method3: function (){...},     method4: function (){...} }  imagelib.prototype.colormodehandlers.fullcolor = {     method1: function (){...},     method2: function (){...},     method3: function (){...},     method4: function (){...} }  image1 = new imagelib("url","sephia"); image1.init(); image1.sharpen(); image1.colorenhance(); etc... 

first of all, imagelib.prototype.colormodehandlers.sephia ={...} does't work. couldn't find article or question on object.prototype.property.property nesting.

how can this? correct way declare nested properties sub properties , methods.

and since couldn't find article on nested properties this, bad practice?

the reason doesn't work simple. property doesn't exist @ moment when try define nested properties. , can't access nested. declaration should have looked below:

imagelib.prototype.colormodehandlers = {     blackandwhite: {         method1: function () {...},         method2: function () {...},         method3: function () {...},         method4: function () {...}     },     semitransparent: {         method1: function () {...},         method2: function () {...},         method3: function () {...},         method4: function () {...}     }  ... } 

however should 2 points approach.

1. when wrap in nested levels these methods won't usable directly. i.e.

   var image1 = new imagelib("url"); image1.colormodehandlers.fullcolor.method2(); because this (which used in these methods) inside method2 refer fullcolor object. need assign way in init function of sample code , after use via image.resize().

2. you won't able use private states in methodn functions (i.e. closures) because there 1 instance of them (because being stored in prototype) , state shared among instances of imagelib. pattern avoid such stuff called parasitic inheritance. it's rather complicated concept beginner in javascript. if need private states can acquainted here parasitic inheritance in javascript using pure prototypal approach

regarding whether practice, answer opinionated. prefer keep bunch of methods not split sub-objects , pass mode parameter. or these methods expect launched object (imagelib instance) has mode property , accessible via this.mode