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: http://stackoverflow.com/a/16063711/1641941 — HMR, Mar 31 '14 at 02:17

Wiktor Zychla · Answer 1 · 2014-03-30T14:18:40.953

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 '14 at 14:18

answered Mar 30 '14 at 14:06

Wiktor Zychla

47,367
6
74
106

No, [it's not `new Person`](http://stackoverflow.com/questions/12592913/what-is-the-reason-to-use-the-new-keyword-here)! – Bergi Mar 30 '14 at 14:33
@Bergi: I don't quite get this comment, even following the link. Can you elaborate? Taken "as is", this comment is wrong. – Wiktor Zychla Mar 30 '14 at 15:43
I'm saying that `Student.prototype = new Person();` is wrong and should be `Student.prototype = Object.create(Person.prototype);` – Bergi Mar 30 '14 at 16:03
@Bergi: agree. The confusion is your `not new Person` while you meant `not new Person()` – Wiktor Zychla Mar 30 '14 at 16:13
Yeah, the parenthesis can simply be omitted, I focused on the `new` :-) – Bergi Mar 30 '14 at 16:18

score 0 · Answer 2 · answered Mar 30 '14 at 14:05

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.

Rodrigo Fonseca · Answer 3 · 2014-03-30T14:45:09.587

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());

Inheritance in JS, inheriting properties and values

3 Answers3