JS Inheritance and mutating prototype

You're on the right track. You don't want to mutate Animal's prototype because that breaks the concept of inheritance. As was mentioned in the comments, using Object.create() is the correct way to inherit properties and methods from one object to another. A simple example of prototypical inheritance, using your example, is achieved this way:

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

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

function Cat(name, color) {
  Animal.call(this, name);
  this.color = color;
}

Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat;
Cat.prototype.getColor = function() {
  return this.color;
};

var animal = new Animal('Bob');
var cat = new Cat('Tabby', 'black');

console.log(cat.getName());
console.log(cat.getColor());
console.log(animal.getName());
console.log(animal.getColor());  // throws an error

Hi inheritance in JavaScript is rather complex and you will have to have a good understanding of the prototype object. Ill suggest you use the inheritance pattern of for instance TypeScript. You can give it a try on the Playground

Take a look at this:

var extends = this.extends || function (class, parent) {
    for (var property in parent) {
        if (parent.hasOwnProperty(property)) {
            class[property] = parent[property];
        }
    }
    function newClass() { 
        this.constructor = class;
    }
    newClass.prototype = parent.prototype;
    class.prototype = new newClass();
};

var Animal = (function () {
    function Animal(name) {
        this.name = name;
    }
    return Animal;
})();

var Cat = (function (_super) {
    extends(Cat, _super);
    function Cat(name) {
        _super.call(this, name);
    }
    Cat.prototype.sayHi = function () {
        return "Hello my name is:" + this.name;
    };
    return Cat;
})(Animal);

You seem to be mixing the prototype property of functions with the internal [[proto]] property of all objects (including functions). They are two distinct things.

Mutating the internal [[proto]] property of an object is discouraged. This can be done either via setPrototypeOf or via the __proto__ accessor, which is inherited from Object.prototype:

var a = {}; // `a` inherits directly from `Object.prototype`
var b = {}; // `b` inherits directly from `Object.prototype`

a.__proto__ = b;             // `a` now inherits directly from `b`

// or

Object.setPrototypeOf(a, b); // `a` now inherits directly from `b`

This is what is discouraged, mutating the internal [[proto]] property of an object after it has been created. However, it should be noted that while the object is being created it's alright to assign any object as its internal [[proto]] property.

For example, many JavaScript programmers wish to create functions which inherit from some object other than Function.prototype. This is currently only possible by mutating the internal [[proto]] property of a function after it has been created. However, in ES6 you will be able to assign the internal [[proto]] property of an object when it is created (thus avoiding the problem of mutating the internal [[proto]] property of the object).

For example, consider this bad code:

var callbackFunctionPrototype = {
    describe: function () {
        alert("This is a callback.");
    }
};

var callback = function () {
    alert("Hello World!");
};

callback.__proto__ = callbackFunctionPrototype; // mutating [[proto]]

callback.describe();

It can be rewritten in ES6 as follows:

var callbackFunctionPrototype = {
    describe: function () {
        alert("This is a callback.");
    }
};

// assigning [[proto]] at the time of creation, no mutation

var callback = callbackFunctionPrototype <| function () {
    alert("Hello World!");
};

callback.describe();

So, mutating the internal [[proto]] property of an object (using either setPrototypeOf or the __proto__ accessor) is bad. However, modifying the prototype property of a function is fine.

The prototype property of a function (let's call the function F) only affects the objects created by new F. For example:

var myPrototype = {
    describe: function () {
        alert("My own prototype.");
    }
};

function F() {}

var a = new F; // inherits from the default `F.prototype`

alert(a.constructor === F); // true -  inherited from `F.prototype`

F.prototype = myPrototype; // not mutating the `[[proto]]` of any object

var b = new F; // inherits from the new `F.prototype` (i.e. `myPrototype`)

b.describe();

To know more about inheritance in JavaScript read the answer to the following question:

JavaScript inheritance and the constructor property

Hope that helps.