Need help understanding JavaScript objects

Question

I am trying to understand objects in javascript. Here is the code:

var fn={};
var canvas;
var ctx;
fn.game=function(width,height,inSide,name){
    this.canvas2=document.getElementById(inSide).innerHTML = "<canvas id="+name+" style='width:"+width+";height:"+height+";'>Your browser does not support the Canvas Element.</canvas>";
    this.canvas=document.getElementById(name);
    this.ctx=this.canvas.getContext("2d");
    document.getElementById(inSide).style.width=width;
    document.getElementById(inSide).style.height=height;
    canvas=document.getElementById(name);
    ctx=this.canvas.getContext("2d");
    this.width=width;
    this.height=height;
    canvas.width=width;
    canvas.height=height;
    this.add={

    };
    this.add.state=function(name){
        this[name]=3;
    };
};


var game=new fn.game(640,480,"game","canvas");

game.addState("play");

when I refer to this ["name"] I try to pass this to fn.game, but this dous does not work because it refers to the most local object. Any ideas how to do this?

Answer 1

As you said, it references the most local object to do what you explained:

...
fn.game=function(width,height,inSide,name){
    var that = this;//expose this of fn.game to this scope
    ...
    this.add={

    };
    this.add.state=function(name){
        that[name]=3;//access this of fn.game
    };
};

Answer 2

, , , , , , , addState(), , , . , , .

var fn = {};
var canvas;
var ctx;
fn.game = function(width, height, inSide, name) {
  this.canvas2 = document.getElementById(inSide).innerHTML = "<canvas id=" + name + " style='width:" + width + ";height:" + height + ";'>Your browser does not support the Canvas Element.</canvas>";
  this.canvas = document.getElementById(name);
  this.ctx = this.canvas.getContext("2d");
  document.getElementById(inSide).style.width = width;
  document.getElementById(inSide).style.height = height;
  canvas = document.getElementById(name);
  ctx = this.canvas.getContext("2d");
  this.width = width;
  this.height = height;
  canvas.width = width;
  canvas.height = height;
  this.add = {

  };
  this.addState = function(name) {
    this[name] = 3;
    console.log(this);
  };
};


var game = new fn.game(640, 480, "game", "canvas");

game.addState("play");

<div id="game"></div>

Hide result

, , game.add.state(), - :

1

.Prototype.Bind

//Rest of code
this.add={};
this.add.state = function(name){
   this[name]=3;
}.bind(this)
//Rest of code

2

Javascript Variables Scope

//Rest of code
this.add={};
var self = this;
this.add.state = function(name){
    self[name]=3;
}
//Rest of Code

Answer 3

, function(), this

, , , .

fn.game=function(width,height,inSide,name){
    var self = this;
    this.add.state=function(name){
        self[name]=3;
    };
};

Answer 4

In order to thismean the average fn.game, you need to do something more:

var doc = document, bod = doc.body;
function E(e){
  return doc.getElementById(e);
}
function C(t){
  return doc.createElement(t);
}
function FnGameAdd(){
  this.state = function(popertyName){
    this[propertyName] = 3;
  }
}
function FnGame(canvasId, width, height, inside){
  // style with CSS
  inside.innerHTML = "<canvas id='"+canvasId+"'>Your browser does not support the Canvas Element.</canvas>";
  var cv = this.canvas = E(canvasId);
  cv.height = height; cv.width = width; this.ctx = cv.getContext('2d');
  this.add = new FnGameAdd;
};
}
var fn = {};
fn.game = function(canvasId, width, height, inside){
  // this.prop = 'belongs to fn';
  return new FnGame(canvasId, width, height, inside);
}
new fn.game('canvas', 640, 480, E('game'));

/* keep this for fun of creating new Object literals, not needed here
Object.create = Object.create || function(obj){
  function F(){}; F.prototype = obj;
  return new F;
}
var newObj = Object.create(fn);*/