1 overview

ES6, full name OF ECMAScript 6.0, was released in June 2015. Prior to ES6, objects were not created based on classes, but were defined with special functions called constructors and their characteristics.

2. Constructors

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.

Function Person(uname, age) {this.uname = uname; this.age = age; This.sing = function() {console.log(' I can sing '); }} var LDH = new Person(' id ', 18); Var zxy = new Person(' y ', 19); console.log(ldh); ldh.sing(); zxy.sing();Copy the code

There are two things to note when using constructors in JS:

  1. Constructors are used to create objects of a class that begin with a capital letter
  2. Constructors have to be used with new to make sense

(1) Constructor execution process

** New does four things when executed: ** ① Creates a new empty object in memory. ② Make this refer to the new object. ③ Execute the code inside the constructor to add properties and methods to the new object. (4) Return the new object (so no return is needed inside the constructor).

(2) Members of the constructor

You can add members to JavaScript constructors, either on the constructor itself or on this inside the constructor. Members added in these two ways are called static and instance members, respectively.

  • Static members: Members added to the constructor book are called static members and can only be accessed by the constructor itself
// A static member can only access Person. Sex = 'male' through the constructor; console.log(Person.sex);Copy the code
  • Instance members: Object members created inside a constructor are called instance members and can only be accessed by the instantiated object
function Person(uname) { this.uname = uname; } The instance member is the member added by this inside the constructor. Uname is the instance memberCopy the code

Constructor prototype

Constructors The functions assigned by the stereotype are shared by all objects. JavaScript states that each constructor has a prototype attribute ** that points to another object. Note that prototype is an object, and all properties and methods of that object are owned by the constructor. We can define these immutable methods directly on prototype objects so that all object instances can share them.

function Person(uname, age) { this.uname = uname; this.age = age; // this.sing = function() {// console.log(' I can sing '); Person.prototype.sing = function() {console.log(' I can sing '); } var LDH = new Person(' id ', 18); Var zxy = new Person(' y ', 19); console.log(ldh.sing === zxy.sing); //true ldh.sing(); zxy.sing();Copy the code
  1. What is the prototype?

An object is also called a prototype object. 2. What are prototypes for? Shared methods.

4 Object Prototype__proto__

All objects have a __proto__ attribute that points to the prototype object constructor. We can use the constructor’s properties and methods because the object has a __proto__ prototype.

function Person(uname, age) { this.uname = uname; this.age = age; } Person. Prototype. Sing = function() {console.log(' I can sing '); } var mingo = new Person(' mingo ', 18); Var zxy = new Person(' y ', 19); mingo.sing(); console.log(mingo); Prototype console.log(mingo.__proto__ === person.prototype); //trueCopy the code

  • The __proto__ object prototype is equivalent to the prototype object prototype

    (As the arrow points out, mingo is an object instance created by the Person constructor, and the prototype of that object instance (__proto__) is the prototype object for the Person constructorprototype).

  • The __proto__ object prototype is meant to provide a direction, or a route, for object look-up mechanisms, but it is a nonstandard property and therefore cannot be used in actual development. It only points internally to the prototype object

5constructor constructor

The object prototype __proto__And constructorsprototypeThe constructor object has a constructor property, which we call a constructor because it refers back to the constructor itself.Constructor chiefly used ofRecords which constructor the object refers to.It allows the prototype object to point back to its original constructor.

In general, the methods of the object are set in the prototype object of the constructor. If we have methods for more than one object, we can assign to the prototype object as an object, but this overwrites the original contents of the constructor prototype object so that the modified constructor object no longer points to the current constructor.

At this point, we can add a constructor pointing to the original constructor in the modified prototype object.

function Person(uname, age) { this.uname = uname; this.age = age; } // In many cases, we need to manually use the constructor attribute to refer back to the original person. prototype = {// Constructor: Person, sing: function() {console.log(' I can sing ');} console.log(' I can sing ') {constructor: Person, sing: function() {console.log(' I can sing '); }, movie: function() {console.log(' I can play a movie '); }} var mingo = new Person(' mingo ', 18); Var zxy = new Person(' y ', 19); console.log(Person.prototype); console.log(mingo.__proto__); console.log(Person.prototype.constructor); console.log(mingo.__proto__.constructor);Copy the code

6 prototype chain

Each constructor has a prototype object, which contains a pointer to the constructor, and each instance contains an internal pointer to the prototype object. So what if we made the prototype object equal to an instance of another type? Obviously, the stereotype object will contain a pointer to another stereotype, which in turn will contain a pointer to another constructor. If the other prototype is an instance of another type, the relationship still holds. In this way, a chain of examples and prototypes is formed. This is the basic concept of the so-called prototype chain. — From javascript Advanced Programming

function Person(uname, age) { this.uname = uname; this.age = age; } Person. Prototype. Sing = function() {console.log(' I can sing '); } var mingo = new Person(' mingo ', 18); // 1. Any object has a __proto__ prototype, pointing to the prototype object console.log(person.prototype); console.log(Person.prototype.__proto__ === Object.prototype); Prototype console.log(object.prototype.__proto__); The __proto__ prototype points to null console.log(Object);Copy the code

Object is the top-level Object in JavaScript, on which all other objects are based, including the functions you create

7JavaScript member lookup mechanism (based on prototype chain rules)

① When accessing properties (including methods) of an object, first check whether the object itself has the properties. ② If not, find its prototype (that is, the prototype object __proto__ points to). ③ If not, find the prototype of the prototype Object. ④ And so on until Object is found (null). ⑤ the meaning of __proto__ object prototype is to provide a direction, or a route, for the object member lookup mechanism.

8 The prototype object this points to

The “this” in the constructor 1 refers to our instance object. The “this” in the method refers to the caller of the method, which is the instance object

function Person(uname, age) { this.uname = uname; this.age = age; } var that; Person. Prototype. Sing = function() {console.log(' I can sing '); that = this; console.log(this); } var mingo = new Person(' mingo ', 18); // 1. In the constructor, this refers to mingo // 2. Mingo mingo.sing(); mingo mingo.sing(); console.log(that === mingo); //trueCopy the code