value of parent object not changed from inheritance through prototype

Question

Am new in javascript OOP, please bear with me

Changing the value of parent object from inherited object Student should change the age of the person but am getting exactly same value.

<script>
function Person(age){ 
    this.age=age;
}

    function Student(){}

    var person=Student.prototype=new Person(10);
    var oldAge=person.age;
    Student.age=20;
    var newAge=person.age;

    alert("Person old age="+oldAge+"\New age="+newAge);
</script>

as person and Student inherited from same Person object then value of age of both sudent and person should change on changing the value from Student

I already went through Prototypical inheritance - writing up and JavaScript Inherited Properties Default Value questions

problem is i want to change the value of Person through Student which inherits the property of Person.

I think am missing something here please help me understand this.

[Don't use `Student.prototype=new Person(10);`!](https://stackoverflow.com/questions/12592913/what-is-the-reason-to-use-the-new-keyword-here) — Bergi, Oct 05 '17 at 20:01
thats the issue @Bergi i want to change value of Person through Student — phpdroid, Oct 05 '17 at 20:02
Well you should [properly inherit `Student` from `Person`](https://stackoverflow.com/questions/10898786/correct-javascript-inheritance/), and then use `var studentOne = new Student(); console.log(studentOne.age); studentOne.age = 20; …` — Bergi, Oct 05 '17 at 20:04

varunsinghal65 · Accepted Answer · 2017-10-06T09:22:42.067

There are two patterns which are used to implement inheritance in javascript

Prototype Object oriented pattern
Constructor Object oriented pattern

Now i will use the first method

Some prerequisite knowledge :

All the JS objects have a property that points to a prototype object, thus apart from it's own properties, the object can also access porperties of it's own prototype
__proto__ : It's a property which all objects have, this points to the prototype of that object.
Object.create(arg) : It is used to create objects and initaliaze their prototype OR set their __proto__ property.

Object.create MDN link

below snippet implements inheritance as well as allows you to modify the value of Person through Student. :

function Person(age){ 
    this.age=age;
    this.getAge = function () { return this.age;}
};

function Student(){};

//Creating Person instance
var person = new Person(23);

console.log("Old Person age is " + person.age);

//Creating a student instance and inheriting it from person instance
//Object.create method creates a object whose __proto__ point to the object passed
//Thus student will be an object having a property __proto__ that would point to person instance
//This assosciation allows the instance of student to access insatnce of Person
var student = Object.create(person);

//Change age of person through student
student.__proto__.age = 24;

console.log("New Person age is " + person.age);

console.log("We can also call parent object methods from child" + " for e.g calling getAge from student" + student.getAge());

Now to achieve something similar using second method, following snippet can be used :

function Person(age){ 
    this.age=age;
}

function Student(){}

//Create person instance
var person = new Person(23);

console.log("Old age of person is " + person.age);

//Inherit the person instance
Student.prototype = person;

//create a student object
var student = new Student();

//Change the person instance age value
//this change is possible because we
//can access person object through
//student.__proto__.
student.__proto__.age = 24;

console.log("New age of person is " + person.age);

It's funny when I read it properly, you just use name 'student' it is not slightly related to my question! — phpdroid, Oct 06 '17 at 03:47
I think you got confused because of my last console log, i used student in my last console log just to demonstrate how a child object can call parent object's method , by the way i suggest you to check my code again and see my first and second console log there you can see I modified person's age via student's instance,isn't that your original question ?? — varunsinghal65, Oct 06 '17 at 04:53
you have created `student` variable not `Student` object you have not used anywhere `Student` FYI function `Student` is untouched — phpdroid, Oct 06 '17 at 05:47

score 0 · Answer 2 · answered Oct 05 '17 at 19:49

The simplest way to explain this is that person.age is a property on an instance, where as Student.age is a static property that is not related to your instance.

You can simplify the whole example to remove student, and you'll still see you have something like an instance property and a static property.

function Person(age){ 
    this.age = age;
}

var person = new Person(10);
var oldAge = person.age;
Person.age = 20;
var newAge = person.age;

alert("Person old age=" + oldAge + "\New age=" + newAge);
alert(Person.age);

problem is i want to change the value of Person through Student which inherited the property of Person. — phpdroid, Oct 05 '17 at 19:57

Jonathan Wang · Answer 3 · 2017-10-05T20:27:38.917

In JavaScript, you should always use prototypal inheritance to make this work.

var person = { 
    age: 10
}
var student = Object.create(person);
var oldAge=person.age;
student.age=20;
var newAge=student.age;

alert("Person old age="+oldAge+"\New age="+newAge);

In your code, Since function Student doesn't have the property age in Creation phase, JavaScript engine will make a property called age in memory. In execution phase, JavaScript engine will assign 20 to the new property that was created in creation phase.

If you execute inside the browser, the you will notice function Student has a new property, called age, which is equal to 20.

so there is no way i can change value of Person Object from Student object? — phpdroid, Oct 05 '17 at 20:12

value of parent object not changed from inheritance through prototype

3 Answers3