Search code examples
javascriptarraysoopmixins

passing data arrays stored in variables, into functional mixin pattern OOP in javascript


I have a java script OOP pattern as follows: a main object (Team) has other objects (Players) as properties. A functional mixin exists for both Team and Player objects to keep methods. New instances of both objects are created using constructor functions, with Player objects passed into Team objects as parameters. The mixins then call the objects to allow methods to be available (an approach described more fully here:

https://javascriptweblog.wordpress.com/2011/05/31/a-fresh-look-at-javascript-mixins/.

Now, the properties of the new Players are arrays of numbers. If i "hard code" the numbers in as i create the new Players, everthing works and the methods can be used on the objects. However, i wish to make the data selections more dynamic (e.g. the values in the array may change based on menu selections or such). For this reason i would like to keep the data array stored in a variable, and then pass that variable into the new Player constructor sequence and still maintain the mixin functionality. Unfortunately simply substituting in the variable name, either as is, or as [] notation, breaks the functionality and results in no results or NaN results for the console.log requests..

Can anybody help on making this step...

code with descriptive comments as follows:

// Mixin for Team methods...

var asTeam = function() {
  this.ability1 = function() {
    var ab = (this.p1.p4arr[4] + this.p2.p5arr[2]);
    return ab;
  };
  return this;
};

// Mixin for Player Methods..The methods use calculations of different values within the property arrays..
var asPlayer = function() {
  this.skill1 = function() {
    var a = this.p4arr[0] + this.p5arr[0];
    return a;
  };
  this.skill2 = function() {
    var a = this.p5arr[2] * this.p6arr[3] / this.p4arr[4];
    return a;
  };
  return this;
};

// constructor function for Teams..
var Team = function(p1, p2, p3) {
  this.p1 = p1;
  this.p2 = p2;
  this.p3 = p3;
};

// constructor function for Players..
var Player = function(p4arr, p5arr, p6arr) {
  this.p4arr = p4arr;
  this.p5arr = p5arr;
  this.p6arr = p6arr;
};

// call the object prototypes from Mixins..
asTeam.call(Team.prototype);
asPlayer.call(Player.prototype);

// create a new Players..

// If used, this code works...

//var john = new Player([3,7,9,4,1,6],[2,16,3,5,1,1],[24,6,3,21,5,3]);
//var bob = new Player([2,2,1,3,4,1],[3,8,6,2,1,4],[6,4,8,6,2,5]);
//var ian = new Player([3,8,3,2,5,4],[2,7,4,3,7,3],[7,4,8,5,3,2]);

// Instead want to use this code or something similar that works to pick up the data arrays from the variables at the bottom ...

var john = new Player(arr1, arr2, arr3);
var bob = new Player(arr4, arr5, arr6);
var ian = new Player(arr7, arr8, arr9);

//or (doesnt work either)

// var john = new Player([arr1],[arr2],[arr3]);
//etc..

// create a new Team
var Team1 = new Team(john, bob, ian);

console.log(Team1.ability1());
console.log(john.skill2());
console.log(bob.skill1());
console.log(john.p4arr);

// data arrays stored in variables..

var arr1 = [3, 7, 9, 4, 1, 6];
var arr2 = [2, 16, 3, 5, 1, 1];
var arr3 = [24, 6, 3, 21, 5, 3];

var arr4 = [2, 2, 1, 3, 4, 1];
var arr5 = [3, 8, 6, 2, 1, 4];
var arr6 = [6, 4, 8, 6, 2, 5];

var arr7 = [3, 8, 3, 2, 5, 4];
var arr8 = [2, 7, 4, 3, 7, 3];
var arr9 = [7, 4, 8, 5, 3, 2];

Solution

  • You're calling the constructor before you initialize the variables, so you're passing undefined values to the constructor. Simply change the order of the code:

    // data arrays stored in variables..
    
    var arr1 = [3, 7, 9, 4, 1, 6];
    var arr2 = [2, 16, 3, 5, 1, 1];
    var arr3 = [24, 6, 3, 21, 5, 3];
    
    var arr4 = [2, 2, 1, 3, 4, 1];
    var arr5 = [3, 8, 6, 2, 1, 4];
    var arr6 = [6, 4, 8, 6, 2, 5];
    
    var arr7 = [3, 8, 3, 2, 5, 4];
    var arr8 = [2, 7, 4, 3, 7, 3];
    var arr9 = [7, 4, 8, 5, 3, 2];
    
    var john = new Player(arr1, arr2, arr3);
    var bob = new Player(arr4, arr5, arr6);
    var ian = new Player(arr7, arr8, arr9);
    
    // create a new Team
    var Team1 = new Team(john, bob, ian);
    
    console.log(Team1.ability1());
    console.log(john.skill2());
    console.log(bob.skill1());
    console.log(john.p4arr);