Una breve introducción a la programación orientada a objetos

Introducción a la programación orientada a objetos

1 programación orientada a objetos oop (programación orientada a objetos)

Orientado a objetos es descomponer cosas en objetos, y luego por la división del trabajo entre los objetos.
Ejemplo: Pon el elefante en el refrigerador, dividido en tres pasos 1. 2 3
Orientado a objetos es dividir el problema por la función de el objeto, no el escalón
(tractor) Hay escobas en él)
La programación orientada a objetos tiene las ventajas de flexibilidad, reutilización de código, fácil mantenimiento y desarrollo, y es más adecuada para proyectos de software a gran escala con cooperación de varias personas.

Tres características de la orientación a objetos

• Encapsulamiento
• heredar
• Polimorfismo

Pensamiento orientado a objetos

1. Extraer (abstraer) atributos y comportamientos comunes de objetos y encapsularlos en una clase (plantilla)
2. Crea una instancia de la clase y obtén el objeto de la clase

Por ejemplo

Ejemplo: el teléfono móvil es un teléfono móvil
Xiaomi (Apple) abstracto (mencionado en general, no está claro) . El específico (específicamente)
Xiaomi y Apple son ambos teléfonos móviles, y hay muchas similitudes, como el peso y los materiales.
Podemos extraer estos El mismo punto, encapsularlos en una plantilla, y luego, cuando necesite hacer un teléfono móvil, solo necesita usar esta plantilla

En la programación orientada a objetos, solo necesitamos considerar qué objetos están ahí De acuerdo con la forma de pensar orientada a objetos, constantemente creamos objetos, usamos objetos y los dirigimos para hacer cosas.

2 clases y objetos

Objeto

En la vida real, todo es un objeto y un objeto es una cosa específica, y todo lo que puedes ver y tocar es un objeto, como el papel.
En js, un objeto es un conjunto de colecciones desordenadas de propiedades y métodos relacionados, todas las cosas son objetos, como cadenas

• Atributos: las características de las cosas, representadas por atributos en el objeto.
• Método: el comportamiento de las cosas, representado por métodos en el objeto.

Clase

Puede usar una palabra clave de clase para declarar una clase y usar esta clase para crear una instancia de un objeto. La
clase abstrae la parte pública de un objeto. Se refiere a una clase grande en general, y un
objeto se refiere específicamente a un determinado objeto. Un objeto específico El objeto se instancia a través de la clase.

Por ejemplo, si desea hacer un automóvil BMW, el dibujo es solo una clase, que es más abstracto. Podemos hacer muchos automóviles BMW a través de este dibujo.

Constructor constructor de clases

El método constructor () es el constructor (método predeterminado) de la clase. Se utiliza para pasar parámetros y devolver el objeto de la instancia. La instancia del objeto es generada por el nuevo comando. Este método se llama automáticamente. Si no hay una declaración de visualización , se creará automáticamente un constructor () dentro de la clase.

• Crear clase

//创建一个类  
class Star {
    
    
   constructor (name){
    
    
     this.name=name
   }
}

//利用类创造对象 new 
var star = new Star('没头发')
console.log(star.name);//没头发
//通过class 关键字创建类  类名要首字母大写
// 类里面有个constructor函数，可以接受传递进来的参数，同时返回实例对象
// constructor 函数，只要new生成实例，就会自动调用，就算不写，类也会自动生产
//创建类时，不加小括号，生成实例加 构造函数不需要加 function

• Agrega un método común a la clase

class Star {
    
    
    constructor (name){
    
    
        this.name=name
    }
    sing(song){
    
    
          console.log(this.name+' 唱的 '+song);
    }
}
var star = new Star('没头发')star.sing('冰雨') // 没头发 唱的 冰雨
//类里所有的方法都不需要写function
//多个函数方法之间不加，

3 tipos de herencia

La clase hereda las palabras clave extendidas y súper

Herencia en la vida real, la herencia del negocio del padre , la herencia del programa hereda algunos métodos y propiedades de la clase padre

class Father {
    
    
    constructor(x,y){
    
    
        this.x=x
        this.y=y
    }
    money(){
    
    
        console.log(100);
    }
    sum(){
    
    
        console.log(this.x+this.y);
    }
}
class Sonextends Father{
    
    
    constructor(x,y){
    
    
        this.x=x
        this.y=y
    }
}
var son = new Son(1,2)
son.money() //100
son.sum()  //Must call super constructor in derived class before accessing 'this' or returning from derived constructor
// this指向问题   因为sum中的this指向的是父类不是子类

class Father {
    
    
    constructor(x,y){
    
    
        this.x=x
        this.y=y
    }
    sum(){
    
    
        console.log(this.x+this.y);
    }
}
class Sonextends Father{
    
    
    constructor(x,y){
    
    
        super() //调用了父类的构造函数
    }
}
var son = new Son(1,2)
son.sum()  //3

Super llama a las funciones normales de la clase padre y las reglas para encontrar atributos en herencia.

Cuando se extiende no se escribe

class Father {
    
    
    say(){
    
    
        return '父类 '
    }
}
class Son{
    
    
    say(){
    
    
        console.log('儿子');
        //super.say() 就是调用父亲中的函数 say()
    }
}
var son = new Son()
son.say()//儿子

Cuando se extiende, el principio de proximidad

class Father {
    
    
    say(){
    
    
        return '父类 '
    }
}
class Son extends Father{
    
    
    say(){
    
    
        console.log('儿子');
    }
}
var son = new Son()
son.say()  //儿子

• En herencia, si la subclase quiere generar un método, primero averigüe si existe tal método en la subclase, y si lo hay, ejecute el método de la subclase
• Si no está en la subclase, busque en la clase principal, si la hay, ejecute el método en la clase principal (el principio de proximidad)

La atención de super
super debe colocarse antes de esto en la subclase

4 Dos puntos de atención al usar clases

• En es6, no hay promoción variable, por lo que la clase debe definirse antes de que se pueda crear una instancia del objeto a través de la clase.

var star = new Star('没头发')

class Star {
    
    
    constructor (name){
    
    
        this.name=name
    }
    sing(song){
    
    
        console.log(this.name+' 唱的 '+song);
    }
}
//'Star' before initialization

``

 - 在类中共有的属性和方法，一定要加this才能使用

```javascript
var star = new Star('没头发')

class Star {
    
    
    constructor (name){
    
    
        this.name=name
        song() // sing is not defined
    }
    sing(song){
    
    
        console.log(this.name+' 唱的 '+song);
    }
}
var star = new Star()

Tenga en cuenta que esto en la categoría 5 apunta al problema

Ahora quiero hacer clic en el botón en la página y luego llamar al método en la clase principal

<button>点击</button>

este error, salida indefinida

class Star {
    
    
    constructor(uname) {
    
    
        this.uname = uname
        this.btn=document.querySelector('button')
        this.btn.onclick=this.sing
    }
    sing() {
    
    
        //方法sing里面的this指向的是btn这个按钮，因为这个按钮调用了这个函数
        console.log(this.uname);  //undefined
    }
}
var star = new Star('没头发')

Cambia esto

vat _that;
class Star {
    
    
    constructor(uname) {
    
    
        _that=this
        this.uname = uname
        this.btn=document.querySelector('button')
        this.btn.onclick=this.sing
    }
    sing() {
    
    
        //方法sing里面的this指向的是btn这个按钮，因为这个按钮调用了这个函数
        console.log(_that.uname);  //没头发
    }
}
var star = new Star('没头发')