preface

This is my participation in the beginner’s entry of the third article, strongly recommend [Hu Yu] God of JavaScript in-depth series of articles, I will write today prototype chain, is also a reference to one of the first.

First of all, once you understand what a prototype is, you will know the prototype chain. Second, the prototype chain revolves around three things: a constructor, an instance object, and a prototype object. I plan to explain it in the following three parts:

  1. A quick look at how to find constructors, instance objects, and prototype objects.
  2. Understand the relationship between constructors, instance objects, and prototype objects.
  3. Reference the relationship between the instance and the stereotype to find the stereotype chain.

Find the constructor, instance object, and prototype object

// constructor Person
function Person(){}//prototype is a function property
Person.prototype.name = 'David';

var person1 = new Person();
var person2 = new Person();

console.log(person1.name) / / David
console.log(person2.name) / / David
Copy the code

In this example, Person is a constructor, and person1 and person2 are instance objects created based on the Person constructor using the new keyword.

Constructors generally have three characteristics:

  • The first letter is usually capitalized
  • Use this to construct its properties and methods
  • A function called with the new keyword

Constructor features are posted here to distinguish it from ordinary functions, which is exactly what a constructor is.

Where is the prototype object?

Every JavaScript object (except null) is associated with another object when it is created, and this object is called a prototype, from which each object “inherits” properties.

As mentioned above, each JavaScript object is automatically associated with a prototype object when it is created!

So person1,person2 was created with a prototype object, but we don’t know what the prototype object looks like. The next step is to use the relationship between the three to deduce what the prototype object looks like.

The relationship between constructor, instance object, and prototype object

For convenience, the following relationships between constructors, instances, and stereotypes are assumed to be related, so that they don’t have to be too convoluted.

Here are the three processes that the relationship points to:

  1. The constructor points to the prototype object
  2. The instance object points to the prototype object
  3. The prototype object points to the constructor

1. Constructor –> Prototype object

Each function has a Prototype property, which points to an object that is the prototype of the instance created by calling the constructor.

Here’s an example:

// constructor Person
function Person(){}// Instance object person
var person = new Person();
console.log(person.prototype === prototype object)Copy the code

The prototype property of the constructor Person refers to a prototype object. The prototype object here is the one that is automatically associated when the instance object Person is created!

Note: Only functions have the Prototype attribute! Constructors are also functions.

The diagram is as follows:

There is a point here that the prototype object is actually a concept word, and there is no concrete value that can write it, so since person. prototype equals the prototype object, we can express Person.prototype as the prototype object.

2. Instance Object –> Prototype object

Every JavaScript object (except null) has a property called __proto__, which points to the object’s prototype.

// constructor Person
function Person(){}// Instance object person
var person = new Person();
console.log(person.__proto__ === Person.prototype); // true
Copy the code

The instance object person has a __proto__ attribute that also points to its prototype object (Person.prototype).

Update diagram:

3. Prototype object –> constructor

In the first two relationships, both the instance object and the constructor can point to the stereotype. Does the stereotype have properties that point to the constructor or the instance?

  • The prototype points to the constructor.
  • Stereotypes point to instances — none, because a constructor can generate multiple instances.

Each stereotype has a constructor property pointing to the associated constructor.

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

Update diagram:

3. Find the prototype chain by referring to the relationship between instance and prototype

So far, the pointing relationships between constructors, instances, and prototype objects are clear, but to find the prototype chain, we need to talk about the relationship between instances and prototypes.

When an instance property is read, if it cannot be found, it looks for the property in the stereotype associated with the object. If not, it looks for the stereotype until it reaches the topmost level.

// constructor Person
function Person() {

}

Person.prototype.name = 'jen';

// Instance object person
var person = new Person();

person.name = 'David';
console.log(person.name) / / David
   
delete person.name;
console.log(person.name) / / jen

Copy the code

In the example above, the name of the instance object person is set to becks, so the first console prints becks, and then we delete the Person. name. When we read again, the instance object Person has no name. Look in the Person. Prototype of the instance object and find the flower. If the prototype Object doesn’t have one, go to the prototype Object and find object.prototype.

Why object.prototype? Because the object was originally built by:

// The top-level Object constructor
function Object(){... }// The Object is originally an instance Object created from the Object constructor.
var obj = new Object(a);// So the original prototype Object was object.prototype
Copy the code

The original prototype Object is an instance Object generated by the Object constructor. As mentioned earlier, the __proto__ of the instance refers to the prototype constructor, so let’s update the diagram:

How about the Object. Prototype?

This is null and can be printed:

console.log(Object.prototype.__proto__ === null) // true
Copy the code

To quote teacher Ruan Yifeng’s the Difference between undefined and Null:

Null means “no object”, meaning there should be no value.

Object. Prototype. proto = null; Object. Prototype has no prototype.

If Object. Prototype is found, stop the search.

In fact, the prototype chain is already out, and the chain structure of interconnected prototypes is the prototype chain, the blue line in the image above.

Well, it’s not wrong to say that a prototype chain is just a chain.

Here’s an example:

var a = {a:1};
// Prototype chain: a --> Object. Prototype --> null

var a = ['xxx'.'xxx'];
Prototype: a --> array. prototype --> object. prototype --> null

function a(){}// prototype chain: a --> Function. Prototype --> Object
Copy the code

Didn’t.

conclusion

Although very hard to speak clearly, but because I have understood, some details of the place I don’t feel need to write, but don’t write and feel not serious enough, so recommended to see [Hu Yu] Daishen original JavaScript in-depth from the prototype to prototype chain, more than a few bites, you understand.

Last one! ~ Finally can touch the fish.