1. Var no tiene alcance a nivel de bloque, deja que tenga alcance a nivel de bloque
En el entendimiento vary letla diferencia antes, necesitamos saber cuál es el alcance a nivel de bloque, sólo después de una comprensión real de lo que es el ámbito de nivel de bloque, con el fin de entender realmente vary letdiferencia.
1. Alcance a nivel de bloque: En qué alcance está disponible la variable.
{
var name="vue";
console.log(name); //vue
}
console.log(name); //vue
En el ejemplo anterior, el interior de las llaves es un alcance de nivel de bloque. Cuando se llama fuera del alcance de nivel de bloque name, aún se puede acceder, es decir, el alcance de nivel de bloque varno tiene restricciones sobre las variables declaradas. Pero en el proceso de desarrollo, no queremos poder acceder a los valores de las variables dentro del alcance a nivel de bloque fuera del alcance a nivel de bloque, lo que a menudo causa algunos problemas.
2. No hay ningún problema causado por el alcance a nivel de bloque: si es a nivel de bloque
var func;
if(true){
var name="vue";
func=function (){
console.log(name)
}
}
var name="aaa"
func();
Debido a que el alcance a nivel de bloque varno limita las variables declaradas, podemos cambiar nameel valor de las variables declaradas dentro de la función fuera de la función . El valor impreso será el valor que definimos fuera de la función name="aaa", no el valor declarado dentro de la función name="vue". En el proceso de desarrollo real, se puede llamar a una función en varios lugares, y cada vez que se llama, se cambiará el valor de la variable interna de la función, lo que puede causar confusión fácilmente.
3. No hay ningún problema causado por el alcance a nivel de bloque: para el nivel de bloque
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<script>
const btns=document.getElementsByTagName("button");
for(var i=0;i<btns.length;i++){
btns[i].addEventListener('click',function(){
console.log("第"+i+"个按钮被点击");
})
}
</script>
</body>
</html>
Se puede ver en la consola que no importa en qué botón se haga clic, se muestra el tercer botón. El principio es el mismo que en el ejemplo anterior. Cuando ise hace clic en el botón primero , la función correspondiente, pero una función que está en un ivalor de inicio real , cuyo valor ha sido cambiado, y ahora dentro del ivalor de la función ha sido el último ciclo iel valor de cobertura, mostrará el tercero. se hace clic en el botón .
En ES6, agregado let, letes un alcance a nivel de bloque con ify for. En el ejemplo anterior, cambiar var para dejar mostrará correctamente en qué botón se hizo clic.
<script>
const btns=document.getElementsByTagName("button");
for(var i=0;i<btns.length;i++){
btns[i].addEventListener('click',function(){
console.log("第"+i+"个按钮被点击");
})
}
</script>
Debido a que lettiene su propio alcance, el forciclo anterior equivale a tres alcances. El ivalor en cada alcance solo funcionará en su propio alcance y no cambiará su valor debido a la influencia de variables fuera del alcance. varAl declarar, es equivalente a compartir un ivalor.
En segundo lugar, el uso de const
1. constLa función principal es modificar una variable como constante, que no se puede volver a asignar.
2. ¿Cuándo usar constcuál?
Como su nombre lo indica, cuando nuestro identificador modificado no se vuelva a asignar, se puede utilizar constpara garantizar la seguridad de los datos.
Sugerencia: En el desarrollo de ES6, dé prioridad al uso const, solo use cuando necesite cambiar un determinado identificador let.
3. Atención a la constante
Nota 1: Una constvez que se asigna el identificador modificado, no se puede modificar
const a = 20;
a = 10; //错误，不可以修改
Nota 2: Cuando se utiliza un constidentificador definido, debe asignarse
const name; //错误，const修饰的标识符必须赋值
Nota 3: El significado de una constante es que el objeto puntiagudo no se puede modificar, pero las propiedades internas del objeto se pueden cambiar.
const obj={
name:"vue",
age:18
}
obj.name="newVue",
obj.age=20 //正确，可以改变对象内部的属性