(JavaScript Learning Record): Object-oriented

• Written in front: refer to the tutorial of Bilibili dark horse programmer pink teacher 
• Address: https://www.bilibili.com/video/BV1Sy4y1C7ha?t=41&p=4

table of Contents

Introduction to object-oriented programming

POP (Process-oriented programming)

Object Oriented Programming OOP (Object Oriented Programming)

Process-oriented and object-oriented contrast

Classes and objects in ES6

Object-oriented

Object

Class

Create class

Class constructor constructor

Class inheritance

inherit

super keyword

Three points of attention

---

Introduction to object-oriented programming

POP (Process-oriented programming)

• Process-oriented is to analyze the steps required to solve the problem, then use the function to implement these steps, step by step, when used in accordance with yet another one call to it.
• Give a chestnut: Put the elephant in the refrigerator, process-oriented approach

• Process-oriented is to follow the steps we have analyzed and solve the problem according to the steps.

Object Oriented Programming OOP (Object Oriented Programming)

• Object-oriented is to decompose affairs into objects, and then divide labor and cooperation between objects.
• Give a chestnut: Put the elephant in the refrigerator, an object-oriented approach.
• First find out the objects and write out the functions of these objects:
  • 1. Elephant Object 
    • Go in
  • 2. Refrigerator object
    • turn on
    • shut down
  • 3. Use the function of elephant and refrigerator
• Object-oriented is to divide the problem by the function of the object, not the step.
• In the idea of ​​object-oriented program development, each object is a functional center with a clear division of labor .
• Object-oriented programming has the advantages of flexibility, reusable code, easy maintenance and development, and is more suitable for large-scale software projects with multi-person cooperation.

Process-oriented and object-oriented contrast

• Process-oriented
  • Advantages : performance is higher than object-oriented, suitable for things closely related to hardware , such as process-oriented programming used by single-chip microcomputers.
  • Disadvantages : no object-oriented, easy to maintain, easy to reuse, easy to expand
• Object-oriented
  • Advantages : easy to maintain, easy to reuse, easy to expand, because of the object-oriented features of encapsulation, inheritance, and polymorphism, a low-coupling system can be designed , making the system more flexible and easier to maintain
  • Disadvantages : performance is lower than process-oriented

Classes and objects in ES6

Object-oriented

• Object-oriented is closer to our real life, we can use object-oriented to describe things in the real world. But things are divided into concrete things and abstract things
• Object-oriented thinking characteristics:
  • 1. Extract (abstract) the attributes and behaviors shared by objects and organize (encapsulate) them into a class (template)
  • 2. Instantiate the class and get the object of the class
• In object-oriented programming, we consider which objects are there. According to the characteristics of object-oriented thinking, we constantly create objects, use objects, and direct them to do things .

Object

• In real life: everything is an object, and the object is a concrete thing , a visible and tangible object. For example, a book, a car, or a person can be an "object", and a database, a web page, and a connection to a remote server can also be an "object"
• In JavaScript, an object is an unordered collection of related properties and methods. All things are objects , such as strings, numbers, arrays, and functions.
• Objects are composed of properties and methods:
  • Attributes : the characteristics of things, represented by attributes in objects (common nouns)
  • Method : the behavior of things, represented by methods in objects (common verbs)

Class

• In ES6, the concept of classes is newly added. You can declare a class using the class keyword, and then use this class to instantiate objects.
  • The class abstracts the public part of the object, it refers to a large class (class)
  • Object refers to a certain one, a specific object is instantiated through the class

• Object-oriented thinking characteristics:
  • 1. Extract (abstract) the attributes and behaviors shared by objects and organize (encapsulate) them into a class (template)
  • 2. Instantiate the class and get the object of the class

Create class

• (1) Create a class through the class keyword, we still habitually define the first letter of the class name in uppercase
• (2) There is a constructor function in the class, which can accept the passed parameters and return the instance object
• (3) The constructor function will automatically call this function as long as new generates an instance. If we don't write this function, the class will also automatically generate this function
• (4) Generate instance new cannot be omitted
• (5) Finally, pay attention to the grammatical specification, do not add parentheses after the class name of the created class, add parentheses after the name of the generated instance class, and the constructor does not need to add function

