Resumen de las preguntas de la entrevista inicial (teoría parte 3)

¿Flujo de eventos de la Orden de Dom? ¿Qué es la delegación de eventos?

Cuando se hace clic en un elemento de la página, el elemento se captura capa por capa desde el documento hacia abajo. Luego burbujea hacia arriba, disparando capa por capa.

La delegación de eventos consiste en escribir el evento en el elemento principal, y e.target es el elemento más pequeño cuando se captura el evento, es decir, el elemento seleccionado. Para que pueda operar los elementos seleccionados de acuerdo con e.target. De esta forma, no hay necesidad de vincular eventos a cada elemento secundario y el código es más conciso.

Proxy de eventos/delegación de eventos

Burbujeo de eventos en js Sabemos que los eventos en los elementos secundarios se propagarán a los elementos principales.

El proxy de evento es el evento que debería haberse agregado al elemento secundario, pero agregamos el evento a su elemento principal.

Entonces hay un problema: con tantos elementos secundarios en el nivel principal, ¿cómo distinguir a qué elemento secundario debe pertenecer el evento?

La respuesta es: la "fuente del evento" se registra en el objeto del evento, que es el subelemento donde ocurre el evento.

Tiene problemas de compatibilidad Bajo el IE antiguo, la fuente del evento es window.event.srcElement, y otros navegadores son event.target

¿Cuáles son los beneficios de usar la delegación de eventos?

La primera ventaja es la alta eficiencia, por ejemplo, no es necesario agregar eventos a los elementos secundarios en un bucle for

La segunda ventaja es que los nuevos elementos secundarios generados por js no necesitan agregarles nuevos eventos, lo cual es más conveniente en la lógica del programa.

Cierre

Una clausura es una función que tiene acceso a variables en el ámbito de otra función.
MDN dice esto: una clausura es un tipo especial de objeto.
La cadena de alcance de un cierre incluye su propio alcance, el alcance de la función envolvente y el alcance global. Una nota sobre los cierres
Normalmente, el alcance de una función y todas sus variables se destruyen cuando la función termina de ejecutarse. Sin embargo, después de crear un cierre, el alcance de esta función permanecerá hasta que el cierre ya no exista.
Primero sabemos que los cierres tienen 3 características :

① Función función anidada
② Las funciones pueden referirse a parámetros y variables fuera de la función
③ Los parámetros y variables no serán reciclados por el mecanismo de recolección de basura

ventaja:

①Proteja la seguridad de las variables en la función, realice la encapsulación y evite que las variables fluyan a otros entornos y causen conflictos de nombres ②Mantenga
una variable en la memoria, que se puede usar como caché (pero usar demasiado también es una desventaja, ya que consume memoria)
③Las funciones autoejecutables anónimas pueden reducir el consumo de memoria.
La desventaja de los cierres es que la memoria residente aumentará el uso de la memoria, y el uso inadecuado puede provocar fácilmente fugas de memoria.
Si no necesita cierres para alguna tarea especial, no es aconsejable crear funciones dentro de otras funciones que no tienen que hacerlo, porque los cierres tienen un impacto negativo en el rendimiento del script, incluida la velocidad de procesamiento y el consumo de memoria.

copia profunda y copia superficial

Los niveles de copia son diferentes. La copia profunda significa que los cambios en cada capa de datos no afectarán el objeto original y el nuevo objeto. En la copia superficial, solo los cambios en los atributos de la primera capa no se afectan entre sí, y el los cambios en los datos profundos también se afectarán entre sí.

Copia superficial: Object.assign
Copia profunda: JSON.stringify y JSON.parse
2. ¿Desventajas del procesamiento JSON stringify y parse?

Si hay un atributo en el objeto que funciona o no está definido, se filtrará después del procesamiento;
si el valor del atributo es un objeto y el objeto de instancia generado por el constructor, se descartará el constructor del objeto;
3. $.extender()

El uso del método de extensión de jquey no solo puede realizar una copia profunda, sino también realizar una fusión profunda. uso específico

Copia profunda: $.extend({},targetObject) // targetObject es el objeto a copiar

Fusión profunda: $.extend(true,{},targetObject1,targetObject2) // Puede fusionar dos objetos profundamente y luego devolver un nuevo objeto

algoritmo diferencial

El algoritmo diff puede considerarse como un algoritmo de comparación, que compara el DOM virtual antiguo y el nuevo del objeto. Como sugiere el nombre, el algoritmo diff puede encontrar la diferencia entre el DOM virtual antiguo y el nuevo, pero el algoritmo diff no solo actualiza el DOM virtual antiguo y el nuevo, sino que también actualiza el DOM real de acuerdo con los resultados de la comparación.

¿El papel de la llave? ¿Qué sucederá si la clave falta o se repite?

1. La función de la tecla es principalmente comparar de manera más eficiente si un determinado nodo en el DOM virtual es el mismo nodo, realizar una actualización eficiente del DOM virtual y mejorar el rendimiento.

