This is the 28th day of my participation in the August Challenge

☆☆☆ Today’s learning content: (inheritance of several ways & closure & singleton pattern)! Check the gaps! Do do do

Can serve as a beginner’s learning route, can refer to, learning progress is not particularly driven! Ongoing update

Combined with their own understanding, simple and comprehensive summary of the basic knowledge points in the process of learning JavaScript in vernacular Chinese, easy to deepen understanding!

Let’s get started! ‘Only a firm foundation can build a tall building ‘! Come on! Take it seriously!

1, comb yesterday’s knowledge:

( Prototype and prototype chain | | factory pattern constructor )

Object creation methods: 1, literal creation 2, factory mode 3, constructor: 4, prototype 5, hybrid 6, prototype chain:

2, inheritance,

Three features of Object Orientation: Encapsulation inheritance polymorphism (JS does not have polymorphism)

Inheritance: A subclass inherits all the properties and functions of its parent class

3. Inheritance method 1: Change the execution environment of the parent class

function Father() {
  this.money = 999999999999
  this.sing = function () {
    console.log('singing')}}function Son() {
  // Define a property in a subclass that points to the parent class's constructor
  this.parent = Father // Execute the parent constructor in a subclass
  this.parent()
}
Copy the code

4. Inheritance via call or apply

The difference between call and apply:

  • callThe number of second arguments to is not fixed
  • applyThe second argument to is an array that can passargumentsTo take the place of

5. Prototype inheritance

Make the subclass’s prototype object point to the object from the parent class new (first look on the instance of the subclass, then look on the prototype)

Subclasses. The prototype =newThe parent class ()Copy the code

6. Hybrid inheritance

Inherit instance properties and methods through call or apply

Inherit the stereotype approach through stereotype inheritance

Constructor of ES6

class

classThe constructor{
  constructor(attribute) {
    this.properties = properties} method () {}}Copy the code

Such as:

class Student {
  constructor(name, age) {
    this.name = name
    this.age = age
  }
  study() {
    return ' '
  }

  eat() {
    console.log()
  }
}
Copy the code

8. ES6 inheritance

Son extends father inherits properties and methods from the parent class and can also define its own unique methods.

class Son extends Father {
  constructor(name, age, score) {
    super(name, age) // Inherit the attributes and methods of the parent class
    this.score = score // Subclass-specific attributes
  }
  // subclass-specific methods
  study() {
    return 'learn ing}}Copy the code

9, closures

Closure to understand

A function that returns an anonymous function inside is called a closure

The ability to access the private variables of a function from within the body of another function is called a closure

Closures vary in form and are local functions that are executed globally

Closure functions:

  • You can access local variables of one function from within another
  • The existence of closures can extend the life of a local variable

Note:

This in the closure refers to the window object

The subscript of an element can be obtained through closures

Singletons of design patterns

Definition:

Singleton pattern: Only one instance of an object can be created at a time

// Store this to a variable and return it

  • // The second time you create a new object, check whether the variable contains a value and return it
  • // var ins = null; Make INS private to prevent global variable contamination
  • // You can add a private attribute to the constructor
function Animal() {
  if (Animal.ins) {
    return Animal.ins
  }
  Animal.ins = this
  return Animal.ins
}
var a1 = new Animal()
var a2 = new Animal()
alert(a1 == a2)
Copy the code

role

Function: Local properties or functions are executed globally

Preview: Come on, dream chasers

Learning is a continuous process, stick to it, there will be harvest!

Accumulate over a long period, consolidate the foundation, early into Dachang!

It’s not easy to keep it up, and it’s not easy to keep it up. You’re great!

Calm Down & Carry On!

Read more:

Review of previous updates

【 relearn JS】 Every day to strengthen the foundation of the series of articles:

Prototype and prototype chain to JS 】 【 | | factory pattern constructors, consolidate the foundation – to revisit JS 】 【 object oriented/process/class and object oriented

Day23 – The front end also needs to understand some databases

【day1】

Day2 operators, DAY3 data types,

Day4 loop structure & Conditional statement, DAY5 function (emphasis), day6 scope & event,

【 DAY7 】 object & array method summary, 【day8】 string method & partial sorting,

【 DAY9 】Math object & Wrapper Function, 【 DAY10 】BOM- Browser object model,

【 DAY11 】DOM- Document Object Model

【 DAY13 】Event Event object first known (2),

【 DAY14 】 Event delegate & Drag principle

【 DAY15 】 Drag-and-drop implementation & regular introduction, 【 DAY16 】 regular specific method,

【 DAY17 】cookie, 【day18】ES6,

[DAY19] Js motion function encapsulation

[DAY21] Study and review in the first three weeks

[DAY22] Server and client

More on the way… A long way to go ==-.. – = =