Prototypes and prototype chains have always been one of the most difficult aspects of JavaScript, and it’s one of the most important things that interviewers ask about.

First, let’s make it clear that prior to ES6, we did not create an instance through a class, but directly using a constructor.

Constructor

A function that instantiates an object by the name of a new function is called a constructor. Any function can exist as a constructor. Constructors usually start with a capital letter.

So, we use the constructor to create an object.

function Person(name , age , sex) {
    this.name = name;
    this.age = age;
    this.sex = sex;
}
var person = new Person("Tony" , 18 , "Male");
console.log(person.name);  // Tony
Copy the code

The above code creates a Person constructor. In the Person constructor, three attributes (name,age,sex) are added to each object, meaning that each execution of the constructor creates a new Person object.

A quick review of constructors, let’s get down to business.

Second, the prototype

prototype

In JS, every time a function is defined, it comes with a prototype property that points to the prototype of the instance created by the constructor, and that property is the value of an object data type.

Prototype: Every JS object (except null) is associated with another object when it is created. This object is called a prototype, and every object “inherits” properties from the prototype.

Here’s a Demo of the prototype:

function Person() { }
Person.prototype.name = 'Tony';  // Note :prototype is a function property
var person1 = new Person();
var person2 = new Person();
console.log(person1.name);  // Tony
console.log(person2.name);  // Tony
Copy the code

The relationship between constructors and instance stereotypes:Here,Person.prototypeRepresents the instance prototype. The prototype object is a common area that all instances of the same class can access, and we can set things that all objects have in common into the prototype object.

Prototype chain

Above, we explained instances and instance stereotypes, so how do we represent the relationship between the two? This brings us to the next two properties

__proto__

This is a property that every JS object (except null) has, called __proto__, which points to the object’s prototype.

person.__proto__ === Person.prototype   // true
Copy the code

__proto__ Most browsers support this nonstandard method access prototype, but it doesn’t exist in Person.prototype. In fact, it comes from Object.prototype and is more of a getter/setter than an attribute. When using obj.__proto__, it is understood to return object.getProtoTypeof (obj).

constructor

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

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

The constructor property is not available when the person. Constructor property is fetched from the person’s prototype. This property happens to be in the prototype, so:

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

Example prototype and constructor diagram: Prototype chain: In JS, all things are objects, objects and objects are also related to each other, not isolated existence. The inheritance relationship between objects is passed in JSprototypeObject points to the parent object until it points toObjectObject, thus forming a chain to which the prototype points, the technical term is the prototype chain.

Examples and prototypes

When we read an instance property or method, it looks in the object itself and uses it if it has one, looks in the prototype object if it doesn’t, and uses it if it finds one. If not, go to the prototype of the prototype, until find the top layer Object, Object Object prototype has no prototype (Object is the base class of all Object data types in JS (the top layer class does not have __proto__ attribute on Object. Prototype). If the Object prototype is not found, undefined is returned.

function Person() {}
Person.prototype.name = 'Tony';
var person = new Person();

// When we add the name attribute to the instance object person and print person.name, the result is the value Ken of name.
person.name = 'Ken';
console.log(person.name) // Ken

__proto__ and Person.prototype; // If the name attribute is not found in the person object, the name attribute will be found in the person prototype. Because we added it to him earlier, we found the name property as Tony.
delete person.name;
console.log(person.name) // Tony
Copy the code

We can use the object’s hasOwnProperty() to check whether the object itself contains the property, returning true if it does, false otherwise; When you use in to check for an attribute in an object, return true if the object does not have one but the stereotype does, and false if neither.

function Person() {
    this.name = 'Tony'
}

Person.prototype.age = 18;

var person = new Person();

console.log(person.hasOwnProperty('name')); // true
console.log(person.hasOwnProperty('age'));  // false

console.log('name' in person);  // true
console.log('age' in person);   // true
console.log('a' in person);     // false
Copy the code

Finally, the chain of interconnected prototypes is called the prototype chain, which is the blue line:

Read the summary carefully above, should have a deep understanding of THE JS prototype and prototype chain, in fact, this part still needs to be carefully considered, after all, is the principle of the bottom.