The introduction

Start from creating a function, understand the function and function prototype, and the prototype chain relationship formed between the three object instances.

Create a function

function CreateCar(){}
console.log(CreateCar);
//function CreateCar(){}
Copy the code

Above we create a function, print the name of the function, the result is the function itself, as if there are no other attributes. In fact, whenever a function is created, it adds an invisible prototype attribute by default.

function CreateCar(){}
console.log(CreateCar.prototype);
//{constructor: function CreateCar(){}}
Copy the code

CreateCar. Prototype is printed. The result is an object that is the function’s prototype object.

Second, prototype object

The prototype object starts with a constructor property, whose value points to the function itself.

function CreateCar(){};
console.log(CreateCar.prototype.constructor === CreateCar);
//true
Copy the code

Use a function as a constructor instead of a prototype object:

function CreateCar(){};
let car = new CreateCar();
console.log(car);
/ / {}
console.log(car.varieties)
//undefined
Copy the code

Call (); call (); call (); call (); call ();

function CreateCar(){};
CreateCar.prototype.varieties = 'car';

let car1 = new CreateCar();
console.log(car1);
/ / {}
console.log(car1.varieties);
/ / the car

let car2 = new CreateCar();
console.log(car2);
/ / {}
console.log(car2.varieties);
/ / the car
Copy the code

The created objects car1 and Car2 are empty objects, but the printing of their varieties has value and is “dolly”. It is obvious that the properties of the prototype function object prototype are common to all the objects created when the function is used as a constructor. So why is it that car1 and Car2 are both empty objects, yet both can print values? This is where the prototype chain comes in.

Prototype chain

First, we know that a constructor creates an object whose properties are defined by statements inside the function. These properties can be seen and printed directly, as shown in the following example.

function CreateCar(color){
  this.color = color;
};

let car1 = new CreateCar('white');
console.log(car1);
//{color: "white "}

let car2 = new CreateCar('black');
console.log(car2);
//{color: "black "}
Copy the code

However, we already know that properties on the prototype object of a function, although not seen on the object, are common to all objects created by the function, as shown in the following example.

function CreateCar(color){
  this.color = color;
};
CreateCar.prototype.varieties = 'car';
console.log(CreateCar.prototype);
//{varieties: "car ", constructor: function CreateCar(color){this. Color = color; }}

let car1 = new CreateCar('white');
console.log(car1);
//{color: "white "}
console.log(car1.varieties);
/ / the car

let car2 = new CreateCar('black');
console.log(car2);
//{color: "black "}
console.log(car2.varieties);
/ / the car
console.log(car2.numberOfwheels);
//undefined
Copy the code

The varieties are not displayed in an object, but both Car1 and Car2 can be printed, because when printing the Varieties, Car1 and Car2 will look for their own varieties first. Can’t find will go their own constructor CreateCar (establish relationship through __proto__) found on the prototype, find the print out. Car2: CreateCar; numberOfwheels: CreateCar; numberOfwheels: CreateCar; numberOfwheels: CreateCar; Returns undefined, as illustrated below.

What if the properties of the object itself have the same name as the properties in the prototype object

function CreateCar(){
  this.varieties = 'cart'
};
CreateCar.prototype.varieties = 'car';
let car = new CreateCar();
console.log(car);
//{varieties: "wagon "}
Copy the code

As you can see, the nearest attribute value is printed first.

conclusion

  1. Each function has a prototype object, prototype.
  2. Properties on the function prototype object are shared by all objects created by the function.
  3. Call a value of the object and look for the sequence: the object itself → the prototype of the object constructor → the prototype of the native constructor → null.
  4. When the property name of the object itself and the property name of the constructor prototype object are the same, the nearest property value is printed first.