-1

I was wondering which of these below is the best pracise, if it matters at all?

Should i use the this statement like so:

var object = {
  x: 20,
  y: 10,
  width: this.x,
  height: this.y,
  render: function () {  //renders object on canvas
    ctx.fillRect(this.x, this.y, this.width, this.height);
  }
};

Or should i use the object name like so:

var object = {
  x: 20,
  y: 10,
  width: object.x,
  height: object.y,
  render: function () {  //renders object on canvas
    ctx.fillRect(object.x, object.y, object.width, object.height);
  }
};

Thanks a lot in advance!

Bram44444
  • 1
  • 1
  • 1
  • Generally you want to use `this`, but that depends on how the function is called, not how it's written. – adeneo Apr 06 '15 at 18:10
  • When do you then use the object name? – Bram44444 Apr 06 '15 at 18:11
  • http://stackoverflow.com/q/3127429/497418 – zzzzBov Apr 06 '15 at 18:12
  • 2
    Note that both of these fail on the `width: ` and `height: ` lines. This is because those are trying to reference `object` before it exists. – forgivenson Apr 06 '15 at 18:14
  • Using objectName rather than `this` gains you absolutely nothing, ever. It is a bad idea because you have to rewrite the object before you can ever create a second instance of it. Maybe this object you never will. The next one, though, you might. It's a bad habit and gains you nothing. I recommend against. But if you do it, never show the code to a more experienced programmer whose good opinion you value. – 15ee8f99-57ff-4f92-890c-b56153 Apr 06 '15 at 20:30

2 Answers2

0

Both the scenarios will not work for you.

var object = {
  x: 20,
  y: 10,
  width: this.x,
  height: this.y,
  render: function () {  //renders object on canvas
    ctx.fillRect(this.x, this.y, this.width, this.height);
  }
};

In the above scenario width: this.x, height: this.y will not work. Because the object this keyword will work only inside render function. For the ones written outside render function this is window object.

var object = {
  x: 20,
  y: 10,
  width: object.x,
  height: object.y,
  render: function () {  //renders object on canvas
    ctx.fillRect(object.x, object.y, object.width, object.height);
  }
};

In the second scenario width: object.x, height: object.y will not work because you are trying to use the object variable in the middle of its definition. There will not be any problem within render function.

Kiran Reddy
  • 556
  • 3
  • 11
-1

Use the first one because it is a lot clearer to the other developer right off the bat what you are referring to.

It has been made for the thing you are trying to, so by using it you are clearly communicating your intentions instead of obfuscating them.

AvetisCodes
  • 1,375
  • 2
  • 11
  • 31
  • Considering that the answer depends on how `render` gets called, this answer is misleading. If `render` was being passed as a callback, you would need to bind a context or use the second form. – zzzzBov Apr 06 '15 at 18:15
  • It is not used as a callback so "this" would be fine I suppose. – Bram44444 Apr 06 '15 at 18:18