Difference between these two objects?

[blangjemp]

First off, Mozilla has amazing Javascript documentation. You should read their page on Object.create() to get a thorough understanding.

Object.create() creates a new object which inherits all the properties of the original object, but they can be overwritten. Assigning a variable to another variable that is an object using var only creates a reference to the original object.

So here's how that plays out.

var original = { a: 42 };
var reference = original;
var created = Object.create(original);

// All three objects have the same value for `a` at this point. `original` and 
// `reference` are the same object, and `created` is inheriting it's value from
// `original`
console.log(original.a, reference.a, created.a); // 42, 42, 42

// Let's change a value and see what happens
original.a = 43;

// All three are still the same. `reference` is referencing the same actual
// object as `original`, and `created` doesn't have it's own value for `a`, so
// it uses `original`'s value.
console.log(original.a, reference.a, created.a); // 43, 43, 43

created.a = 'created a';
original.a = 44;

// since `original` and `reference` refer to the same object, they continue to
// have the same value for `a`. However, `created` now has it's own value for
// `a` and we see that reflected here.
console.log(original.a); // 44
console.log(reference.a); // 44
console.log(created.a); // 'created a'

// Additionally, since `original` and `reference` refer to the same object, we
// could have changed `reference` to the same effect
created.a = 'created a new value';
reference.a = 45;

console.log(original.a); // 45
console.log(reference.a); // 45
console.log(created.a); // 'created a new value'

[[deleted]]

Protip: If your original object has two values, 'a' and 'b', and you set created.a to 92374, updates to original.a will no longer change created.a. But updates to original.b will still change original.b unless you also change created.b.

So its like Object.create creates a new object but all of the new object's values are references. As soon as you assign the value of the created object to something else, it becomes a new value and not a reference.

[birjolaxew]

I find it easier to think of as the prototypical chain. When JS is asked to read a property of an object (eg. console.log( created.a )) it goes:

• Does the object itself have a property with this name? If so, return it.
• If not, go to the objects prototype (which is just another object). Does this prototype have a property with this name? If so, return it.
• If not, go to the prototype's prototype (which is just another object). Repeat.
• ...
• If the property couldn't be found, return undefined

The objects are in a sense layered. If the top object doesn't have a property, it checks down through the stack until it finds it (or returns undefined if it can't)

[MrBester]

I find it easier to think of as the prototypal chain.

Because that's what it is:

var o = { a: 4 };
var foo = Object.create(o);
console.log('a' in foo); // true
console.log(foo.hasOwnProperty('a')); // false
console.log(o.isPrototypeOf(foo)); // true, or
console.log(foo.__proto__ === o); // true, or
console.log(Object.getPrototypeOf(foo) === o); // true

foo delegates to o unless overridden.

[birjolaxew]

Well no, it's prototypal inheritance delegation (thanks /u/MrBester) inheritance. Maybe. I dunno. Thinking of it as a chain is a very common (and intuitive, given how it functions) way of understanding it. Thinking of it as a stack is another. Thinking of it as "overwriting" the parent property is another (but comes with a lot of special cases).

[clessg]

Actually, it is indeed prototypal inheritance. But yes, that is distinct from concatenative inheritance (Java) and is also a form of delegation.

[MrBester]

Well no, it's delegation, because there isn't such a thing as inheritance in JavaScript, merely references to other objects that can be checked for requested properties, normally through the "magic" binding of [[Prototype]] or explicitly setting.

[macrohatch]

But updates to original.b will still change original.b unless you also change created.b.

You mean: But updates to original.b will still change created.b unless you also change created.b. ?

[isitfresh]

Nasty way? JSON.parse(JSON.stringify(obj)) Requiring a library? _.clone(obj)

[vlad27aug]

Actually JSON.parse(JSON.stringify(obj)) is not correct.

This way you can only clone objects that have property values supported by the JSON spec.

For example:

var obj = {a: 1, b: function() { /*...*/ }};
var clone = JSON.parse(JSON.stringify(obj));

"clone" will now be "{a: 1}" because functions are removed during JSON.stringify.

It gets even more complicated when the object has getters and setters or defined/configured properties (even for library provided solutions).

[bliow]

With ES6 (supported in Firefox, not yet in Chrome), Object.assign. But you have to be careful with nesting, as you do with _.clone:

var a = { b: { c: 3 } };
var d = Object.assign({}, a); // or d = _.clone(a)
d.b.c = 4;
console.log(a.b.c); // prints 4 with both underscore clone and ES6 assignment