How to properly prototype JS sub-pseudoclasses?

Question

Making subclases is easy. I just follow this structure:

var Car = function(x){
    this.x = x;
    this.y = 10;
};
Car.prototype.say_position = function(){
    console.log("("+this.x+", "+this.y+")");
}
var a = new Car(2);
a.say_position(); //(2, 10)

Using prototype for classes is good for performance as every instance doesn't have the method repeated. For making subclasses I followed the convention explained here: https://www.udacity.com/course/object-oriented-javascript--ud015 which is as follows:

var Car = function(x){
    this.x = x;
    this.y = 10;
}; 
var Van = function(x){
    Car.apply(this, arguments);
};
Van.prototype = Object.create(Car); 
Van.prototype.constructor = Car;

Meanwhile, when I try to use prototyped methods with this structure...

var Car = function(x){
    this.x = x;
    this.y = 10;
}; 
var Van = function(x){
    Car.apply(this, arguments);
};
Van.prototype = Object.create(Car); 
Van.prototype.constructor = Car;
Car.prototype.say_position = function(){
    console.log("("+this.x+", "+this.y+")");
}


var car = new Car(2);
car.say_position(); //(2, 10)

var van = new Van(2);
van.say_position(); //Error!

As you can see, when calling say_position() on van, it throws an error. Shouldn't Van's prototype delegate to Car's prototype and find that function there? Can anyone explain and solve this?

Answer 1

The issue that you're having is that the argument to Object.create should be Car.prototype

Here's working code

var Car = function(x){
    this.x = x;
    this.y = 10;
}; 

var Van = function(x){
    Car.apply(this, arguments);
};
Van.prototype = Object.create(Car.prototype); 
Van.prototype.constructor = Car;
Car.prototype.say_position = function(){
    console.log("("+this.x+", "+this.y+")");
}

var car = new Car(2);
car.say_position(); //(2, 10)

var van = new Van(2);
van.say_position(); //(2, 10)

The Mozilla docs are always a great reference for these types of issues