This document has been updated to Github.

Instance and constructor

When we create an instance using the constructor, we write:

// constructor
function Person () {}
/ / instance
var person = new Person();
var student = new Person();
Copy the code

Here, we call Person the constructor and Person and student instances of the constructor Person.

Each data type in JS has a basic constructor, such as:

  • objThe constructor offunction Object()
  • arrayThe constructor offunction Array()
  • booleanThe constructor offunction Boolean()
  • stringThe constructor offunction String()
  • numberThe constructor offunction Number()
  • regExpThe constructor offunction RegExp()
  • dateThe constructor offunction Date()

ToString (), function String() {[native code]}, which is its constructor.

Prototype prototype

Every function (including custom functions) is created with a prototype property that points to another object, which is called a prototype.

In other words, prototype is a function-specific property.

Prototype constructor to the constructor, namely: the Person. The prototype. The constructor = = = the Person.

As we produce a product, in the beginning we will design the goods, and then to be made, after the completion of the production we will test to make sure those goals are met, if not, we will carry on the redesign and making, until its standard, so the final form of the goods which we call the prototype, This prototype can then be mass-produced or even adapted to other versions.

That is, all instances will have all the methods of the prototype, with Person as an example.

// constructor
function Person () {}
// person. prototype Represents the prototype of Person
Person.prototype.say = function () { console.log('hello')}/ / instance
var person = new Person();
var student = new Person();

person.say(); / / output ` hello `
student.say(); / / output ` hello `
Copy the code

When we add a say method to a prototype, all instances of the prototype will have that method at the same time. We can understand that the prototype is the public library of the instance, and all instances of the same prototype can call the public library.

Var arr = []; var arr = []; var arr = []; var arr = []; Because this is defined in Array.prototype, it is the common library of ARR, and all its methods and properties can be called. We call this relationship a prototype chain

Prototype chain __proto__

There is no concept of classes in JavaScript; class inheritance and polymorphism are implemented through prototype chains.

The instance we’re talking about in the stereotype can call all the methods and properties in the stereotype which is an inherited implementation, and it can also be polymorphic, which means it can override the methods and properties on the stereotype.

// constructor
function Person () {}
// person. prototype Represents the prototype of Person
Person.prototype.say = function () { console.log('hello')}/ / instance
var person = new Person();
var student = new Person();

// Rewrite the methods on the prototype
person.say = function () { console.log('I'm the say method on instance Person') }

person.say(); // Print 'I am the say method on instance person'
student.say(); / / output ` hello `
Copy the code

This is not an override, but a rewrite, and we can see that person.prototype.say () still works.

So what’s the order in which it looks?

  • 1. Find the method or property on the instance and call it if it exists
  • 2, if not on the instance, then on the prototype of the instance to find, call directly
  • 3, if not on the prototype, then continue to look for the prototype of the prototype, there is a direct call
  • 4, loop step 3, untilnullSo far,

Prototype is a function-specific attribute, but Person and student are an object type and do not have this attribute.

JavaScript provides __proto__ to retrieve its prototype, i.e. person.__proto__ === Person.prototype.

Everything is an object

So now that we know what a prototype is, what a prototype chain is, and how to get a prototype, let’s think about what a prototype is.

// Person. Prototype is the prototype
// __proto__ is the prototype of the prototype, that is, we can always look up __proto__
console.log(Person.prototype.__proto__);

{constructor: ƒ Object(), __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ,... } * /
Copy the code

__proto__ === Object.prototype.

We say that everything is an Object. Do other types refer to Object.prototype?

// The prototype of the character type
var str = Mr. Tangerine in front.;
str.__proto__.__proto__ === Object.prototype;

// The prototype of the numeric type
var num = 100;
num.__proto__.__proto__ === Object.prototype;

// The prototype of the re type
var reg = / [1-9] * /;
reg.__proto__.__proto__ === Object.prototype;

// Date type prototype
var date = new Date(a); date.__proto__.__proto__ ===Object.prototype;

// Boolean type prototype
var boolean = true;
boolean.__proto__.__proto__ === Object.prototype;

// The prototype of the array type
var arr = [];
arr.__proto__.__proto__ === Object.prototype;

// Symbol type prototype
var symbol = Symbol(Mr. Tangerine in front.);
symbol.__proto__.__proto__ === Object.prototype;

// The prototype of the object type
var obj = {};
obj.__proto__ === Object.prototype;
Copy the code

The prototype of the Object type is special because the constructor of the instance Object is Object.

So who is Object. Prototype?

console.log(Object.prototype.__proto__); / / output is null
Copy the code

The prototype of all variables and methods is Object. When we call a method, if object. prototype is still not found, we will prompt that there is no method, otherwise we will call the nearest method.

conclusion

  • Each data type basically has its own constructor
  • Methods of obtaining prototypes:person.__proto__
  • The final prototype of all objects isObject.prototype
  • When a method is called, it looks up the prototype chain, and if the method is found on the prototype chain, the nearest method is called
  • If the method is not found at the end of the prototype chain, an exception is thrown

To conclude with a picture of a great god:

The above content is personal understanding summary, if there is any mistake, please correct, I will be the first time to modify, thank you.

For more documentation, see:

Online address [Front-end Tangerine]

GitHub Warehouse