JavaScript -- class return object

JavaScript is object-oriented,
Notice that in fact, object-oriented programming is a way of programming, and its idea is universal. Therefore, I strongly recommend you to check my notes in python, object-oriented programming.

Object oriented and process oriented

It's relatively easy to understand here. These are two very different ways of programming.

Process oriented Object-oriented
Advantage Performance is higher than object-oriented, suitable for things closely related to hardware, such as process oriented programming used by single-chip microcomputer. It is easy to maintain, reuse and expand. Because of the encapsulation, inheritance and polymorphism of object-oriented, it can design a low coupling system, which makes the system more flexible and easier to maintain
shortcoming Hard to maintain, reuse and expand Lower performance than process oriented

Objects and classes

object

Objects have properties and behaviors,

  • Property is the property of an object, NOUN
  • Method is the behavior of the object, verb
    What is object instantiation? In fact, objects come from classes. When you turn a class into a real object that can be used, it is called object instantiation. Object instantiation is a process. Instance object refers to the object you instantiate
//The following code is a review of objects
//Literal creation object
var ldh = {
    name: 'Lau Andy',
    age: 18
}
console.log(ldh);

//Constructor to create an object,
  function Star(name, age) {
    this.name = name;
    this.age = age;
 }
var ldh = new Star('Lau Andy', 18)//Instanced object
console.log(ldh);	

class

Basic grammar

The concept of class is actually put forward in es6. We can declare a class through the class keyword, and then use the new key to instantiate an object

  1. Syntax:
//Step 1 use the class keyword
class name {
  // class body
}     
//Step 2 create an instance with the defined class note the new keyword
var xx = new name();     
  1. Example
 // 1. Create a class create a star class
 class Star {
   // The common properties of the class are put into the constructor. This is a constructor, which you can also call a constructor. Its function is to pass parameters and return instance objects, similar to the init function in python
   constructor(name, age) {
   this.name = name;
   this.age = age;
   }
 }
   // 2. Create object new with class
   var ldh = new Star('Lau Andy', 18);
   console.log(ldh);

There are ways to add properties to a class

In fact, this code is very easy to understand

 // 1. Create a class create a class
class Star {
    // The common properties of the class are put into the constructor. The constructor is the constructor or constructor
    constructor(uname, age) {
      this.uname = uname;
      this.age = age;
    }//------------------------------------------->Note that there is no need to add commas or commas between methods. It is recommended not to add commas to distinguish between classes or objects
    sing(song) {
      console.log(this.uname + 'sing' + song);
    }
}
// 2. Create object new with class
var ldh = new Star('Jacky Cheung', 18);
console.log(ldh);
ldh.sing('Kiss good-bye'); 
  • What you need to pay attention to:
  1. Create a class through the class keyword. We are still used to defining the initial capital for the class name
  2. Class has a constructor constructor, which can accept the passed parameters and return the instance object
  3. constructor function as long as new generates an instance, this function will be called automatically. If we don't write this function, the class will also generate this function automatically
  4. There is no need to add comma separation between multiple function methods
  5. Generating instance new cannot be omitted
  6. Syntax specification: do not add parentheses after creating class names, add parentheses after generating instance class names, and no function is required for constructors

Three characteristics of object-oriented: encapsulation, inheritance and polymorphism

  1. encapsulation
    In fact, this is the easiest to understand. It is to encapsulate the common features and functions of a class of things. Abstract it and combine it into a class
// Parent class
class Father{   
} 

// Subclass inherits parent
class  Son  extends Father {  
}       
  1. inherit
    The so-called inheritance is also easy to understand. Inheritance is to inherit some things of the parent class into the existing class of the object "I", so that I don't need to repeatedly define some existing properties or methods in the parent class

Please think about the following questions

  • How do we represent the inherited properties and methods? How to use
  • Can we modify inherited methods or properties?
  //Parent class defined
  class Father {
     constructor(x, y) {
     this.x = x;
     this.y = y;
     }
     sum() {
     console.log(this.x + this.y);
  	}
   }
  //Child element inherits parent class
      class Son extends Father {
     		 constructor(x, y) {
      		super(x, y); //Constructor in parent class called with super
      	}
      }
      var son = new Son(1, 2);
      son.sum(); //The result is 3
      // Parent class has addition method
      class Father {
        constructor(x, y) {
        this.x = x;
        this.y = y;
        }
        sum() {
        console.log(this.x + this.y);
        }
      }
      // Subclass inherits addition method of parent class and extends subtraction method at the same time
      class Son extends Father {
        constructor(x, y) {
        // Using super to call the parent class, the constructor super must be called before subclass this, and will report error after this.
        super(x, y);
        this.x = x;
        this.y = y;

       }
       subtract() {
       console.log(this.x - this.y);
       }
     }
     var son = new Son(5, 3);
     son.subtract(); //2
     son.sum();//8
     ```
//Be careful:
  - Always pay attention to this The problem of direction of,The common properties and methods in the class must be added this Use.
  - constructor Medium this Pointing to new Instance object coming out 
  - Custom method,Generally speaking, it also points to new Instance object coming out
  - After binding event this Point to the event source that triggered the event
  - stay ES6 There is no variable promotion in the middle class, so the class must be defined before the object can be instantiated through the class

//Use our super keyword to access the methods in our parent class
-  Note that inheritance is looked up
  1. In succession,If the instantiation subclass outputs a method,Let's see if the subclass has this method,If there is, execute the subclass first

  2. In succession,If there is no subclass,Go to find out if the parent class has this method,If there is,Just execute the method of the parent class(Proximity principle)

  3. If the subclass wants to inherit the method of the parent class,At the same time, expand your own methods within yourself,utilize super Call the constructor of the parent class,super Must be in subclass this Previous call

3. polymorphic

Tags: Javascript Programming Python

Posted on Mon, 23 Mar 2020 04:55:15 -0400 by Placebo