Si ha escrito un proyecto en JavaScript o participado en una entrevista, debe haber encontrado muchos problemas increíbles. Las primeras especificaciones de JavaScript no eran uniformes y no existían estándares estrictos. Además, su sintaxis era flexible y diversa. Algunos códigos que parecían incorrectos se podían ejecutar con normalidad y algunos códigos que parecían lógicos, pero los resultados eran diferentes. Miles de millas . Estos problemas a menudo conducen a ERRORES en el desarrollo diario. Más importante aún, muchos entrevistadores los tomarán como una prueba de nuestros ingenieros de JS. Entonces, este artículo resume 5 pozos de comparación de JavaScript, sus causas y soluciones.
1. Punto y coma opcional
problema:
function foo() {
return
{
value: 1
};
}
console.log(typeof foo());
Podría pensar que su salida es "función", pero el resultado es undefined. A primera vista, el código parece estar bien, pero cuando mira con atención, puede ver que el objeto devuelto por la declaración de retorno se coloca en la siguiente línea. Entonces el problema es: el punto y coma de JavaScript es opcional. Después de la declaración de retorno es envuelto, JavaScript se lo dará automáticamente. Agregue un punto y coma al final, y el código después de la devolución no se ejecutará, por lo que el resultado de la devolución de foo () no está definido. La solución es escribir un punto y coma al final de cada línea, para que pueda saber claramente dónde termina el código.
2. Esto apunta a
problema:
var a = 5;
var obj = {
a: 3,
foo: function() {
console.log(this.a);
}
}
var objFoo = obj.foo;
objFoo();
La respuesta es 5. Cuando se llama a una función, su interno esto apunta al objeto que llama, por ejemplo, obj.foo()esto apunta al objeto obj. Si la función se llama globalmente, esto se refiere al objeto global, que es una ventana en el navegador. objFooEl equivalente a adquirir el objobjeto foodespués de que el método hace referencia, llama al global, por lo que esto apunta al objeto de ventana. Use varla definición de las variables de alcance de nivel superior que se agregarán a la ventana, por lo que objFoo () llama a la impresión es global en a, es decir, 5.
3. Longitud de la matriz
problema:
const arr = [1, 2, 3, 4];
arr.length = 0;
console.log(arr[0]);
El resultado es undefinedque debido a que la propiedad length de la matriz también puede controlar el número de elementos en la matriz a su vez, cuando arr.length se establece en 0, arr se convierte en una matriz vacía y todos los elementos dentro están indefinidos cuando se accede a ella nuevamente.
4. Elevación
problema:
function bar() {
return foo;
foo = 10;
function foo() {
}
var foo = '11';
}
console.log(typeof bar());
El resultado es function. Las variables declaradas con var y las funciones definidas con funtion se promoverán a la parte superior del alcance actual, por lo que las variables se pueden asignar primero y luego declarar con var, mientras que las funciones se pueden llamar primero y luego definir. Pero tenga en cuenta que la variable se define usando var (consulte la instrucción de asignación simultánea), solo mejorará la sección Declaraciones, parte de la asignación no se promoverá, por ejemplo, en el ejemplo var foo = '11' aumentará var foo, pero se mantendrá foo = 11en su lugar. Al definir la función bar (), se creará un alcance al mismo tiempo, y la promoción colocará las variables y funciones relacionadas en la primera línea de la función bar (). Con base en las reglas anteriores, se puede saber que las declaraciones de la función foo () y la variable foo han sido promocionadas, porque la variable foo tiene el mismo nombre, pero solo la declaración, por lo que el valor de la función no será sobrescrito, y foo todavía apunta a la función. Después de eso, la declaración de retorno se usa directamente para devolver el resultado, y el siguiente código ya no se ejecutará. El código en bar () es en realidad la siguiente forma:
function bar() {
function foo() {
}
var foo;
return foo;
foo = 10;
var foo = '11';
}
5. Alcance y cierre
problema:
for(var i = 0; i < 3; i++) {
setTimeout(() => {
console.log(i);
});
}
Puede pensar que el resultado del código anterior es 0 1 2, pero de hecho lo es 3 3 3, esto se debe a que la variable definida por la palabra clave var no tiene un alcance a nivel de bloque. La i definida en el bucle for es equivalente a una variable global, que se agregará a la variable de ventana. Se puede acceder al valor de i incluso después de que el bucle for salga. Esto conduce a un problema. La función diferida usando setTimeout () se ejecutará después de que finalice el ciclo for. En este momento, el valor de i se ha convertido en 3, por lo que las 3 funciones en setTimeout () imprimirán 3. Hay dos formas de resolver este problema.
La primera es usar la palabra clave let para definir la variable i, de modo que cada vez que se cree un bucle, se cree un nuevo alcance, de modo que la i en cada alcance sea independiente entre sí, por lo que se pueda imprimir 0 1 2.
El segundo método consiste en utilizar funciones autoejecutables, como el siguiente código:
for(var i = 0; i < 3; i++) {
(function(i) {
setTimeout(() => {
console.log(i);
})
})(i)
}
En este momento, i se pasa a la función autoejecutable anónima a través del parámetro, y la función autoejecutable crea un cierre, por lo que capturará el valor de i, que es equivalente a copiar el valor del parámetro i internamente, así que no importa cuál sea el cambio i externo, su valor interno no cambiará. Esto también se puede imprimir 0 1 2.
resumen
Estas 5 preguntas exponen algunos errores comunes en JavaScript. Un poco de descuido dejará peligros ocultos y son difíciles de detectar, como un simple salto de línea, un cambio en este punto, modificación accidental de la longitud de una matriz, promoción de variables y funciones, y alcance La creación de allí puede haber diferentes situaciones. Estas preguntas pueden no ser comunes en el desarrollo diario, pero a menudo aparecen en pruebas escritas y entrevistas de JS para probar la familiaridad del entrevistador con JS. Además, los pits en JS son mucho más que estos, por lo que necesitas acumular más en tu vida diaria, y también puedes seguir este blog. Actualizaré el uso de JavaScript de vez en cuando, ¡gracias!