How to use polymorphism in Javascript

Question

Most languages use single inheritance for classes. And it's fairly obvious the pattern to do this (for example in Swift code below). I am still trying to wrap my head around the pattern in JavaScript to create a object hierarchy and re-use class functions and override class functions

class animal {
    func talk() {
        print ("?")
    }
}

class bird : animal {
    override func talk() {
        print("tweet tweet")
    }
    func fly() {
        print("flap flap")
    }
}

class parrot : bird {
    override func talk() {
        print("polly want a cracker")
    }
}

var a = animal()
var b = bird()
var p = parrot()

a.talk()  /// ?
b.talk()  /// tweet tweet
b.fly()   /// flap flap
p.talk()  /// polly want a cracker
p.fly()   /// flap flap

I think my problem is the Javascript code looks nothing like this. What is the equivalent Javascript code so I can figure out the pattern?

Answer 1

You pretty much answered your own question. You just have to learn JavaScript's syntax for it.

I think my problem is the Javascript code looks nothing like this.

1. It's not a "problem" for you if a language looks different from another one

2. The Swift code you provided is syntactically very close to the JavaScript (ES6) you'd need to write to express the same hierarchy of classes

class Animal {
  talk() {
    console.log('?')
  }
}

class Bird extends Animal {
  talk() {
    console.log('tweet tweet')
  }
  fly() {
    console.log('flap flap')
  }
}

class Parrot extends Bird {
  talk() {
    console.log('polly want a cracker')
  }
}

var a = new Animal()
var b = new Bird()
var p = new Parrot()

a.talk()
b.talk()
b.fly()
p.talk()
p.fly()

---

If you want to setup a "class" inheritance in ES5, you can do this

// Animal "class"
function Animal() {}

// Animal methods
Animal.prototype.talk = function talk() {
  console.log('?')
}

// ------------------------------
// Bird "class"
function Bird() {
  // if you want to call the parent constructor, you can do that here
  // Animal.call(this, arg1, arg2, ... argN)
}

// Bird inherits from Animal
Bird.prototype = Object.create(Animal.prototype)
Bird.prototype.constructor = Bird

// Bird methods
Bird.prototype.talk = function() {
  console.log('tweet tweet')
}
Bird.prototype.fly = function() {
  console.log('flap flap')
}

// ------------------------------
// Parrot "class"
function Parrot() {
  // if you want to call the parent constructor, you can do that here
  // Bird.call(this, arg1, arg2, ... argN)
}

// Parrot inherits from Bird
Parrot.prototype = Object.create(Bird.prototype)
Parrot.prototype.constructor = Parrot

// Parrot methods
Parrot.prototype.talk = function() {
  console.log('polly want a cracker')
}

var a = new Animal()
var b = new Bird()
var p = new Parrot()

a.talk()
b.talk()
b.fly()
p.talk()
p.fly()

Answer 2

There are two answers, ES6:

class animal {
    talk() {
        console.log("?")
    }
}

class bird extends animal {
    talk() {
        console.log("tweet tweet")
    }
    fly() {
        console.log("flap flap")
    }
}

class parrot extends bird {
    talk() {
        console.log("polly want a cracker")
    }
}

var a = new animal()
var b = new bird()
var p = new parrot()

a.talk()  /// ?
b.talk()  /// tweet tweet
b.fly()   /// flap flap
p.talk()  /// polly want a cracker
p.fly()   /// flap flap

and ES5:

function animal() {

}

animal.prototype.talk = function () {
    console.log("?")
};

function bird() {
    animal.call(this)
}

bird.prototype = Object.create(
    animal.prototype,
    {constructor: {value: bird}}
);

bird.prototype.talk = function () {
    console.log("tweet tweet")
};

bird.prototype.fly = function () {
    console.log("flap flap")
};

function parrot() {
    bird.call(this);
}

parrot.prototype = Object.create(
    bird.prototype,
    {constructor: {value: parrot}}
);

parrot.prototype.talk = function () {
    console.log("polly want a cracker")
};


var a = new animal()
var b = new bird()
var p = new parrot()

a.talk()  /// ?
b.talk()  /// tweet tweet
b.fly()   /// flap flap
p.talk()  /// polly want a cracker
p.fly()   /// flap flap