Last Updated: February 25, 2016
·
1.676K
· phantom

Understanding javascript prototype and prototype chain proces

Prototype must be defined before instance of class in order to see method in class

function Teacher(){
    this.teaching = "I'm teaching you javascript";
    this.surname = "Ivanovic";
    return this;
}
Teacher.prototype = {};
Teacher.prototype.getName = function(){
    return this.name + " " + this.surname;
}
function Person(){
    this.name = "Igor";
    return this;
}
Person.prototype = new Teacher();
var person = new Person();
var teacher = new Teacher();

Person().constructor.toString() - function Window() { [native code] }
Person is not called with "new" keyward and person becomes global window object becuse we are returning this in function Person and property teaching and surname are not visible in global window object

person instanceof Person - true,
person instanceof Teacher - true,
person instanceof Object - true

If an object inherits properties from more than one prototype and it has more than one object in its "prototype chain”, then the properties of each prototype object in the chain are enumerated in creation order before enumerating the properties of the next object

person.constructor === Object - true,
person.constructor === Person - false,
person.constructor === Teacher - false

person.constructor is object because is chained from teacher.prototype witch is defined as Object

person.teaching - I'm teaching you javascript person.getName() - Igor Ivanovic
Constructed person prototype is constructed Teacher and Teacher properties are visible because Person.prototype is new Teacher()
If Person.prototype = Teacher.prototype teacher.surname will not be visible because Person.prototype = Teacher.prototype creates local copy of Teacher prototype

teacher instanceof Person - false,
teacher instanceof Teacher - true,
teacher instanceof Object - true

Teacher is not instance of Person witch is true because teacher prototype is Object

teacher.constructor === Object - true,
teacher.constructor === Person - false,
teacher.constructor === Teacher - false

Teacher constructor is Object because Teacher.prototype is Object

function NonChainedPerson(){
    this.name = "Igor";
    this.surname = "Ivanovic";
    return this;
}

NonchainedPerson.prototype.getName = function(){
    return this.name + " " + this.surname;
}

nonchained.constructor.toString() - function NonchainedPerson(){ this.name = "Igor"; this.surname = "Ivanovic"; return this; }
In this example constructor returns local object string witch is NonchainedPerson because prototype is not inherited

nonchained instanceof Person - false
nonchained instanceof Teacher - false
nonchained instanceof Object - true
nonchained instanceof NonchainedPerson - true

Instance is NonchainedPerson

nonchained.constructor === Object - false
nonchained.constructor === Person - false
nonchained.constructor === Teacher - false
nonchained.constructor === NonchainedPerson - true

Constructor is NonchainedPerson

nonchained.getName() - Igor Ivanovic
Returns name and surname properties on getName method call witch is expected behavior