Speaking of the prototype and prototype chain may be a very headache for every JS beginner, because the relationship between them is too around, online related articles are countless. This article will take another look at what a prototype and prototype chain are.

Let’s take a look at what instances and constructors are.

The constructor creates the object

We start by creating an object using the constructor:

// The constructor is written in big camel case (uppercase)function Person() {}; var person = new Person(); person.name ='charming';

    console.log(person.name);

Copy the code

In this case, the Person is the constructor, and the Person declared is the object instance.

Let’s get to the topic:

prototype

Each function has the Prototype attribute, which we’ll see in various examples, such as:


function Person() {}; // Note that only functions have the prototype attribute person.prototype. name ='charming';

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

console.log(person1.name); // 'charming'

console.log(person2.name); // 'charming'

Copy the code

Who does the function’s Prototype attribute point to? Is it the prototype of this function?

In fact, the function’s prototype points to an object that is the prototype of the instance created by calling the constructor, namely person1 and person2 in this example.

What is the prototype? Let’s think of it this way: every JavaScript object (except null) is created with another object associated with it, which is what we call a prototype, from which every object “inherits” properties. ** Let’s use a diagram to show the relationship between constructors and instance prototypes:

proto

Every JavaScript object (except null) has a property called _proto_ that points to the object’s prototype. To prove this we can test it in Firefox or Google

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

Now let’s update the relationship again:

constructor

Pointing to an instance is not, since a constructor can generate multiple instances, but a prototype-pointing constructor is, which brings us to our third property: constructor. Each object has a constructor property that points to the associated constructor. To test this, try:

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

So let’s update the diagram again:

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

Now that we know the relationship between constructors, instance stereotypes, and stereotypes, let’s talk about the relationship between instance and stereotype:

Examples and prototypes

When an instance property is read, if it cannot be found, it looks up the property of the stereotype associated with the instance until it reaches the topmost level. Here’s an example:

function Person() {}; Person.prototype.name ='charming'
var person = new Person();
person.name = 'Lyh';
console.log(person.name) // 'Lyh'
delete person.name
console.log(person.naem) // 'charming'
Copy the code

In this example we added a name property to the person. When we printed preson.name the property was of course ‘Lyh’, but when I removed the nama property of the person itself and accessed the name property, But when we delete the person name attribute and read the Person. name, we can’t find the name attribute in the Person object and we get the name attribute from the person’s prototype, person.__proto__, In Person. Prototype, luckily we found the name property, which is ‘charming’. What if we still don’t find it? What is the archetype of the archetype?

Prototype of prototype

Earlier we also said that a prototype is also an object, and since it is an object, we create it in the most primitive way possible. Such as:

var obj = new Object();
obj.name = 'charming';
console.log(obj.name) // charming
Copy the code

The __proto__ of the instance refers to the prototype constructor, so let’s update the diagram:

Prototype chain

How about the Object. Prototype? It is null, we can print it:

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

So what does null mean? Quoting ruan Yifeng’s “The Difference between undefined and NULL”, null means “there is no object”, that is, there should be no value there. Object.prototype.__proto__ = null; Object. Prototype has no prototype. Object. Prototype = Object. Prototype = Object. Finally, let’s update the diagram:

The state structure of the chain of interrelated stereotypes is the prototype chain, which is the blue line

add

constructor

First, the constructor attribute. Let’s look at an example:

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

When access to the person. The constructor when, in fact, the person is not in the constructor property, when cannot be read to the constructor property, can from the prototype of the person also is a person. Read in the prototype, just the prototype with this property, So:

person.constructor === Person.prototype.constructor
Copy the code

__proto__ is followed by __proto__. Most browsers support this nonstandard method of accessing prototypes, but it doesn’t exist in Person.prototype. In fact, it comes from Object.prototype and is not so much an attribute, More like a getter/setter, when used with obj.__proto__, it can be interpreted as returning Object.getProtoTypeof (obj).

This article is I in another article harvest feel very easy to understand. I shared it with you. Don’t spray if you don’t like it!

Original address: github.com/mqyqingfeng…