Inheritance in JS, inheriting properties and values

Question

I am a beginner and can't understand how the prototypes and inheritance works in JavaScript. I am basing on the code here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript#Inheritance and I can't figure out how to inherit properties values, I can only get "methods". I think that maybe the more appropriate question is how to initiate fields of parent class when invoking a child object?

In accordance with the mentioned site, I wrote something like this:

    function Person(name, surname) {
        this.name = name;
        this.surname = surname;     
    } 
function Student(index) {
    this.index = index;
    Person.call(this);
}

Student.prototype = new Osoba ();//I tried to insert values here in the constructor, it doesn't work
Student.prototype.constructor = Student;

var x = new Student ('89890');//tried to insert additional values here in the constructor, it also doesn't work

Is there a way to create a student and give him also a name and surname?

I am a total noobie so please explain like you would explain to a 5 year old. PS. I have to do this in JS so please don't recommend different ways, it won't help me, thanks :)

Maybe the following answer can help you, there is also a pattern that deals with constructor parameters but you can use that in any function chain: stackoverflow.com/a/16063711/1641941 — HMR
– HMR, Commented Mar 31, 2014 at 2:17

Wiktor Zychla · Accepted Answer · 2014-03-30 14:18:40Z

1

The correct approach would be to have your child constructor repeat required parameters.

function Student(index, name, surname) {
    this.index = index;
    Person.call(this, name, surname);
}

var s = new Student ('89890', 'Jan', 'Kowalski');

Btw. this

Student.prototype = new Osoba ();

is certainly a typo, instead have

Student.prototype = new Person();

and you really don't need parameters here. The prototype will be initialized with undefined in property values and this is perfectly legal.

edited Mar 30, 2014 at 14:18

answered Mar 30, 2014 at 14:06

Wiktor Zychla

48.5k6 gold badges83 silver badges114 bronze badges

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

5 Comments

Bergi Over a year ago

No, it's not new Person!

Wiktor Zychla Over a year ago

@Bergi: I don't quite get this comment, even following the link. Can you elaborate? Taken "as is", this comment is wrong.

Bergi Over a year ago

I'm saying that Student.prototype = new Person(); is wrong and should be Student.prototype = Object.create(Person.prototype);

Wiktor Zychla Over a year ago

@Bergi: agree. The confusion is your not new Person while you meant not new Person()

Bergi Over a year ago

Yeah, the parenthesis can simply be omitted, I focused on the new :-)

dfsq · Accepted Answer · 2014-03-30 14:05:45Z

0

You can change Student constructor to this one:

function Student(index, name, surname) {
    this.index = index;
    Person.call(this, name, surname);
}

call takes optional parameters so you can invoke Person with additional arguments to set name and surname own properties.

answered Mar 30, 2014 at 14:05

dfsq

193k26 gold badges244 silver badges261 bronze badges

Comments

Rodrigo Fonseca · Accepted Answer · 2014-03-30 14:45:09Z

0

var inherit = function(C, P) {
      var F = function(){}; // i created this "proxy" to isolate the Parent constructor
      F.prototype = P.prototype;
      C.prototype = new F();
};

var Person = function(name, surname) {
       this.name = name || '';
       this.surname = surname || '';

       this.getName = function () {
         return this.name;
       }

      this.getSurname = function () {
         return this.surname;
      }
};


var Student = function(index, name, surname) {
  this.index = index;
  Person.call(this, name, surname);
};

inherit(Student, Person);

var student = new Student(0, 'Rodrigo', 'Fonseca');
alert(student.getName());
alert(student.getSurname());

edited Mar 30, 2014 at 14:45

answered Mar 30, 2014 at 14:39

Rodrigo Fonseca

9447 silver badges21 bronze badges

Collectives™ on Stack Overflow

Inheritance in JS, inheriting properties and values

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related