// 1. 创建类 class  创建一个 明星类
class Star {
    constructor(uname, age) {
        this.uname = uname;
        this.age = age;
    }
}

// 2. 利用类创建对象 new
var ldh = new Star('刘德华', 18);
var zxy = new Star('张学友', 20);
console.log(ldh);
console.log(zxy);

Class constructor constructor

• The constructor() method is the constructor (default method) of the class. It is used to pass parameters and return the instance object. This method is automatically called when the object instance is generated by the new command .
• If the definition is not displayed, the class will automatically create a constructor() for us

// 1. 创建类 class  创建一个 明星类
class Star {
    // 类的共有属性放到 constructor 里面
    constructor(uname, age) {
        this.uname = uname;
        this.age = age;
    }
    sing(song) {
        // console.log('我唱歌');
        console.log(this.uname + song);

    }
}

// 2. 利用类创建对象 new
var ldh = new Star('刘德华', 18);
var zxy = new Star('张学友', 20);
console.log(ldh);
console.log(zxy);
// (1) 我们类里面所有的函数不需要写function
//(2) 多个函数方法之间不需要添加逗号分隔
ldh.sing('冰雨');
zxy.sing('李香兰');

Class inheritance

class Father{ // 父类
}
class Son extends Father { // 子类继承父类
}

inherit

// 类的继承
class Father {
    constructor() {

    }
    money() {
        console.log(100);

    }
}
class Son extends Father {

}
var son = new Son();
son.money();

super keyword

• The super keyword is used to access and call functions on the parent class of the object. You can call the constructor of the parent class or the ordinary function of the parent class

class Person { // 父类
     constructor(surname){
     this.surname = surname;
 }
}
class Student extends Person { // 子类继承父类
     constructor(surname,firstname){
     super(surname); // 调用父类的constructor(surname)
     this.firstname = firstname; // 定义子类独有的属性
 }
}

• Note: The subclass uses super in the constructor and must be placed in front of this (must call the parent class's construction method first, and use the subclass construction method)
• Case 1:

class Father {
 constructor(surname) {
 this.surname = surname;
 }
 saySurname() {
 console.log('我的姓是' + this.surname);
 }
}
class Son extends Father { // 这样子类就继承了父类的属性和方法
 constructor(surname, fristname) {
 super(surname); // 调用父类的constructor(surname)
 this.fristname = fristname;
 }
 sayFristname() {
 console.log("我的名字是：" + this.fristname);
 }
}
var damao = new Son('刘', "德华");
damao.saySurname();
damao.sayFristname();

• Case 2: Call the ordinary function of the parent class

class Father {
 say() {
 return '我是爸爸';
 }
}
class Son extends Father { // 这样子类就继承了父类的属性和方法
 say() {
 // super.say() super 调用父类的方法
 return super.say() + '的儿子';
 }
}
var damao = new Son();
console.log(damao.say());

Three points of attention

• 1. In ES6, there is no variable promotion for classes, so the class must be defined before the object can be instantiated.
• 2. The common attributes and methods in the class must be used with this.
• 3. This in the class points to the problem:
  •  The this in the constructor points to the instance object, and the this in the method points to the caller of this method

var that;
var _that;
class Star {
    constructor(uname, age) {
        // constructor 里面的this 指向的是 创建的实例对象
        that = this;
        console.log(this);

        this.uname = uname;
        this.age = age;
        // this.sing();
        this.btn = document.querySelector('button');
        this.btn.onclick = this.sing;
    }
    sing() {
        // 这个sing方法里面的this 指向的是 btn 这个按钮,因为这个按钮调用了这个函数
        console.log(this);

        console.log(that.uname); // that里面存储的是constructor里面的this
    }
    dance() {
        // 这个dance里面的this 指向的是实例对象 ldh 因为ldh 调用了这个函数
        _that = this;
        console.log(this);

    }
}

var ldh = new Star('刘德华');
console.log(that === ldh);
ldh.dance();
console.log(_that === ldh);

// 1. 在 ES6 中类没有变量提升，所以必须先定义类，才能通过类实例化对象

// 2. 类里面的共有的属性和方法一定要加this使用.