JavaScript - Function construction and prototypes

Constructors and stereotypes

An overview of the

In typical OOP languages (such as Java), there is the concept of a class, a class is the template of an object, an object is an instance of a class, but before ES6, JS did not introduce the concept of a class. ES6, full name OF ECMAScript 6.0, was released in June 2015. However, the current browser version of JavaScript is ES5, and most older browsers also support ES6, but only implement some of the features and functions of ES6. Prior to ES6, objects were not created based on classes, but were defined with special functions called constructor functions and their characteristics. You can use any of the following methods to create an object

Object literals

var obj = {}

new Object()
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.

When executed, new does four things:

Creates a new empty object in memory.
Let this point to the new object.
Execute the code inside the constructor to add properties and methods to the new object.
Returns the new object (so no return is needed inside the constructor).

The properties and methods in constructors are called members. 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 member:

Members added to the constructor itself are called static members and can only be accessed by the constructor itself.

Case members:

Object members created inside constructors are called instance members and can only be accessed by the instantiated object (members added by this such as this.age = age;).

Instance members can only be accessed through the instantiated object

function Star(uname, age) {
  this.uname = uname;  // Uname and age are instance members
  this.age = age;
  this.sing =function(){
    console.log(123); }}var ldh = new Star("Andy Lau".18);
var zxy = new Star('Jacky Cheung'.18);
console.log(ldh.age); // Access via instantiated objects
console.log(Star.uname);//undefined. Instance members cannot be accessed through constructors

Star.sex='male';// This is a static member, created by the constructor itself
console.log(ldh.sex);
Copy the code

Constructor prototype object prototype

Constructors waste memory; Properties are simple data types, while methods (functions) are complex data types; When a constructor has a method (function) inside it, each instantiation of an object opens up a memory space to hold the complex data type.

console.log(ldh.sing==zxy.sing);//false
Copy the code

Constructor prototype

Constructors The functions assigned by the stereotype are shared by all objects. JavaScript states that each constructor has a Prototype property that points to another object. Note that prototype is an object whose properties and methods are owned by the constructor.

We can define those immutable methods directly on a Prototype object so that all object instances can share them.

function Star(uname, age) {
  this.uname = uname;  // Uname and age are instance members
  this.age = age;
  this.sing =function(){
    console.log(123);
  }
}
Star.prototype.sing=function(){
   console.log(123);
}
var ldh = new Star('Andy Lau'.50);
var zxy = new Star('Jacky Cheung'.60);
console.log(ldh.sing == zxy.sing);//true
Copy the code

The sing method is added through the prototype object so that each instantiation of an object does not open up a new memory space to hold the method, but instead the object points directly to the Sing method in the prototype object

A prototype is an object, also known as a prototype object
The purpose of stereotypes is to share methods
We usually put public properties in constructors and public methods in constructor prototype objects.

Object prototype proto

Each 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__ attribute. __proto__ is the object prototype.

Prototype is equivalent to __proto__.
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

Constructor constructor

The object prototype __proto__ and constructor prototype object prototype have a constructor property, which we call a constructor because it refers back to the constructor itself.

Constructor is used primarily to record which constructor the object refers to, and it can redirect the prototype object to the original constructor.

function Star(uname, age) {
  this.uname = uname;  // Uname and age are instance members
  this.age = age;
  this.sing =function(){
    console.log(123); }}// We can use assignment directly when we need to write multiple methods
Star.prototype={
  sing:function(){
   console.log(123);
  },
  movie:function(){
   console.log(123); }},// But since this is an assignment, Prototype becomes a static member of the constructor. The constructor property that was in Prototype is overridden and therefore cannot refer back to the constructor, so we can set it manually

Star.prototype = {
      constructor: Star,  // Prototype refers back to the Star constructor
      sing: function () {
        console.log(111); }};Copy the code

The relationship between constructors, instances, and prototype objects

The __proto__ of the instance object refers to the prototype object of its constructor, so: the instance object.__proto__== constructor. Prototype.
Each constructor refers to its prototype object, which in turn refers back to its constructor, thus the instance object.__proto__ can refer back to its constructor, essentially referring back to its constructor from the prototype object.

The constructor’s prototype Object also has __proto__, pointing to Object.prototype.
Prototype The __proto__ in the prototype Object points to null

Javascript lookup mechanism

(1) When accessing the attributes of an object (including methods), the first thing to look for is whether the object itself has the attributes.

If not, look for its prototype (that is, the prototype object to which _proto_ refers).

③ If not, find the prototype of the prototype Object.

(4) Find Object (null) and return undefined.

The point of the _proto_ object prototype is to provide a direction, or a route, for the object member lookup mechanism.

This points to the prototype object

Inside the constructor, this refers to the instance object
This in the prototype object function refers to whoever calls this function, and therefore to the instance object

Extended built-in objects

You can use prototype objects to extend custom methods on the original built-in objects.

Add a summation method to the array:

Array.prototype.sum = function () {
  var sum = 0;
  for (var i = 0; i < this.length; i++) {
    sum += this[i];
  }
  return sum;
};
var arr = [1.2.3];
console.log(arr.sum());/ / 6
Copy the code

Array.prototype ={}, only aray.prototype. xx = function(){}.

Array.prototype = {
  sum:function () {
    var sum = 0;
    for (var i = 0; i < this.length; i++) {
      sum += this[i];
    }
    returnsum; }};var arr = [1.2.3];
console.log(arr.sum());/ / an error
Copy the code

Prototype inheritance

Es6 didn’t have extends inheritance before, but it could be implemented through constructor + prototype object emulation, known as composite inheritance

call()

Call this function and modify the this reference of the function that calls the call function.

Call (this, parameter 1, parameter 2);

function fn(x, y) {
  console.log("hhhh");
  console.log(this);
}

var obj = {
  name: "andy"}; fn.call(obj,1.2);// Change fn's this pointer
Copy the code

So this points to obj, x is 1, y is 2.

We can implement inheritance with call()

function Father(uname, age) {
  this.uname = uname;
  this.age = age;
  console.log(this);
}
Father.prototype.money=function(){
  console.log(100000);
}

function Son(uname, age, sex) {
  Father.call(this, uname, age);
  this.sex = sex;
}
var son = new Son("Tom".18."Male");
console.log(son);
// This of the Father constructor points to an instance of Son
Copy the code

But we can’t inherit the prototype properties of Father() because Son doesn’t have any reference to the parent constructor. If we use “son.prototype = father.prototype” to make it equal then the address of the parent constructor’s prototype object is given to the child constructor, which will cause the parent constructor to be modified as well as the child constructor.

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

JavaScript – Function construction and prototypes

Constructors and stereotypes

An overview of the

The constructor

Static member:

Case members:

Constructor prototype object prototype

Object prototype proto

Constructor constructor

The relationship between constructors, instances, and prototype objects

Javascript lookup mechanism

This points to the prototype object

Extended built-in objects

Prototype inheritance

call()

JavaScript – Function construction and prototypes

Constructors and stereotypes

An overview of the

The constructor

Static member:

Case members:

Constructor prototype object prototype

Object prototype __proto__

Constructor constructor

The relationship between constructors, instances, and prototype objects

Javascript lookup mechanism

This points to the prototype object

Extended built-in objects

Prototype inheritance

call()

Related Posts

Hik Front End Weekly | Issue 25

What is the React Fiber tree?

Mock data detail and use

Object prototype proto