This is the 7th day of my participation in the August Text Challenge.More challenges in August

Object creation mode

Object constructor pattern

  • Routine: Create an empty Object and then dynamically add properties/methods
  • Application scenario: The internal data of the object is not determined at the start
  • Problem: Too many statements
var obj = {};
obj.name = 'Tom'
obj.setName = function(name){this.name=name}
Copy the code

Object literal schema

  • Routine: Create an object with {} and specify properties/methods
  • Application scenario: The internal data of the object is determined at the beginning
  • Problem: Duplicate code if you create multiple objects
var obj = {
    name : 'Tom'.setName : function(name){this.name = name}
}
Copy the code

The factory pattern

  • Routine: Create an object dynamically and return it via a factory function
  • Application scenario: Multiple objects need to be created
  • Problem: Objects don’t have a specific type, they are all Object types
function createPerson(name, age) { // Return an object function ===> factory function
  var obj = {
    name: name,
    age: age,
    setName: function (name) {
      this.name = name
    }
  }

  return obj
}

// Create 2 people
var p1 = createPerson('Tom'.12)
var p2 = createPerson('Bob'.13)

// P1 /p2 are Object types

Copy the code

Custom constructor schema

  • Routine: Custom constructors that create objects through new
  • Application scenario: Multiple objects of specified types need to be created
  • Problem: Every object has the same data, wasting memory
function Person(name, age) {
    this.name = name;
    this.age = age;
    this.setName = function(name){this.name=name; }; }new Person('tom'.12);
Copy the code

Constructor + prototype combined pattern

  • Routine: Custom constructors, properties initialized in functions, methods added to prototypes
  • Application scenario: Multiple objects of specified types need to be created
function Person(name, age) { // Only general functions are initialized in constructors
  this.name = name
  this.age = age
}
Person.prototype.setName = function (name) {
  this.name = name
}

var p1 = new Person('Tom'.23)
Copy the code

Inheritance mode

Prototype chain inheritance: get method

  1. routine
  • Define the parent type constructor
  • Add a method to the stereotype of the parent type
  • Defines a constructor for a subtype
  • Creates an object of the parent type to assign to a prototype of the child type
  • Sets the construction property of the subtype stereotype to a subtype
  • Add methods to subtype stereotypes
  • Create an object of a subtype: methods of the parent type can be called
  1. The key
  • The prototype of a child type is an instance object of the parent type
/ / parent types
function Supper() {
  this.supProp = 'Supper property'
}
Supper.prototype.showSupperProp = function () {
  console.log(this.supProp)
}

/ / subtypes
function Sub() {
  this.subProp = 'Sub property'
}

// The prototype of a subtype is an instance object of the parent type
Sub.prototype = new Supper()
// Make the constructor of the subtype's prototype point to the subtype
Sub.prototype.constructor = Sub
Sub.prototype.showSubProp = function () {
  console.log(this.subProp)
}

var sub = new Sub()
sub.showSupperProp()
// sub.toString()
sub.showSubProp()

console.log(sub)  // Sub
Copy the code

Borrow constructor inheritance: Get properties (false)

  1. Format:
  • Define the parent type constructor
  • Define a subtype constructor
  • The parent type construct is called in the subtype constructor
  1. Key:
  • The generic call() in the subtype constructor calls the parent type constructor
function Parent(xxx){this.xxx = xxx}
Parent.prototype.test = function(){};
function Child(xxx,yyy){
  Parent.call(this, xxx);// Borrow constructor this.parent (XXX)
}
var child = new Child('a'.'b');  //child. XXX is 'a', but child does not test()
Copy the code

Combinatorial inheritance of prototype chain + borrowing constructor

  1. The method inheritance of objects of parent type is realized by using prototype chain
  2. Use super() to borrow the parent type builder to initialize the same property
function Parent(xxx){this.xxx = xxx}
Parent.prototype.test = function(){};
function Child(xxx,yyy){
  Parent.call(this, xxx);// Borrow constructor this.parent (XXX)
}
Child.prototype = new Parent(); / / get the test ()
var child = new Child(); //child. XXX = 'a', also test()
Copy the code

What does new do behind an object?

  • Create an empty object
  • Set __proto__ to the prototype property of the constructor objectthis.__proto__ = Fn.prototype
  • Execute the constructor body (add attributes/methods to the object)

Threads and processes

Process:

  • An execution of a program that occupies a unique piece of memory
  • You can view the process in Windows Task Manager

Thread:

  • Is an independent unit of execution within a process
  • Is a complete flow of program execution
  • Is the smallest scheduling unit of the CPU

Relationship between

  • A process has at least one thread (main)
  • A program is executed on a thread within a process

Browser kernel module composition

The main thread

  • Js engine module: responsible for the compilation and running of JS programs
  • HTML, CSS document parsing module: responsible for page text parsing
  • DOM/CSS module: responsible for DOM/CSS related processing in memory
  • Layout and rendering module: responsible for the layout and rendering of pages (objects in memory)

Points thread

  • Timer module: Manages timers
  • DOM event module: responsible for event management
  • Web request module: Responsible for Ajax requests

Js thread

  • Js is executed single-threaded (the callback function is also on the main thread)
  • H5 proposes a scheme to realize multi-threading: Web Workers
  • Only main thread update interface

Timer problems:

  • Timers are not really fully timed
  • If a long operation is performed on the main thread, processing may be delayed

Event handling mechanism

  • Code classification
    • Initialization execution code: contains code for binding DOM event listeners, setting timers, and sending Ajax requests
    • Callback execution code: Handles the callback logic
  • The basic flow of code executed by the JS engine:
    • Initialization code ===> callback code
  • There are two important components of the model:
    • Event Management module
    • The callback queue
  • The flow of the model
    • Execute the initialization code, handing the event callback function to the corresponding module to manage
    • When an event occurs, the management module adds the callback function and its data to the callback queue
    • The callback function execution in the read-fetch callback queue is traversed only after the initialization code has finished executing (which may take some time)

H5 Web Workers

  • You can have JS execute in split threads
  • Worker 
    var worker = new Worker('worker.js');
worker.onMessage = function(event){event.data} : callback worker.postMessage(data1) : sends data to another threadCopy the code
  • Question:
    • Code in worker cannot manipulate DOM to update UI
    • Not every browser supports this new feature
    • JS cannot be loaded across domains

The last

This article serves as my study summary, at the same time shares to everybody because the personal technology is limited, if has found the mistake or has the question place, welcome to point out or gives advice! Thank you very much!