preface

Please spend some time to thoroughly understand the following concepts, before proceeding to the next step, thinking questions must be considered, so as to thoroughly grasp the knowledge points of the prototype chain, if there are any mistakes in the tutorial, please correct them!

The function object

A function created by function, such as:


    function a(){};
    var b=function(){};
    
Copy the code

A function object built into the system

Function,Object,Array,String,Number
Copy the code

Only function objects have the Prototype property. Important things three times!

Consider: Are js reference data types function objects?

Ordinary objects

Objects other than function objects are ordinary objects

var b='qwe'; Var c=123; // b is a string of characters. // c is a number type and belongs to a common objectCopy the code

Consider :js has five basic types :Undefined, Null, Boolean, Number and String. Are they all ordinary objects?

A prototype object

Prototype properties, also called prototype objects, are used for inheritance and shared properties.

It can be said that every time we program, there are inherent prototype objects to play a role, if you do not master the meaning of prototype objects, then your JS has not really entered the door!

function a(){};
Copy the code

First, object A is created by Function, it’s a Function object; A has the prototype property. How is the prototype object created? Consider the following example:

var temp = new a();
a.prototype=new Object();
a.prototype = temp;
Copy the code

So this is how the prototype property of A was created;

Does prototype belong to a function object?

Pointer __proto__

In JavaScript, everything is an object! All objects obj have the proto attribute (except null and undefined) and are called implicit stereotypes. An implicit stereotype of an object points to the stereotype of the constructor that constructed the object

See the following examples to help understand:

function a(){};
var obj=new a();
console.log(a.__proto__===Function.prototype); //true
console.log(a.prototype.__proto__===Object.prototype); //true
console.log(obj.__proto__===a.prototype); //true
Copy the code

Var obj={}; Obj.prototype. __proto__ to whom?

The constructor attribute constructor

Assuming that obj is created from the new operation on function object A, the constructor property of OBj holds a reference to A. From this constructor, we can add other properties and methods to A. This property was originally designed to detect the data type of the object. But then people did a lot more with this property

Look at the following examples:

function a(){}; var obj=new a(); Constructor. B = 'I am a new attribute of A'; console.log(a.b); // I'm a new property of a console.log(a.constructor===Function); //true console.log(a.prototype.constructor===a); //true console.log(obj.constructor===a); //trueCopy the code

Function a is created by Function constructor and obj by new a()

Thinking: Amy polumbo rototype. Proto. Constructor to who?

Think of problem solutions

Function object thinking problem solution

Consider: Are js reference data types function objects?

Reference type values: refers to objects that are stored in heap memory, meaning that what is actually held in a variable is just a pointer to another location in memory that holds the object

So arrays, ordinary objects, function objects are all reference data types, and reference data type ranges contain the range of function objects

General object thinking problem solution

Consider :js has five basic types :Undefined, Null, Boolean, Number and String. Are they all ordinary objects?

Basic type values: refer to simple data segments stored in stack memory; Objects other than function objects are ordinary objects, so the range of ordinary objects contains the basic data types

In fact (function objects, ordinary objects) and (primitive data types, reference data types) are different definitions of JS variables

Prototype object thinking problem solving

Does prototype belong to a function object?

In fact, this question has to be answered separately:

Function.prototype belongs to Function objects, and the prototypes of other objects belong to normal objects

function a(){};
console.log(typeof Function.prototype); // function
console.log(typeof a.prototype); //object
Copy the code

I talked about prototype’s creation process

    var temp = new a();
    a.prototype = temp;
Copy the code

Here, of course, temp is a normal object, but look at the prototype creation of Function

var a = new Function();
Function.prototype = a;
Copy the code

Function prototype = Function object Recall the definition of a function object!

Pointer __proto__ thinking problem solution

Var obj={}; Obj.prototype. __proto__ to whom?

1, obj is just a normal object. 2, what type of object has the Prototype property? Prototype === =undefined 5; obj. Prototype ===undefined 5; All objects obj have a proto attribute (except null and undefined)! So the answer is js error (there is a feeling that I cheated)

The constructor solves the problem

Thinking: Amy polumbo rototype. Proto. Constructor to who?

function a(){};
Copy the code

Here we continue to break down the topic: 1, a.protoType refers to an instance of A, as we’ve emphasized many times, and belongs to ordinary object 2, __proto__ refers to the prototype property of the function that created the obj object, so see who created a.protoType. Since a.protoType is an ordinary object of type object, object created it. So obvious Amy polumbo rototype. __proto__ pointing to the Object. The prototype 4, then the topic is simplified to the Object. The prototype. The constructor who points to 5, Constructor () {Object. Prototype (); constructor () {constructor ()

Object.prototype.constructor===Object //true
Copy the code

I don’t know if you’re dizzy, but I’m a little dizzy. It’s a chicken-and-egg problem

Rest assured, there is an end:

Object.prototype.__proto__===null //true
Copy the code

This example tells us that it is null that creates everything. “” This is not the I Ching: Tao begets one, life begets two, two begets three, three begets everything!