JS prototype and prototype chain, for many beginners is a difficult to chew bones, because it involves a lot of professional nouns, so this article from the analysis of prototype and prototype chain involved in professional nouns, take you step by step to understand the prototype and prototype chain. It’s not really that hard.

Ordinary objects and function objects

In JavaScript, everything is an object! And objects are also different, divided into ordinary objects and function objects.

All objects created by new Function() are Function objects; others are normal objects.

Constructor and instance

In JavaScript, functions called with the new keyword are called constructors; The first letter is usually capitalized. The new constructor yields the instance.

function Person(name) {
  this.name = name;
  this.say = function () {
    console.log(this.name); }}let person = new Person('Joe');
person.say(); / / zhang SAN
console.log(person.constructor === Person); // true
Copy the code

Person is an instance of the constructor, which has a constructor property pointing to the constructor person.

Keep in mind that the instance’s constructor attribute points to the constructor.

The prototype

Each object comes with a __proto__ attribute, but only function objects have a Prototype attribute. Every Function object has a prototype property (except function. prototype, which is a Function object but has no prototype property) that points to the Function’s prototype object.

Here’s a change from the above example:

Person.prototype = {
  name: 'Joe'.say: function () {
    console.log(this.name); }},console.log(typeof Person.prototype); // object
Copy the code

In this case the prototype object is Person.Prototype, which is a normal object. It has a default constructor attribute, this property (a pointer) to the prototype of the function (Person), namely Person. The prototype. The constructor = = = the Person.

In the example above, Person is an instance of Person, whose constructor property points to person. And Person.prototype has a constructor property, which also points to Person; In the same way, Person.prototype is an instance of Person.

The prototype object peson. prototype is an instance of the constructor Person.

A prototype object is a normal object (except funciton. prototype, which is a Function object because funciton. prototype is generated by new Function(), but it has no Prototype property).

Stereotype objects are primarily used for inheritance.

__proto__

Each object has a built-in __proto__ attribute that points to the prototype object from which it was created. This is done in the new process. So person.__proto__ === Person.prototype.

Combined with the above constructor and prototype object description, we can conclude:

// The instance's constructor attribute points to the constructor
person.constructor === Person;
// The constructor's prototype object is also an instance, and its constructor properties point to the constructor
Person.prototype.constructor === Person;
// The built-in __proto attribute points to the constructor's prototype object
person.__proto__ === Person.prototype;
Copy the code

The constructor

In JavaScript we often create objects literally: let obj = {};

It is equivalent to: let obj = new Object();

Obj is an instance of the constructor Object. So the following equations are true:

obj.constructor === Object;
obj.__proto__ === Object.prototype;
Copy the code

Object is a constructor function, essentially a function Object, much like Person. Object is built into JS, and Person is defined by ourselves.

There are many such built-in constructors in JavaScript, such as Function, Date, Array, Error, Number, String, Boolean, RegExp, etc. They are Function objects.

Prototype chain

Objects connect stereotypes through __proto__ attributes, forming a stereotype chain.

Take the example of person (common object) :

// Person's __proto__ points to the prototype of its constructor
person.__proto__ === Person.prototype;
Prototype is a normal Object, so its __proto__ points to the Object prototype
Person.prototype.__proto__ === Object.prototype;
// Object. Prototype goes to the beginning of the prototype chain
Object.prototype.__proto__ === null;
Copy the code

Person = person; person = person; person = person;

// Person is a Function object whose constructor is Function
Person.__proto__ === Function.prototype;
// Function. Prototype Its constructor is Object
Function.prototype.__proto__ === Object.prototype;
// Object. Prototype
Object.prototype.__proto__ === null;
Copy the code

Constructors are also Function objects, so their __proto__ refers to function. prototype:

Therefore, when we create an object, we can use it without creating corresponding methods (such as toString, valueOf and other methods), because there is a prototype chain in the object. Its query mechanism is to first check whether you have this attribute, and then directly use it. Object. Prototype: __proto__ is null. This is why the Object returns null for attributes that do not exist.

conclusion

  • Objects are divided into ordinary objects and function objects, throughnew Function()Create is a function object
  • Instance constructor properties (constructor) points to the constructor
  • Function of theprototypeIs an ordinary object (Funciton.prototypeExcept)
  • The object’s__proto__The property points to the stereotype,__proto__The prototype chain is formed by connecting objects and stereotypes
  • ObjectIs the father of all objects. All objects can pass__proto__To find it
  • FunctionIs the father of all functions, all functions can pass__proto__To find it