jquery - Javascript API gets preperties of member methods -

hello i'm creating small api project @ work, here code:

var vdsl = (function(){      var defaults = {          resolvephonenumberurl: '/domain.com/test'         };      return {          map: function(el, options) {              el = (el.jquery) ? el.get(0) : el;               this.mapsettings = {                 center:new google.maps.latlng(37.983716, 23.72931),                 zoom: 10             };              $.extend(this.mapsettings, options);              this.m = new google.maps.map(el, this.mapsettings);             this.kmlparser = new geoxml3.parser({map: this.m});              this.drawarea = function(data) {                 this.kmlparser.parsekmlstring(data);             };              this.cleararea = function(i) {                 this.kmlparser.hidedocument(i);                 this.kmlparser.docs.splice(i, 1);             };              this.clearmap = function() {                 this.kmlparser.hidedocument();                 this.kmlparser.docs = null;                 this.kmlparser = null;             };              this.redrawarea = function(data) {                   this.clearmap();                 this.drawarea(data);             };                        return this;         },          resolvephonenumber: function(phone, callback) {              var request = $.ajax({                 url: defaults.resolvephonenumberurl,                 type: 'post',                 data: {                      phonenumber : phone                 },                 datatype: 'text'             });              request.done(function( reply ) {                 console.log('success');                  if ($.isfunction(callback)) {                     callback(reply);                 }             });              request.fail(function( jqxhr, textstatus ) {                 console.error( "request failed: " + textstatus );                 console.dir(jqxhr);             });              request.always(function(){                 console.log('resolvephonenumber request completed.')             });         }      };  })(); 

what noticed , did not load page on browser , on console type vdsl has 2 methods supposed have. map() , resolvephonenumber()

however when initialize map after executing: var x = vdsl.map($('.vdsl-map')) once again go console , type vdsl. , guess every property of new map() instance inside vdsl. example shouldn't exist vdsl.m , vdsl.kmlparser. should exist in scope of x. should in order accomplish ?

this because assigning values/functions this refers current object, here vdsl.

to achieve this, have create new object , assigning these values/functions it.

to fix quickly, i'd :

map: function(el, options) {          el = (el.jquery) ? el.get(0) : el;          var myobj = {};          myobj.mapsettings = {             center:new google.maps.latlng(37.983716, 23.72931),             zoom: 10         };          $.extend(myobj.mapsettings, options);          myobj.m = new google.maps.map(el, this.mapsettings);         myobj.kmlparser = new geoxml3.parser({map: this.m});          myobj.drawarea = function(data) {             this.kmlparser.parsekmlstring(data);         };          myobj.cleararea = function(i) {             this.kmlparser.hidedocument(i);             this.kmlparser.docs.splice(i, 1);         };          [...]                    return myobj;     } 

but consider using constructor function such :

function myobj (el) {     this.m = new google.maps.map(el, this.mapsettings);     this.kmlparser = new geoxml3.parser({map: this.m}); } myobj.prototype.drawarea = function(data) {     this.kmlparser.parsekmlstring(data); } [...]  // , instanciate using new var myobj = new myobj(el); 

more information here