JS core series: Prototype objects and prototype chains

JS core series: Talking about prototype objects and prototype links in Javascript, all objects are objects, but there are also differences between objects, which can be roughly divided into two categories: common objects (objects) and Function objects (functions ).

In general, the objects generated through the new Function are Function objects, and other objects are common objects.

Example:

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 function object object object

F1 is a function declaration, and the most common function definition method. f2 is actually an anonymous function. It assigns a value to f2, which is a function expression. f3 is not common, but it is also a function object.

Function is an object that comes with JS. When f1 and f2 are created, JS will automatically build these objects using the new Function () method. Therefore, all three objects are created through new Function.

There are two ways to create an object in Javascript: the literal volume of the object and the new expression. The creation of o1 and o2 exactly corresponds to these two methods, if you use the Java and C # ideas to understand it, o3 is an f1 instance object, and o3 and f1 are of the same type. At least I thought so before, but it is not actually...

So how can we understand it? It's easy to see if o3 is generated through the new Function. Obviously not, since it is not a Function object, it is a common object.

After a simple understanding of function objects and common objects, let's take a look at the prototype and prototype chain in Javascript:

In JS, each time a function object f1 is created, this object has some built-in attributes, including prototype and _ proto __, prototype, which is the prototype object, it records some attributes and methods of f1.

It should be noted that prototype is invisible to f1, that is, f1 does not look for the attributes and methods in prototype.

function f(){}f.prototype.foo = "abc";console.log(f.foo); //undefined

So, what is prototype used? In fact, prototype is mainly used for inheritance. Generally speaking, the attributes and methods defined in prototype are reserved for their "descendants". Therefore, subclass can access the attributes and methods in prototype.

To know how f1 left prototype to "future generations", we need to know about the prototype chain in JS. At this time, _ proto _ in JS entered the market. This guy is very strange, it is so hidden that you often cannot see it, but it exists in both common objects and function objects. Its function is to save prototype objects of the parent class, when JS creates an object through the new expression, it usually assigns the prototype of the parent class to the _ proto _ attribute of the new object, which forms a generation-to-generation inheritance...

function f(){}f.prototype.foo = "abc";var obj = new f();console.log(obj.foo); //abc

Now we know that _ proto _ in obj stores the prototype of f. What is saved in _ proto _ in prototype of f? See:

, F. the prototype _ proto _ stores the Object. prototype, Object. prototype objects also contain _ proto __, and the output result shows that the Object. prototype. _ proto _ is null, indicating the end Of the obj object prototype chain. As shown in:

After the obj object has such a prototype chain, when obj. when foo is executed, obj first finds whether it has this attribute, but does not search for its prototype. When foo cannot be found, obj searches for it along the prototype chain...

In the above example, we define the foo attribute on prototype of f. Then obj will find this attribute on the prototype chain and execute it.

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

1. The prototype chain is actually formed by _ proto _ rather than prototype. When the JS engine executes the object method, it first checks whether the object exists in the method. If not, it will be searched on the prototype chain, but will not find its prototype.

2. The _ proto _ of an object records its prototype chain and determines its data type. Changing _ proto _ is equivalent to changing the Data Type of the object.

3. The prototype of a function does not belong to its own prototype chain. It is the core of subclass creation. It determines the Data Type of the subclass and serves as a bridge connecting the prototype chain of the subclass.

4. The purpose of defining methods and attributes on the prototype object is to inherit and use the quilt class.