Why constructor property of object points to parent's constructor instead of F in extend function if constructor property is not overridden

Question

I'm discerning the famous JS's extend function:

function extend(parent, child) {
    var F = new Function();
    F.prototype = parent.prototype;
    child.prototype = new F();
    //child.prototype.constructor = Child
}

I've commented out the line where the constructor property is overridden. If I create the objects in the following way:

var p = function p() {this.parent = true};
var c = function c() {this.child = true};
extend(p, c);
console.log((new c()).constructor); //outputs reference to `p` constructor, why?

My question is why the constructor references var p = function p() {this.parent = true}; instead of anonymous function that variable F points to? The manual on constructor property states that constructor property returns a reference to the Object function that created the instance's prototype and the instance prototype new F() was created by anonymous function. So why does it point to the other thing?

Update

Is the following assumption I've made based on HMR's answer correct?
When a new function is created, JS engine creates new empty object and sets prototype proprety of the function to point to this newly created object. Then JS engine adds a constructor property to this object pointing to the created function.

So now to my case. When var F = new Function() JS engine:
1) creates new F function
2) creates new object (let it be oF)
3) sets prototype F.prototype = oF
4) sets constructor oF.constructor = F

The same goes for function p which has its prototype oP with a constructor property set to function p. As we remember, F.prototype points to oF but after we execute the following line F.prototype = parent.prototype it is now points to oP. Then when we access (new c()).constructor property new c() object doesn't have it so JS engine starts looking backwards on prototypes and finds the property on oP pointing to function p - and this is excatly what I get.

Answer 1

If a member can't be found on an instance then JS engine will look in the prototype chain. The prototype chain is a bunch of objects that have a __proto__ of another object until it's null.

Please note that __proto__ is a non standard property and used here to explain the object first used in the prototype chain.

Since you replaced child.prototype with an empty object that has __proto__ of parent.prototype the JS engine cannot find constructor on c, child.prototype but then it'll find it on child.prototype.__proto__ which is parent.prototype.

When you do:

child.prototype.constructor=child;

it adds it to child.prototype so it doesn't mutate parent.prototype which is in child.prototype.__proto__. This is called shadowing.

More on prototype and constructor functions here.

[update]

The prototype chain after inherits looks like this:

insance of child (new c())
  => c.prototype === new F() so an empty object
    => p.prototype, set when you did F.prototype=parent.prototype

Answer 2

You should put

F.prototype = parent;

That way you did you're are saying "both constructor are the same", with the example I show, you will say "F constructor is equal parent constructor"

Answer 3

The problem is that the child constructor is effectively lost during that process.

function extend(parent, child) {
    // Create a completely blank anonymous function
    var F = new Function();

    // Give it all the same properties as the parent, including constructor
    F.prototype = parent.prototype;

    // Overwrite the childs prototype with an instance of the parent
    child.prototype = new F();
}

Since the child prototype is overwritten with an instance of parent.prototype, child.prototype.constructor is overwritten as well.

Personally, here's the extend function I use and it works beautifully.

function extend(Derived, Base) {
    Derived.prototype = Object.create(Base.prototype);
    Derived.constructor = Derived;
}