Confuse about Object.create in javascript

Question

Suppose I have an object, and create another object with it:

var person = {
    name: "Lee",
    age: "12",
    others: {}
}

var per1 = Object.create(person);
var per2 = Object.create(person);

per2.name = "Mike";
per2.others.hello = "world";

console.log(per1); // Object {name: "Lee", age: "12", obj: Object}
console.log(per2); // Object {name: "Mike", name: "Lee", age: "12", obj: Object}

console.log(per1.others.hello, per2.others.hello) // world world

my confuse is:

Why the per2 have double name? If another is from prototype, I try to per2.prototype.name = "mike" it tell me the prototype is undefined, but how can that is undefined? The job of Object.create isn't Creates a new object with the specified prototype object and properties. MDN
Why the others would shared between per1 and per2 but the name doesn't

Another confuse is suppose I have a function:

function Person(name) {
    this.name = name
}
Person.prototype.say = function () {
    console.log("hello")
}

but create an other object from the function, no the prototype of the function:

var obj = Object.create(Person);

console.log(obj) // Function {}:
console.log(obj.prototype) // undefined

Why the prototype is undefined? Doesn't the Object.create create it?

Update:

As @bfavaretto said only the constructor can have prototype, and the Object.getPrototypeOf can show one object's prototype.So I tried these two approach to get the per1's prototype:

console.log(per1.constructor.prototype) // Object{}
console.log(Object.getPrototypeOf(per1)) //Object {name: "Lee", age: "12", obj: Object}

they are different, why?

No, I will not confuse anyone about Object.create in JavaScript. — dumbass
– dumbass, Commented Jan 6 at 10:41

bfavaretto · Accepted Answer · 2013-07-29 02:37:52Z

3

Object.create returns a new object whose [[Prototype]] is the object passed as an argument. So both per1 and per2 share the same prototype.

Now, some facts about prototype objects:

When you try to read a property and the object doesn't have it, it will look for it up the prototype chain. So if you console.log(per1.name), 'name' is not found on per1, but on its prototype.
However when you try to write to a non-existing property, it's just created, on the object itself, not its prototype. So per2.name = "Mike"; creates a new 'name' property on per2, and that shadows the one from the prototype. For some reason the Chrome console decided to log both, but for practical use only "Mike" is readable.

The above is supposed to answer your first question. The second one is related, but also have to do with the way objects work in js. person.others is an object. per2.others is a reference to that exact object. The same reference is shared by per1, that's why you see "world" twice. That didn't happen with "name" because it's a string, a primitive value, unlike others.

To answer your last question: only functions (constructors) have a prototype property. Objects created with new Person inherit from Person.prototype, but theyir prototype object is only reachable via the non-standard obj.__proto__ or Object.getPrototypeOf(obj) (which is not supported on older browsers).

edited Jul 29, 2013 at 2:37

answered Jul 29, 2013 at 2:26

bfavaretto

72k18 gold badges118 silver badges162 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

hh54188 Over a year ago

The new object which object.create return is the reference of the argument or the copy of the argument? I think it must be the reference, if not, how the per1 and per2 share the same others, am I right?

hh54188 Over a year ago

Go ahead with waht you said, I have another confuse just as I have update the question

bfavaretto Over a year ago

@hh54188 I saw your update. You used Object.create and passed an object literal to it, so per1.constructor is the Object constructor.

user2357112 · Accepted Answer · 2013-07-29 02:27:21Z

1

thing.prototype isn't a thing's prototype. I don't know if standard ECMAScript provides any way to access an object's prototype, but thing.__proto__ tends to work.

For functions, f.prototype is the prototype of anything created with new f(). When I try your Object.create(Person); thing, it seems to work:

console.log(obj.prototype)
>Person {say: function}
// prototype property inherited from Person function

Perhaps you were doing this in the Chrome Javascript console, and you were confused by undefined showing up after the actual logging result. That's the return value of the console.log call.

edited Jul 29, 2013 at 2:27

answered Jul 29, 2013 at 2:21

user2357112

286k32 gold badges490 silver badges569 bronze badges

1 Comment

Fabrício Matté Over a year ago

Standard way is Object.getPrototypeOf(obj) - note that this one is non-writable. __proto__ is probably coming in the next spec and is supported even in IE11 anyway.

Collectives™ on Stack Overflow

Confuse about Object.create in javascript

Update:

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Update:

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related