2. Es una condición necesaria para que Vue juzgue si dos nodos son la misma clave de nodo durante el proceso de parcheo. Al representar un conjunto de listas, la clave suele ser el único identificador, por lo que si la clave no está definida, Vue solo puede piense que los dos nodos comparados son el mismo, incluso si no lo son, lo que lleva a la actualización frecuente de elementos, lo que hace que todo el proceso de parche sea relativamente ineficiente y afecte el rendimiento.

3. En el uso real, la clave debe configurarse al representar un conjunto de listas, y debe ser un identificador único. Debe evitar usar el índice de matriz como clave, lo que puede conducir a algunos errores ocultos. El propósito de usar el El atributo clave también es permitir que Vue los distinga, de lo contrario, Vue solo reemplazará sus atributos internos sin activar el efecto de transición.

4. Se puede saber por el código fuente que cuando Vue juzga si dos nodos son iguales, juzga principalmente la clave y el tipo de elemento de los dos nodos. Por lo tanto, si no se establece, su valor es indefinido y puede siempre deben ser considerados como dos nodos idénticos. Solo puede realizar operaciones de actualización, lo que provoca muchas operaciones de actualización de DOM, lo que obviamente no es recomendable.

Las claves duplicadas causarán errores de representación

El papel de la clave en Vue

key Las propiedades especiales de se utilizan principalmente en el algoritmo DOM virtual de Vue nodes para identificar cuando se comparan archivos antiguos y nuevos VNodes. Si no se usa key, Vue usa un algoritmo que minimiza los elementos dinámicos e intenta corregir/reutilizar elementos del mismo tipo tanto como sea posible. Usando key, reorganizará key el orden de los elementos en función de los cambios y eliminará key los elementos que no existen.

Los elementos secundarios con el mismo elemento principal deben tener un valor único key. Los repetidos key causarán errores de renderizado.

Insertar un elemento en una posición de matriz

No use la clave:
después de insertar los datos, todos los datos diferentes posteriores deben reemplazarse y, finalmente, los datos deben insertarse una vez

Use la tecla:
compare, si el valor es el mismo, no haga nada, solo haga una operación de inserción

Si no hay clave, compare las etiquetas nuevas y antiguas para que sean las mismas, y las etiquetas serán las mismas, se considerará que son las mismas y se reemplazará la actualización forzada

¿Qué son los cierres? ¿pros y contras? ¿Cómo solucionar las desventajas?

Qué es un cierre: en JS, la función interna puede acceder a las variables de la función externa y la función externa no puede manipular las características de las variables de la función de memoria. Llamamos a esta característica cierres.

Beneficios de los cierres:

Aísle el alcance y proteja las variables privadas; con los cierres, hay variables locales, de lo contrario, todas son variables globales.
Nos permite usar devoluciones de llamada para operar dentro de otras funciones;
las variables residen en la memoria durante mucho tiempo y no serán recicladas por el mecanismo de reciclaje de memoria, es decir, para extender el ciclo de vida de las variables;
desventajas de los cierres: las funciones internas se refieren a las externas variables de función, funciones internas utilizan memoria interna. Si no se libera la memoria, si hay demasiadas, es fácil que se produzca una fuga de memoria.

Solución: si la cuenta no se puede cancelar automáticamente, debe recuperarse manualmente a tiempo, y la referencia de la función se asignará como nula después de su uso.

nuevas características de es6

1. let y const
let significa declarar variables. const significa declarar una constante
Una vez que se define una constante, no se puede cambiar. Excepto por el objeto, porque la dirección a la que apunta el objeto no ha cambiado.
a const se le debe asignar un valor cuando se declara.
Ambos tienen alcance de bloque.
2. Cadena de plantilla
3. Deconstrucción
4. Valor predeterminado de la función
5. Operador de extensión/descanso, tres puntos...
6. Función de flecha
7. For of for
of poligonales el valor en el par clave-valor
para in poligonales Introduzca el par clave-valor
8, clase de clase, representación de azúcar sintáctica de la cadena prototipo
9, importación y exportación
importación improt
exportación exportación predeterminada
10, promesa
Promise se usa para manejar solicitudes asincrónicas de manera más elegante.
11. Async/await
resuelve las devoluciones de llamadas mejor que Promise
12. Símbolo, un nuevo tipo básico
13. La colección Set
almacena cualquier tipo de valor único, es decir, los elementos guardados en la colección no se repiten. Estructura tipo matriz.
let arrNew = nuevo Conjunto (matriz a deduplicar)

Comprensión de la cadena de prototipos.

js implementa simulación de cadena de prototipos orientada a objetos, por ejemplo, al instanciar un constructor, cada objeto se puede montar con sus propias propiedades exclusivas, y al asignar un método al prototipo de la clase, es un método compartido por todos los objetos. El método en la cadena de prototipos ya no se asigna cada vez que se crea una instancia

este

