Can you help clarify Javascript prototype inheritance method invocation?

Question

In this block of code:

var Fruit = function() {}

Fruit.prototype = {
    color: function () {
        console.log('Fruit color...')
    }
}

var Apple = function () {}

Apple.prototype = new Fruit()
Apple.prototype.constructor = Apple

var a = new Apple()
Apple.prototype = null // the question!!!
a.color()

When Apple.prototype has been set to null, why can the instance a still invoke the color method?

Answer 1

You're changing the Apple.prototype reference after you have created the instance a.

Changing the reference here doesn't change it for existing instances.

You'll also find

var a = new Apple();
Apple.prototype = {}; // some other object
a instanceof Apple; // false

i.e. because we've changed the inheritance chain of Apple a is no longer considered an Apple.

Setting Foo.prototype = null will cause a TypeError if you attempt to to an instanceof Foo check

---

Changing a property of an Object doesn't change the reference to that Object. e.g.

var foo = {},
    bar = foo;
foo.hello = 'world';
foo === bar; // true

Changing the Object itself does change the reference

foo = {hello: 'world'};
foo === bar; // false

Or written in a way more closely to how the prototype is referenced from an instance,

var Foo = {}, // pseudo constructor
    bar = {},
    baz = {};
var fizz = {}; // fizz will be our pseudo instance

Foo.bar = bar;          // pseudo prototype
fizz.inherit = foo.bar; // pseudo inheritance
Foo.bar = baz;          // pseudo new prototype
fizz.inherit === foo.bar; // false, instance inheritance points elsewhere

---

Current best practice for setting up an inheritance chain is not to use new, but to use Object.create

Apple.prototype = Object.create(Fruit.prototype);

If you need the Fruit constructor called on Apple instances, you would do

function Apple() {
    // this instanceof Apple
    Fruit.apply(this);
    // ...
}