javascript function this and prototype

Question

The code is below:

function A() {
    this.name = "kl";
    this.obj2 = { a: 1 };
}

A.prototype.city = "china";
A.prototype.obj = {age: 30};

var a = new A();
var b = new A();

a.name = "kobe";
a.obj.age = 20;
a.city = "American"
a.obj2.a = 30;

console.log(b.name);   // k1
console.log(b.city);   // why china ?
  
console.log(b.obj);     // when b.city = china, why b.obj = {age: 20}
console.log(b.obj2);   // {a: 1}

My opinion is that a and b has its own this, so how you edit this[property] you can't change b its own this.value;

property declare so share property ? is right ? but when obj is change will effect b.obj, when city change will not effect b.city ?

It's rarely the case that you will want to use the prototype mechanism to share values among instances. It can give rise to hard-to-understand behaviors like the one you've found. It is safer to think of the prototype as a repository for methods shared across instances. — user663031
– user663031, Commented Dec 16, 2016 at 4:43

Felix Kling · Accepted Answer · 2016-12-16 04:41:09Z

4

Both objects have city and obj in their prototype chain. However, if you do a.city = "American" you are creating a new property city on a itself, shadowing the property city in the property chain.
Assigning to a property will (almost) always create that property on the object itself.

a.obj.age = 20; however reads (not assigns!) the object referenced by a.obj and updates its age property. a and b have the same prototype and thus a.obj and b.obj resolves to the same object. If the object is mutated in any way it will affect a and b in the same way.

Structure from the Chrome console:

edited Dec 16, 2016 at 4:41

user663031

answered Dec 16, 2016 at 4:14

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

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

Comments

kevguy · Accepted Answer · 2016-12-16 05:31:33Z

Let's go through this line by line:

First of all, A.prototype points to an object.
When you run var a = new A();
1. You create a new object which is set to 'this'
2. This new object has properties name and obj2 which have values kl and { a: 1 }
3. this object is linked to the object A.prototype points to, thus a prototype chain is set up.
4. at the end of function A, the function actually runs return this;, which literally returns the object created to be assigned to a.
var b = new A(); does the same as above
when you run a.name = "kobe";, you're modifying the value from kl to kobe
when you run a.city = "American";, you're creating a new property city on a itself
and when you run a.obj2.a = 30;, you're also only modifying a value.
But when you run a.obj.age = 20;, something is different
- a doesn't have the property obj on itself, so it goes up the prototype chain to the object A.prototype points to, and finds the property obj, so this line of code is actually modifying that obj, and changes the value of obj.age from 30 to 20.
when you execute b.name, since b has property name with value kl, so it prints kl
However, b doesn't have the property city on itself, so it goes up the prototype chain to the object A.prototype points to and see if it can find one, which it does, as previously you ran A.prototype.city = "china";, so it prints china.
When console.log(b.obj); is run, b goes up to the prototype chain and find obj on the object A.prototype points to, so it prints {age: 20}

Collectives™ on Stack Overflow

javascript function this and prototype

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related