javascript - How can I avoid passing a parameter to each function but still have access to it inside the function -

when click button, opening jquery dialog , creating object of customclass. need object in different functions. there way avoid passing each function still have access inside function?

note: using same code open multiple dialogs through different click events.

js fiddle link: https://jsfiddle.net/gwphxssq/1/

html:

<div class='btn1'>button1</div> <div class='btn2'>button2</div> <p class='plain-text'> 2 dialog's open, 1 behind other. please drag top dialog see other dialog below. </p> 

js:

var test = test || {}; test = {   customclass: function(fnsave) {     return {       dialogelem: null,       savebtn: null,       fnsave: fnsave     }   },   cache: function(obj, dialogelem) {     obj.dialogelem = $(dialogelem);     obj.savebtn = $(dialogelem).find('.btnsave');   },   opendialog: function(option) {     var = this;     var dynamicelem = '<div>dialog' +       '<input type="button" class="btnsave" value="save"/>' + '</div>';      var obj = new that.customclass(option);      $(dynamicelem).dialog({       open: function(event, ui) {         that.cache(obj, this);       }     });      //obj being passed different functions. how can avoid passing  each function still have access obj in each of functions below?      that.bindevents(obj);     that.samplefunc1(obj);     that.samplefunc2(obj);   },    bindevents: function(obj) {     obj.savebtn.on('click', function() {       obj.fnsave();     });   },   samplefunc1: function(obj) {     //need obj here     //some code   },      samplefunc2: function(obj) {     //need obj here     //some code   } }   //click event button 1 $('.btn1').on('click', function() {    test.opendialog(function() {     alert('first dialog');   }); });  //click event button 2 $('.btn2').on('click', function() {    test.opendialog(function() {     alert('second dialog');   }); }); 

css:

.btn1, .btn2 {   background-color: grey;   width: 200px;   height: 20px;   text-align: center;   padding: 3px;   margin-bottom: 5px;   display: inline-block; }  .plain-text {   color: red; }  .btnsave {   float: right;   width: 80px;   height: 30px; } 

you factory creates new functions, , functions have object in closure. example:

opendialog: function (option) {     var = this;     var dynamicelem = '<div>dialog' +        '<input type="button" class="btnsave" value="save"/>' + '</div>';     var obj = new that.customclass(option);      var fxns = that.createfxns(obj);      fxns.bindevents();     fxns.samplefunc1();     fxns.samplefunc2(); }, createfxns: function(obj) {     return {         bindevents: function () {             obj.on('click', function () {                obj.fnsave();             }         },         samplefunc1: function () {},         samplefunc2: function () {}     } } 

i don't see out of pattern though. main benefit of pass functions around other piece of code, , have object 'baked in'. way other piece of code doesn't need know obj exists. in case though, you're calling them right away, , class needs know existence of obj.