this se refiere al objeto que llama a la función,
this no puede saber a quién representa antes de que se ejecute, el este punto de js es incierto,
no tiene nada que ver con la definición, pero tiene algo que ver con la ejecución. delante del punto, esto es quién;
el this en la función autoejecutable representa la ventana
cuando se escribe el temporizador, y la ventana se puede omitir; cuando se ejecuta el temporizador, el this en él también representa la ventana;
este es una palabra clave de js, dependiendo del uso de la función, el valor de esto cambia.
Si hay una nueva palabra clave, esto apunta al nuevo objeto
En el evento, esto apunta al objeto que activó el evento

¿Qué hace principalmente el nuevo operador en js?

Cree un objeto vacío, y esta variable hace referencia al objeto y, al mismo tiempo, hereda el prototipo de la función. Las propiedades
y los métodos se agregan al objeto al que
hace referencia este. El objeto recién creado hace referencia a este, y finalmente lo devuelve implícitamente.

que es alcance

Concepto: El rango en el que se puede usar el código (variables) es el alcance. Principalmente para mejorar la confiabilidad del programa, pero también para reducir los conflictos de nombres
Alcance global y alcance local
Alcance global: se refiere a todo el archivo js, las variables globales definidas en el global, se pueden usar en el alcance local, dentro de la función Variables que no declarar asignación directa también se denominan variables globales.Ámbito
local: se refiere principalmente al ámbito de la función.Dentro de la función también se encuentra el ámbito local.Las
variables definidas por var dentro de la función se denominan variables locales, y las variables locales no se pueden obtener externamente.

¿Qué es el burbujeo de eventos? ¿Cómo detener el burbujeo de eventos?

Concepto: Cuando hacemos clic en el elemento hijo para desencadenar el evento del elemento padre, este fenómeno se llama burbujeo de eventos, es decir, se propaga desde el elemento hijo al elemento antepasado, al igual que la burbuja flota desde la parte inferior de la water event.stopPropagation(); evita que el evento
burbujee

¿Flujo de eventos de la Orden de Dom? ¿Qué es la delegación de eventos?

Cuando se hace clic en un elemento de la página, el elemento se captura capa por capa desde el documento hacia abajo. Luego burbujea hacia arriba, disparando capa por capa.

Principio de delegación de eventos: no configure detectores de eventos para cada nodo secundario por separado, pero configure el detector de eventos en su nodo principal y luego use el principio de propagación para afectar la configuración de cada nodo secundario

asíncrono, espera

async es una función que se ejecuta de forma asíncrona e implícitamente devuelve una Promesa como resultado. Es el azúcar sintáctico de la función Generador, y la función Generador se ha mejorado.

Mejorar:

Ejecutor incorporado, no es necesario ejecutar manualmente el método next().

mejor semántica

Aplicabilidad más amplia: el módulo co acepta que el comando yield solo puede ser seguido por funciones Thunk u objetos Promise, mientras que el comando await de funciones asíncronas puede ser seguido por objetos Promise y tipos primitivos de valores (números, cadenas y valores booleanos). , pero esto se convertirá automáticamente en un objeto Promise resuelto inmediatamente).

El valor devuelto es Promise, que es más conveniente que el objeto Iterator devuelto por la función Generator, y se puede llamar directamente usando el método then().

async implícitamente devuelve Promise como una función de resultado, por lo que puede entenderse simplemente que cuando se ejecuta la función detrás de await, await generará una microtarea (Promise.then es una microtarea).

Async espera el principio de implementación:

Cuando se llama a una función asíncrona, se puede devolver un objeto Promise (clave)
en la función asíncrona. Puede haber una expresión en espera en la función asíncrona. La expresión en espera hará que la función asíncrona suspenda la ejecución hasta que se cumpla la promesa en la expresión. resuelto y continuar ejecutándose después de la espera en el código asíncrono y devuelve el resultado.
Dado que se devuelve el objeto Promise, su valor de retorno no se puede obtener directamente en la capa más externa, entonces definitivamente se puede usar el método original: cadena then() para procesar este objeto Promise Principio: la función async/
await
es en realidad una
sincronía de azúcar sintáctica / Await se implementa en función de la promesa. La función asíncrona en realidad envuelve la promesa. El
valor de retorno de await es un objeto Promise. Simplemente coloca el código detrás de await en Promise.then()

La diferencia entre espera asincrónica y promesa
La excepción que se produce en asincrónica/espera no se puede capturar. Se necesita Try/catch para capturar la excepción.
Si cualquier objeto de promesa detrás de espera se convierte en rechazo, toda la asincronía se interrumpirá. Si
se utiliza espera asincrónica , catch puede manejarlo JSON.parse error

// 当调用一个 async 函数时，会返回一个 Promise 对象 (关键)
// async/await 出现的异常是无法捕获的，需要借助 try/catch 来捕获异常
function sleep(flag) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if(flag){
                resolve('success')
            }else{
                reject('Error')
            }
        }, 2000)
    })
}

// async await 的用法
async function fn(flag) {
    try {
        let result = await sleep(flag)
        return result
    } catch (err) {
        return err
    }
}
// 返回的 a,b 是一个 promise 对象
var a = fn(true)
var b = fn(false)
a.then((res)=>{
    console.log(res) // success
})
b.then((res)=>{
    console.log(res) // Error
})