Question

I have a simple object (a button in Sencha Touch actually). It’s in an object called ‘something.aButton()’;

This object contains a property called ‘view’ with a value of ‘home’;

Now I want to assign this to a variable, assign some new properties and pass it on.

So I do:

var c = something.aButton();

Now I assign some more stuff:

c.id = 4;
c.class = 'class';

Now the problem is that c.view is undefined unless I do:

c.view = c.view;

Which – coming from a PHP world baffles the heck out of me. I get the basics of prototypes but don’t understand how I can simply assign my object to a variable for ease of use and work from that. I don’t know all the original properties either so reassigning it like this is not possible in my code and I somehow doubt that this is the proper way.

If I dump ‘c’ to my console I see:

Ext.Object.classify.objectClass
class: "class"
id: 4
__proto__: Object
  view: 'home'
  ....

Answer 1

Now I assign some more stuff:

c.id = 4;
c.class = 'class';

I would avoid using the identifier class. It’s a reserved word in the 3rd edition of JavaScript, and in "loose" (non-strict) code in the 5th edition.

Now the problem is that c.view is undefined unless I do:

c.view = c.view;

It’s not undefined. What you’re changing there is whather c has its own copy of the view property. If you just did console.log(c.view) you’d see its value in the console, even without doing the assignment above.

The way prototypes work in JavaScript is that the object is backed up by the prototype in a live way. So if you take the value of view from c, and c doesn’t have its own property called view, its prototype chain is checked. But if you assign a value to view on c, then c gains a property of its own with that name, and you see it in object dumps and such.

So here’s a simplified example:

function Foo() {
}
Foo.prototype.bar = "42";

var f = new Foo();
console.log(f.bar); // "42"

At the moment, our object graph looks like this:

+-----------+      +---------------+
|     f     |----->| Foo.prototype |
|-----------|      |---------------|
|           |      | bar: "42"     |
+-----------+      +---------------+

So there we have f, which is backed by the prototype Foo.prototype. When we ask f for the property bar, since f doesn’t have a property of its own by that name, the JavaScript engine looks to its prototype to see if it does. If so, that value is used. (And this continues if the prototype has a prototype, etc.)

Now suppose we do this:

f.bar = "43";
console.log(f.bar); // "43"

Because f now has its own bar property, the JavaScript engine uses the value of that property. Now our graph looks like this:

+-----------+      +---------------+
|     f     |----->| Foo.prototype |
|-----------|      |---------------|
| bar: "43" |      | bar: "42"     |
+-----------+      +---------------+

We can remove f‘s property:

delete f.bar;       // `delete` removes "own" properties from objects
console.log(f.bar); // "42"

…and so retrieving bar from f once again looks to the prototype, because f doesn’t have a property called bar. We’re back to the original object graph:

+-----------+      +---------------+
|     f     |----->| Foo.prototype |
|-----------|      |---------------|
|           |      | bar: "42"     |
+-----------+      +---------------+

Now the fun bit: Suppose we change the prototype’s property?

Foo.prototype.bar = "baz";
console.log(f.bar); // "baz"

Because f doesn’t have a bar property, the engine looks at the prototype. This is what I meant by it being a live system.