On the _javascript techniques of JS prototype object and prototype chain

In JavaScript, everything is an object, but there are also differences between objects, which can be roughly divided into two categories: ordinary Objects (object) and Function objects (functions).

In general, the object generated by the new function is the function object, and the other objects are ordinary objects.

An example is provided:

Function F1 () {
  //todo
}
var F2 = function () {
  //todo
};
var F3 = new Function (' x ', ' Console.log (x) ');
 
var O1 = {};
var O2 = new Object ();
var O3 = new F1 ();
 
Console.log (
  typeof f1,//function
  typeof f2,//function
  typeof f3,//function
  typeof O1,//object
  typeof O2,//object
  typeof O3//object
);
>> function function is Object object

F1 is a function of the declaration, the most common way to define the function, F2 is actually an anonymous function, the anonymous function assigned to the F2, belong to the function expression, F3 uncommon, but also a function object.

Function is the object of JS, f1,f2 when created, JS automatically through the new function () the way to build these objects, so the three objects are created by the new function ().

There are two ways to create objects in JavaScript: Object literals and the use of new expressions, the creation of O1 and O2 corresponds to the two ways, focusing on the O3, if understood in Java and C #, O3 is the F1 instance object, O3 and F1 are the same type, At least I used to think so.

So how do you understand it? It's easy to see if O3 is created by the new function, obviously not, since it's not a function object, it's a normal object.

With a simple understanding of the function object and the normal object, let's take a look at the prototype and prototype chain in javascript:

In JS, when you create a function object F1, some properties are built into the object, including prototype and __PROTO__, prototype the prototype object, which records some of the F1 properties and methods.

It should be noted that prototype is not visible to F1, that is, F1 does not look for properties and methods in prototype.

function f () {}
F.prototype.foo = "abc";
Console.log (F.foo); Undefined

So, what's the use of prototype? In fact, the main role of prototype is to inherit. In layman's terms, the properties and methods defined in prototype are reserved for their descendants, so subclasses can fully access the properties and methods in prototype.

Want to know how F1 left prototype to "offspring", we need to understand JS in the prototype chain, at this time, JS in the __proto__ admission, this guy is very strange, hidden also very deep, so that you often see it, but it in the ordinary objects and function objects exist, Its role is to save the prototype object of the parent class, JS in the new expression to create an object, usually the parent class prototype assigned to the new object of the __proto__ attributes, so that the formation of a generation of inheritance ...

function f () {}
F.prototype.foo = "abc";
var obj = new F ();
Console.log (Obj.foo); Abc

Now we know that the __proto__ in obj is the prototype of F, so what is stored in the __proto__ of the prototype of F? Look at the picture below:

As shown in the figure, the __proto__ in the F.prototype contains __proto__ in the Object.prototype,object.prototype object, and from the output view, object.prototype.__ PROTO__ is null, representing the end of the Obj object prototype chain. As shown in the following illustration:

The Obj object has such a prototype chain, and when Obj.foo executes, obj finds out if it has the attribute, but does not find its own prototype, and when Foo is not found, obj looks in sequence along the prototype chain ...

In the above example, we defined the Foo attribute on the prototype of F, at which point obj would find the attribute and execute it on the prototype chain.

Finally, summarize the key points in this article with a few words:

• The formation of the prototype chain is really relying on __proto__ rather than prototype, when the JS engine executes the object's method, first find out if the object itself exists, if it does not exist, it will be found on the prototype chain, but will not find its own prototype.
• The __proto__ of an object records its own prototype chain, determines its own data type, and changing __proto__ equals changing the object's data type.
• The prototype of a function is not a prototype chain of its own, it is the core of subclass creation, determines the data type of subclass, and is the bridge connecting the subclass prototype chain.
• The purpose of defining methods and properties on a prototype object is to inherit and use the quilt class.

The above is the entire content of this article, I hope to help you learn.