CODEWITHSUNDEEP
javascriptfunctionpropertiesthis
kelen
kelen

Reputation: 25

javascript function this and prototype

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 ?

Upvotes: 0

Views: 80

Answers (2)

kevguy
kevguy

Reputation: 4438

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}

Upvotes: 1

Felix Kling
Felix Kling

Reputation: 816442

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:

enter image description here

Upvotes: 4

Related Questions