Understanding prototype and Object

Question

I am sure their a several reference and great answers explaining prototype in Javascript,

My question happens to be simple, When I create something like this.

function Person(first, last, age, eye) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eye;
}
Person.prototype.nationality = "English";

var myFather = new Person("John", "Doe", 50, "blue");
var myMother = new Person("Sally", "Rally", 48, "green");

And console.log myFather it displays its firstName, LastName, age, eyeColor but no the nationality but when I do something like this..

myFather.nationality it displays nationality to be "english"

Now, I am running everything in chrome console log and my question is why does nationality does not appear by default in console.log of myFather object

Because it's inherited. It also doesn't display `myFather.constructor`, `myFather.hasOwnProperty` or `myFather.isPrototypeOf`, despite all of them (and more) existing: they are usually not of interest. — Bergi, Mar 28 '18 at 14:25

score 2 · Accepted Answer · answered Mar 28 '18 at 14:29

The concept here is own property vs inherited property

When you type myFather.nationality, the JSVM first checks if the myFather object itself has a property called nationality. If it does, then it will return that. In this case, we say that nationality is the object's own property. By default, objects do not have own properties; they get them when you directly assign them on the object, e.g. what you do in the constructor.

If not, it checks the prototype of the object; and then the prototype of the prototype; and so on, until it reaches the basic Object prototype, at which point it stops. If one of the prototypes in this chain has a property called nationality, then you will get that value. In this case, nationality is an inherited property of the object.

When you debug an object to the console, it only prints the own properties of the object.

By default, all objects have the basic Object.prototype as their prototype. If you define a constructor function, such as Person, then all objects you construct with that function (by calling new Person()) will instead have Person.prototype as their prototype.

You can get started on some deeper reading here:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create

score 1 · Answer 2 · answered Mar 28 '18 at 14:24

1

Because nationality is not an "OwnProperty" of Person, rather, is an implicit property of its prototype for every instatiated Person object.

If you need to check the properties of a specific Object, use the function getPrototypeOf.

function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
}

Person.prototype.nationality = "English";

var myFather = new Person("John", "Doe", 50, "blue");

console.log(Object.getPrototypeOf(myFather))

answered Mar 28 '18 at 14:24

Ele

33,468
7
37
75

Can you suggest some document to help me dive deeper into proto property. For some reason, I find Firefox documentation on this to be too confusing – Mar 28 '18 at 14:26
1

@RahulPatel did you read: [Inheritance and the prototype chain](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain) or [Object.prototype](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype)?? – Ele Mar 28 '18 at 14:32
1

@RahulPatel [JavaScript: Diagram to explain inheritance, __proto__ and prototype](https://stackoverflow.com/questions/29155986/javascript-diagram-to-explain-inheritance-proto-and-prototype); [oop - How to inherit from a class in javascript?](https://stackoverflow.com/questions/2107556/how-to-inherit-from-a-class-in-javascript) – Andreas Mar 28 '18 at 14:32
@Andreas interesting resources! – Ele Mar 28 '18 at 14:36

score 0 · Answer 3 · answered Mar 28 '18 at 14:22

0

nationality is not directly on the Person object - it's one step above on the prototype chain, on the prototype. When you console.log it, click on __proto__ and you will see nationality: "English".

answered Mar 28 '18 at 14:22

CertainPerformance

356,069
52
309
320

Can you suggest some document to help me dive deeper into _proto_ property. For some reason, I find Firefox documentation on this to be too confusing. – Mar 28 '18 at 14:26

score 0 · Answer 4 · answered Mar 28 '18 at 14:29

Try this

console.log(myFather.__proto__);

Javascript searches for the key in the object, if not found it searches it in the proto of the object. If still not found , in the proto of the proto object. If you are new to this, I think you will find this blog very useful.

http://blog.vjeux.com/2011/javascript/how-prototypal-inheritance-really-works.html

P.S I know you don't want links to any blogs or reference, but trust me, this one will really clear your concepts

Understanding prototype and Object

4 Answers4