I am a beginner for three months, this is my first blog, it is not very good, mainly some study notes.

One problem with constructors before ES6

Before ES6, objects were not created based on classes, but with special functions called constructors to define objects and their characteristics objects could be created in one of three ways:

  1. Object literals
  2. new Object()
  3. Custom constructors

The constructor

A constructor is a special function used to initialize an object, that is, to assign initial values to its member variables. It is always used with new. We can extract some common properties and methods from objects and encapsulate them in this function.

The constructor approach works fine, but it’s a waste of memory

function Person(uname, age) { this.uname = uname; this.age = age; This.sing = function() {console.log(' I can sing '); }} var p1 = new Person(' 1 ', 18); Var p2 = new Person('小 学 ', 19); console.log(p1.sing === p2.sing); // falseCopy the code

The above code results in false, indicating that the method is stored in the constructor, and the instance is created with a separate memory space for the method, but the same function.

Constructor prototype

JavaScript dictates that every constructor has a Prototype property. Note that prototype is an object whose properties and methods are owned by the constructor. This object has a constructor property that points to the constructor. We can define those immutable methods directly on a Prototype object so that all object instances can share them. So, in general, our public properties are defined in the constructor, and our public methods are put in the prototype object.

function Person(uname, age) { this.uname = uname; this.age = age; } Person. Prototype. Sing = function() {console.log(' I can sing '); } var p1 = new Person(' Person ', 18); Var p2 = new Person('小 学 ', 19); console.dir(Person); // Person has prototype console.log(p1.sing === p2.sing); // true indicates that methods in the prototype object are sharedCopy the code

Object prototype __proto__

Every object has a __proto__ attribute that points to the constructor’s Prototype object. We can use the constructor’s prototype attributes and methods because the object has a __proto__ prototype.

  • __proto__Object prototype is equivalent to prototype object prototype
  • __proto__The object prototype is meant to provide a direction, or a route, for object look-up mechanisms, but it is a non-standard attribute, so it cannot be used in actual development. It only points internally to the prototype object
function Person(uname, age) { this.uname = uname; this.age = age; } Person. Prototype. Sing = function() {console.log(' I can sing '); } var p1 = new Person(' Person ', 18); Var p2 = new Person('小 学 ', 19); // True indicates that the __proto__ attribute in the constructor refers to the console.log of prototype (ldh.__proto__ === star.prototype);Copy the code

Constructor constructor

Both __proto__ and prototype objects have a constructor property inside. Constructor we call it a constructor because it refers back to the constructor itself. The constructor property is used to record which constructor the object is referenced to, and it can redirect the prototype object to the original constructor.

Prototype chain

As for what a prototype chain is, in JavaScript, everything is an object. Let’s start with this code.

function Person(uname, age) { this.uname = uname; this.age = age; } Person. Prototype. Sing = function() {console.log(' I can sing '); } var p1 = new Person(' Person ', 18); console.log(Person.prototype); console.log(Person.prototype.__proto__ === Object.prototype); // true console.log(Person.prototype.__proto__); // nullCopy the code

As mentioned above, any object has a __proto__ attribute that points to the constructor’s prototype object. The p1 object in this code is an instance of Person. The P1 object will have a __proto__ attribute pointing to the prototype object of Person. The Prototype of Person is also an object and will have a __proto__ attribute. So where does this __proto__ point to? The output of this line in the code above is clear

console.log(Star.prototype.__proto__ === Object.prototype); // true

The __proto__ attribute in Person refers to the prototype Object in Object. The __proto__ attribute in Object refers to the prototype Object in Object. The __proto__ attribute in Object is also an Object. The output of this line of code in the above code is also clear.

console.log(Person.prototype.__proto__); // null

The output of this statement is NULL, indicating that the __proto__ attribute in the prototype Object refers to NULL.

In JavaScript everything is an object, and objects have relationships with each other, not in isolation. In JavaScript, the inheritance relationship between objects is that the prototype Object points to the parent Object until it points to the Object Object. In this way, a prototype pointing chain is formed. The technical term is called prototype chain.

The following figure shows the relationship between the Person instance, Person prototype, Object prototype and their constructors.

Method lookup rules: When we access an object property or method, it will first look in the object itself, if there is a direct use, if there is not to look in the prototype object, if found directly use. If not, go to the prototype Object to find the prototype of the prototype Object, Object Object has no prototype, if still not found in the Object prototype, return undefined.

That’s about it. It’s my first blog post. It’s a little messy.