无论其

Question

我试图理解javascript中的对象。这是代码：

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");

当我引用这个[＆＃34; name＆＃34;]时我试图将它引用到fn.game，但是这个dous不起作用，因为它引用了最本地的对象。关于如何做到这一点的任何想法？

Answer 1

正如你所说，它引用了最本地的对象，做你解释的内容：

...
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

有几种方法可以做到这一点，这取决于你做这件事的方式，虽然我认为你遇到的最大问题是你的对象没有声明{{{ 1}}所以当我试图运行你的代码时，它只是给了我一个错误。在下面的代码中，我更改了它，它应该按照您当前的需要运行。

＆＃13;

addState()

＆＃13;

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");

＆＃13;

无论其

如果您希望使用与<div id="game"></div>之前相同的语法，那么以下任何一个示例都应该有效：

示例1

Link to Function.Prototype.Bind

game.add.state()

示例2

Javascript Variables and Scope

//Rest of code
this.add={};
this.add.state = function(name){
   this[name]=3;
}.bind(this)
//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

为了使this表示平均值fn.game，您需要做更多类似的事情：

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);*/

需要帮助理解JavaScript对象

4 个答案:

无论其

示例1

示例2