javascript - Refer to common values within an object -

i have object nested objects have same variables within nested objects properties. i'm trying make code more dry consolidating common variables property of nested object, i'm not sure if correct or best way write it. have thoughts?

usage

i'm calling various functions callbacks jquery each/onclick statements.

$('#foo').each(foo.part1.begin); $('.bar a').on('click', foo.part1.middle); 

in case i'm using .each, i'm appending data attributes tracking in analytics tool i.e. when user clicks link, sent attributes. in case i'm binding event, i'm sending special analytics tag custom event.

i've updated first property begin in foo object illustrate i'm doing. have utilities library function takes $this , object, function loops through object , sets of atttributes on anchor tag, etc.

current implementation:

var foo = {     part1: {         begin: function () {             var $this = jquery(this),                 name = 'the beginning of time',                 color = 'blue',                 type = 'blackberries';              utility.loopthroughandsetattributes($this, {                 name: name,                 color: color,                 type: type             });         },          middle: function () {             var name = 'the beginning of time',                 color = 'blue',                 type = 'strawberries';              console.log(name + color + type);         },          end: function () {             var name = 'the beginning of time',                 color = 'blue',                 type = 'raspberries';              console.log(name + color + type);         }     },     part2: {         begin: function () {             var name = 'the middle of city',                 color = 'green',                 type = 'pluto';              console.log(name + color + type);         },          middle: function () {             var name = 'the middle of city',                 color = 'green',                 type = 'mars';              console.log(name + color + type);         },          end: function () {             var name = 'the middle of city',                 color = 'green',                 type = 'earth';              console.log(name + color + type);         },     } }; 

proposed solution: create new property of nested object , refer property within function.

var foo = {     part1: {          name: 'the beginning of time',         color: 'blue',          begin: function () {             var name = foo.part1.name,                 color = foo.part1.color,                 type = 'blackberries';              console.log(name + color + type);         },          middle: function () {             var name = foo.part1.name,                 color = foo.part1.color,                 type = 'strawberries';              console.log(name + color + type);         },          end: function () {             var name = foo.part1.name,                 color = foo.part1.color,                 type = 'raspberries';              console.log(name + color + type);         }     },     part2: {          name: 'the middle of city',         color: 'green',          begin: function () {             var name = foo.part1.name,                 color = foo.part1.color,                 type = 'pluto';              console.log(name + color + type);         },          middle: function () {             var name = foo.part1.name,                 color = foo.part1.color,                 type = 'mars';              console.log(name + color + type);         },          end: function () {             var name = foo.part1.name,                 color = foo.part1.color,                 type = 'earth';              console.log(name + color + type);         },     } }; 

you missing this keyword:

part1: {    name: 'the beginning of time',    color: 'blue',    begin: function () {        var name = this.name,        // ...             }, 

also can create constructor function , avoid duplicating code snippets.

var foo = function(params) {    this.name = params.name;    this.color = params.color;    // ... }  foo.prototype.begin = function() {     // this.name... };  var foo = {}; foo.part1 = new foo({     name: 'the beginning of time',     color: 'red' });  foo.part2 = new foo({    name: 'bar',    color: 'baz' }); 

edit: i'm not sure trying achieve, there points can relevant.

jquery on method sets this value of passed function clicked element. overwriting this value refer instance can use function.prototype.bind or jquery $.proxy method:

$('.bar a').on('click', foo.part1.middle.bind(foo.part1));  foo.prototype.middle = function(event) {     var clickedelement  = event.currenttarget;     // `this` here refers instance }; 

another option attaching instance element using jquery .data() method:

$('element').data('foo', foo.part1); 

then getting data can use data method getter:

var foo = $('element').data('foo'); 

and when comes analytics using d3 library recommended!