“This article has participated in the call for good writing activities, click to view: the back end, the big front end double track submission, 20,000 yuan prize pool waiting for you to challenge!”

object

  • An object is an abstraction of a single object
  • An object is a container that encapsulates properties and methods
  • Objects can be reused and customized through inheritance mechanisms

Object-oriented (OOP)

What does object orientation do?

  • Abstract all kinds of complex relations in the real world into objects
  • By the division of labor and cooperation between objects, complete the abstraction of the real world

What problem does object orientation solve?

  • It is flexible, reusable, highly modular and easy to maintain and develop
  • It is better suited to large software projects with multiple people than traditional procedural programming consisting of a series of functions or instructions

The constructor

What is a class?

  • Typical object-oriented languages (eg. C++ and Java) have the concept of a class
  • Classes are templates for objects, and objects are instances of classes
  • Class can create any number of objects with the same properties and methods

How does JS implement “class “?

  • Through constructors and prototype chains

What is a constructor?

  • A function specifically used to generate instance objects
  • Is a template for an object that describes the basic structure of an instance object
  • A constructor that can generate multiple instances, all of which have the same structure

What are the characteristics of constructors?

var Vehicle = function (p) {
  this.price = p;
};

var v = new Vehicle(500);
Copy the code
  • The function body uses the this keyword inside, which represents the instance of the object to be generated.
  • When generating objects, you must use the new command.

What does the new command do?

  1. Creates an empty object as an instance of the object to be returned

Inside the constructor, this refers to a newly generated empty object on which all operations will take place.

  1. Point the empty object’s prototype to the constructor’s Prototype property
  2. Assign the empty object to the this keyword inside the function
  3. Start executing the code inside the constructor

If the constructor has a return statement inside it, and the return is followed by an object, the new command returns the object specified by the return statement. Otherwise, this object is returned regardless of the return statement.

Function _new(/* constructor */) /* Constructor argument */ params) {var args = [].slice.call(arguments); Var constructor = args.shift(); Var context = object.create (constructive.prototype); var context = object.create (constructor. Prototype); Var result = constructive. apply(context, args); Return (typeof result === 'object' && result! = null) ? result : context; } var actor = _new(Person, 'actor ', 28);Copy the code

What happens if you forget to use the new command and call the constructor directly?

  • This will point to the global

What does new.target do?

  • You can use the new.target attribute inside the function
  • If the current function is called with the new command, new.target points to the current function, otherwise undefined
  • Can be used to determine whether a function is called with the new command
function f() { if (! New.target) {throw new Error(' Please call with new command! '); } / /... } f() // Uncaught Error: Please call with new command!Copy the code

What are the disadvantages of constructors?

  • Multiple instances of the same constructor cannot share attributes, resulting in a waste of system resources
  • Solution ==> Prototype object

Prototype object & prototype chain

What is a prototype object?

  • Each function has a Prototype attribute that points to an object

For normal functions, this property is basically useless. However, in the case of constructors, this property automatically becomes the prototype of the instance object when the instance is generated

  • Properties of the stereotype object are not properties of the instance object itself. As soon as the prototype object is modified, the change is immediately reflected in all instance objects

The purpose of a stereotype object is to define properties and methods shared by all instance objects

What is a prototype chain

All objects have their own prototype. On the one hand, any object can serve as a prototype for other objects. On the other hand, since a prototype object is also an object, it also has its own prototype. Therefore, there is a ‘prototype chain’ : object to prototype, prototype to prototype…

  • When reading a property of an object, the JavaScript engine looks for the property of the object itself; if it can’t find it, it looks for its prototype; if it still can’t find it, it looks for the prototype. If no Object. Prototype is found up to the top level, undefined is returned
  • The end of the prototype chain is NULL

What exactly is the constructor attribute?

  • The Prototype object has a constructor property, which by default points to the constructor of the Prototype object and can be inherited by all instance objects
function P() {}
P.prototype.constructor === P // true
Copy the code
  • The constructor property lets you know which constructor generated an instance object
  • With the constructor attribute, you can create another instance from one instance object (called indirectly)
function Constr() {} var x = new Constr(); var y = new x.constructor(); Y instanceof Constr // true // The constructor calls itself possible Constr. Prototype. CreateCopy = function () {return new enclosing constructor (); };Copy the code

What does the instanceof operator do?

  • The instanceof operator returns a Boolean value indicating whether the object is an instanceof a constructor

How does a constructor implement inheritance?

  1. The first step is to call the parent class’s constructor in the subclass’s constructor
Function Sub(value) {function Sub(value) {function Sub(value) {function Sub(value) {super.call (this); this.prop = value; }Copy the code
  1. Is to make a subclass’s prototype point to the parent class’s prototype, so that the subclass can inherit the parent class’s prototype
Sub.prototype = Object.create(Super.prototype); Sub.prototype.constructor = Sub; Sub.prototype.method = '... ';Copy the code

To be continued

Understand object-oriented programming

Es6 Class Look again