What is the difference between this.x and this._x?

[Peng Yu]

Hi,

In Draggable, both this.x and this._x is used. I checked the value, it
seems that they are the same. When I changed one, the other got
changed as well. Is there a difference between the two?

--
Regards,
Peng

[Matt Petrovic]

this.x is a getter/setter setup. this._x is the 'private' variable that setup refers to. 

The former has some additional behavior attached to it that should probably be kept around. Things like triggering 'Change' and 'Move' and stuff like that. I believe this.x should be used over this._x in code external to 2D.

[Peng Yu]

On Wed, Feb 1, 2012 at 11:08 AM, Matt Petrovic <mpet...@guneva.net> wrote:
> this.x is a getter/setter setup. this._x is the 'private' variable that
> setup refers to.
>
> The former has some additional behavior attached to it that should probably
> be kept around. Things like triggering 'Change' and 'Move' and stuff like
> that. I believe this.x should be used over this._x in code external to 2D.

I see something like the following in crafty. I guess x should be
related with them. I don't quite see the benefits of using trivial
setter and getter methods. Are there any?

2D.js:97: this.__defineSetter__('x', function (v) { this._attr('_x', v); });
2D.js:98: this.__defineSetter__('y', function (v) { this._attr('_y', v); });
2D.js:99: this.__defineSetter__('w', function (v) { this._attr('_w', v); });
2D.js:100: this.__defineSetter__('h', function (v) { this._attr('_h', v); });
2D.js:101: this.__defineSetter__('z', function (v) { this._attr('_z', v); });
2D.js:102: this.__defineSetter__('rotation', function (v) {
this._attr('_rotation', v); });
2D.js:103: this.__defineSetter__('alpha', function (v) {
this._attr('_alpha', v); });
2D.js:104: this.__defineSetter__('visible', function (v) {
this._attr('_visible', v); });

Also, according to JavaScript: The Definitive Guide (6/e) by David
Flanagan, it says the following. Since it is a legacy API and not well
documented, I'm not sure if it is worthwhile to use it in crafty.
After all, I think __defineSetter__ causes more confusions than bring
any benefits.

"""
6.7.1 Legacy API for Getters and Setters
The object literal syntax for accessor properties described in §6.6
allows us to define
accessor properties in new objects, but it doesn’t allow us to query
the getter and setter
methods or to add new accessor properties to existing objects. In
ECMAScript 5 we
can use Object.getOwnPropertyDescriptor() and Object.defineProperty()
to do these
things.
Most JavaScript implementations (with the major exception of the IE web browser)
supported the object literal get and set syntax even before the adoption of
ECMAScript 5. These implementations support a nonstandard legacy API
for querying
and setting getters and setters. This API consists of four methods
available on all objects.
__lookupGetter__() and __lookupSetter__() return the getter or setter
method for a
named property. And __defineGetter__() and __defineSetter__() define a getter or
setter: pass the property name first and the getter or setter method
second. The names
of each of these methods begin and end with double underscores to
indicate that they
are nonstandard methods. These nonstandard methods are not documented in the
reference section.
"""

--
Regards,
Peng

[Matt Petrovic]

Go look at what ._attr does. It's not trivial. 

Using what the spec says to do is all well and good but the real world doesn't work like that. Support for defineProperty isn't ubiquitous, so we have to use legacy fallbacks to make sure that functionality is preserved in older browsers.