Confused on Prototype inheritance Javascript

80
June 15, 2018, at 10:00 PM

I found this picture here

In this case, foo is a constructor function and B and C are objects. I am very confused, first off when you create an object does it always come with the properties and proto? Is that the default? Also in terms of the constructor function for foo. Am I correct to say that every proto of a function defaults to Function.prototype, which uses Object.prototype to create an object? The part that is confusing for me is Foo.prototype, when was this prototype created? Does a constructor function always default to the creation of a prototype which a constructor reference set back to itself and a proto set to object?

Answer 1

No wonder there is confusion. The picture is misleading to the point of being incorrect!

Objects created by calling a constructor function with the new keyword have their inheritance chain set to start with the prototype property of the constructor (correct in the picture).

The prototype property is created every time a function is declared using the function keyword to cover the case of the function being use as a constructor later - so you don't need to specify if a function is a constructor or not. For completeness, functions generated by the class keyword also have a prototype property.)

The function's prototype property's constructor property is set to the function when the prototype property is created (meaning when the function is declared). Again the picture is correct: the value of Foo.prototype.constructor is a reference to Foo.

What is wrong in the picture is objects a and b somehow joining together in a reverse fork and their properties becoming available to instances of Foo.

constructor is always an inherited property. If you replace the original prototype property of a function object with another object, you replace the constructor property inherited by objects constructed with the function. Although you can reset the constructor property of a functions prototype property, it's reasonably unusual and not a part of the story the picture is presenting.

If you do modify the inheritance chain by changing a function's prototype property value, the inheritance chain is still always a single threaded chain back to Object.prototype and then null. The inheritance chain never forks as shown in the picture. If you modified Foo.prototype in the picture to make it a or b, the constructor property of Foo instances would not be Foo.

The picture requires a lot of explanation to be useful.

Answer 2

The properties are assigned in the construction function. Any function can be used with new,thus becoming the "construction function".

var f = function(){};
var fInstance = new f();
console.log(fInstance.constructor); // *f*

If there are no properties assigned in that function (using this.propertyName), then the constructed instance will not have properties. If it does, then it will.

// No properties
var f = function(){};
// Two constructor properties, and one default property
var f = function(prop1, prop2){
    this.name = prop1;
    this.description = prop2;
    this.something = "default";
};

If the prototype of the construction function has properties or methods (basically just glorified properties) attached to its prototype, then each instance will have those.

// No prototype
var f = function(){}; 
// Prototype with one method
var f = function(){};
f.prototype.test = function(){ console.log("hello"); };

The prototypes and properties must be manually created, and may or may not exist. By default, since using new requires a function, there will always be a constructor function. The process of instantiation using new will also always assign the prototype of the constructor to an object containing the constructing function as a property named constructor as well as all of the properties/methods of the construction function's prototype.

Answer 3

In this case, foo is a constructor function and B and C are objects.

Functions are also objects. Everything are objects. unlike classical inheritance where what defined objects are separate entities. Here an object that is an instance of Function is the constructor that will create an instance of its kind that inherits whatever object is on the constructors prototype attribute.

I am very confused, first off when you create an object does it always come with the properties and proto? Is that the default?

Only way to get the objects own property y is if the constructor function sets this.y. If a property is not found on the object the system will continue to look at the object that was on the constructors prototype field. Some implementations has this as __proto__ but that is not a requirement. It is implementation specific how it is stored on the instance.

Also in terms of the constructor function for foo. Am I correct to say that every proto of a function defaults to Function.prototype, which uses Object.prototype to create an object?

function() {...} makes an instance of the constructor Function. All objects except Object itself inherits Object either indirectly or directly, including Function. Basically you can make a function like this:

var f = new Function('a', 'b', 'return a + b');

f is an instance of Function, as you can see. This is almost the same as:

var f = function(a, b) { return a + b; };

Now the first allows for text to be interpreted as code so its less efficient, but I imagine that in the early days these two would be identical in terms of interpretation. Modern engines prefer the last one since it is more predictable while the first can be seen as a specialized eval.

The part that is confusing for me is Foo.prototype, when was this prototype created? Does a constructor function always default to the creation of a prototype which a constructor reference set back to itself and a proto set to object?

Yes. When the function Foo is created, JS creates by default protoype as new Object(), then it sets constructor to itself. The rest needs to be done in the code itself so we know there is something like this after the actual function code to do the rest of the class:

Foo.prototype.x = 10;
Foo.prototype.calculate = function(...) {...};
READ ALSO
Separate strings in an array in a certain order

Separate strings in an array in a certain order

I have a list that I took from a converted CHANGELOGmd file, and it looks like this:

82
Selenium Webdriver - Setting Cookie With Chrome Extension

Selenium Webdriver - Setting Cookie With Chrome Extension

I am trying to use a chrome extension to set a cookie when I get a Selenium Webdriver instance to open a pageI have tried following a variety of ways suggested in different stackoverflow posts but none of them ever show when I open the page inspector

221
Jest testing a function with no return [on hold]

Jest testing a function with no return [on hold]

I am in the process of unit testing a function using Jest that merely passes on its parameters to another function by calling it and has no return

105
How to get html + js from url after page load completely

How to get html + js from url after page load completely

I'm trying to get the HTML/JS from a URL after the page has fully loaded

160