Método de aprendizaje básico de JavaScript de front-end web (3)

Una nota técnica sobre cómo responder o su comprensión de xxxx

Por ejemplo: cuénteme sobre su comprensión de los cierres

Respuesta: 1. ¿Qué es xxx?

2. Escenarios de aplicación

3. Ventajas y desventajas

4. Implementación

5. ¿Existe una solución mejor?

Uno, cierre

Que es un cierre

Cierre = función + alcance léxico

Alcance léxico: se refiere a la posición definida por la declaración de variable, si la posición actual no está definida, se visitará la posición definida por el padre

Cierre en sentido amplio: var a = 1000; función fn1 () {alerta (a)} fn1 ()

Cierres utilizados en el trabajo diario, cierres superiores estrechos:
1. Funciones anidadas dentro de funciones
2. Las funciones secundarias se refieren a variables relacionadas de la función principal

Características: memoria residente a largo plazo

Escenarios de aplicación de cierre y código de implementación

//求和
function makeAdd(x) {
    
    


    return function(y) {
    
    

     return x+y

   }

}
//设置字号
function setFontSize(size) {
    
    


   return function() {
    
    

     document.body.style.fontSize=size+"px"

   }

}
//循环表单
function makeHelp(help) {
    
    
    
    return function() {
    
    
       console.log(help)
        document.querySelector('.help').innerHTML=help
    }
 }
function init() {
    
    
    var userInfo=[
        {
    
    id:'username',helpText:'请输入用户名'},
        {
    
    id:'email',helpText:'请输入邮箱'},
        {
    
    id:'address',helpText:'请输入地址'},
    ]

    //动态绑定onfocus事件
    for(var i=0;i<userInfo.length;i++) {
    
    
        var item=userInfo[i];
        document.getElementById(item.id).onfocus=makeHelp(item.helpText)

    }
}
init()

//封装组件或插件
var Counter=(function() {
    
    

   //私有变量
   var index=0;

   //私有方法
   var add=function() {
    
    
       return index++;
   }

   var jian=function() {
    
    

   }

  return {
    
    
       //暴露出去供用户的方法
       increment:function() {
    
    
           add()
       },
       getValue:function() {
    
    
           return index;
       }
   }


})()

Ventajas y desventajas de los cierres
1. Memoria residente a largo plazo, puede almacenar datos en caché
2. Puede aislar el alcance, evitar la contaminación global

En segundo lugar, la cadena prototipo

1. La cadena de prototipos es un mecanismo de herencia único de JS
2. La cadena de prototipos involucrará a ___proto___, prototipo
3. La parte superior de la cadena de prototipos es nula
4. Escenarios de aplicación: herencia
5. Ventajas: escriba el mismo método o métodos similares en el prototipo Arriba, es conveniente reutilizar objetos instanciados.
Desventajas: no es fácil de entender, generalmente solo los talentos de front-end lo entienden.
6. La clase lanzada de ES6 se extiende para darse cuenta de la herencia de la
cadena de prototipos de referencia de clase mundial. No hay imagen: como sigue

Tres, herencia de JavaScript

1. La herencia es una de las características del pensamiento de desarrollo orientado a objetos

2. Tres características de los entrevistados: encapsulación, herencia, polimorfismo

3. La herencia se divide principalmente en métodos de herencia ES5 y ES6

Las clases de herencia de ES5 se implementan principalmente a través de funciones de
herencia de cadena de prototipos

//创建一个父类
function Parent() {
    
    
    this.name='jack'

}

Parent.prototype.getName=function() {
    
    
    return this.name;
}

//创建一个子类
function Child() {
    
    

}

//子类的原型等于父类的实例化对象
Child.prototype=new Parent();

var c1=new Child()

Desventajas:
1. No se pueden pasar parámetros,
no resuelve el problema de referencia del objeto.

Préstamo de la herencia del constructor

//创建一个父类
function Parent(name) {
    
    
    this.name=name ||'jack'
    this.colors=['red','green','blue']

}

Parent.prototype.getName=function() {
    
    
    return this.name;
}

//创建一个子类
function Child(name) {
    
    
    //借用父类来承继实例属性，但不能继承父类方法
    Person.call(this,name)
    
}

Desventajas: no se puede heredar el método de la clase principal

Herencia combinada = herencia de la cadena del prototipo + herencia del constructor prestado

//创建一个父类
function Parent(name) {
    
    
    this.name=name ||'jack'
    this.colors=['red','green','blue']

}

Parent.prototype.getName=function() {
    
    
    return this.name;
}

var p1=new Parent();
p1.getName();


//创建一个子类
function Child(name) {
    
    

    Parent.call(this,name)
    
}

Child.prototype=new Parent();

var c1=new Child()
c1.getName()

Ventajas: no solo puede heredar el método prototipo de la clase principal, sino también pasar atributos de parámetros

Herencia ES6

A través de clase, extensión, súper implementación // la herencia debe escribir super

//创建一个父类
class Parent {
    
    
   constructor(name) {
    
    
        this.name=name ||'jack'
        this.colors=['red','green','blue']
   }

  getName() {
    
    
    return this.name;
}

}


//创建一个子类
 class Child extends Parent {
    
    

      constructor(name) {
    
    
          super(name)  //super就是父类Parent
      }

      getValue() {
    
    


      }
    
}