Javascript: Inheritance in Object Oriented Programming

Inheritance allows one class to see and use the methods and properties of another class. Let's create a class called Animal, along with a sayName method:

function Animal(name, numLegs) {
    this.name  = name;
    this.numLegs = numLegs;
};

animal.prototype.sayName = function()
{
    console.log("Hi my name is " + this.name)
};

// here's a code to test the above constructor and method
var penguin = new Animal("Captain Cook", 2);
penguin.sayName();

Wouldn't it be cool if we created a Penguin class? Let's do that so that we can give it some methods unique only to a penguin and not confuse it with the Animal class.

function Penguin(name, numLegs) {
    this.name = name;
    this.numLegs = numLegs;
}

Penguin.prototype.sayName = function()
{
    console.log("Hi my name is " + this.name);
};

We seemed to have reused a lot of the same code as the Animal class. This goes against the "DRY" principle--aka "don't repeat yourself"! We're going to create a new Penguin class, but we're going only take a name parameter, and within the constructor itself, set this.numLegs to 2.

function Penguin (name) {
    this.name = name;
    this.numLegs = 2

// set its prototype to be a new instance of Animal
Penguin.prototype = new Animal();

Now we're going to create an Emperor class that takes a single name parameter and sets its name property to be this value.

// create your Emperor class and make it inherit from Penguin
function Emperor (name) {
    this.name = name;
}

Emperor.prototype = new Penguin();
// create an "emperor" object and print the number of legs it has
var emperor = new Emperor("Mr. McWaddle");
console.log(emperor.numLegs);

The "prototype chain" in Javascript sort of like a food chain. If JavaScript encounters something it can't find it the current class's methods or properties, it looks up the prototype chain to see if it's defined in a class that it inherits from. This keeps going upwards until it stops all the way at the top: the Object.prototype. All classes inherit directly from Object, unless we change the class's prototype.

// original classes
function Animal(name, numLegs) {
    this.name = name;
    this.numLegs = numLegs;
    this.isAlive = true;
}
function Penguin(name)
    this.name = name;
    this.numLegs = 2;
}
function Emperor(name) {
    this.name = name;
    this.saying = "Waddle waddle";
}

// set up the prototype chain
Penguin.prototype = name Animal();
Emperor.prototype = new Penguin();

var myEmperor = new Emperor("Jules");

console.log( myEmperor.saying ); // should print "Waddle waddle"
console.log( myEmperor.numLegs ); // should print 2
console.log( myEmperor.isAlive ); // should print true

Javascript: Object-Oriented Programming Basics

Alright, so now we can finally learn the basics of OOP! The first thing I'm going to introduce is a class.    When you make a constructor, you are actually defining a new class! A class can be thought of as a type, or a category of objects -- remember numbers and strings? Those are types too!

/* take a look at the example below, jenny and alex are two separate objects, but they both belong to the class Person */
function Person(name, age) {
    this.name = name;
    this.age = age;
};

var jenny = new Person("Jenny", 18);
var alex = new Person("Alex", 13);

A prototype keeps track of what a given class can or cannot do. Javascript automatically defines the prototype for class with a constructor.

// for example, this dog constructor ensures that the dog prototype has a breed property
function Dog (breed) {
    this.breed = breed;
};

Classes are really useful because they tell us helpful information about objects. You can actually think of an object as a particular instance of a class. Look at our Person class. We know that any Person will have a  name and age because they are in they are in the constructor. Let's create a function like printPersonName--this will take a Person as an argument and print out their name.

// recall our Person class
function Person(name, age) {
    this.name = name;
    this.age = age;
};

// a function that prints out the name of any given person
function printPersonName(p) {
    console.log(p.name);
};

var jenny = new Person("Jenny", 18);
printPersonName(jenny);

If you want to add a method to a class such that all members of the class can use it, we use the following syntax to extend the prototype:

className.prototype.newMethod = 
function() {
statements; 
}; 

// here's another example using the dog class:
function Dog (breed) {
    this.breed = breed;
};

// here we make fifi and teach her how to bark
var fifi = new Dog("pomeranian");
Dog.prototype.bark = function() {
    console.log("Arf!");
};
fifi.bark();

// here we make maya
var maya = new Dog("Pug");
maya.bark();

P.S. I created a youtube channel where I'll be uploading vlogs and cooking videos and random miscellaneous things, so if you want to get to know me a little better, I suggest you check it out! (And subscribe!) :)