1. Explicación detallada de var, let y const de las nuevas funciones de ES6
El alcance controla la visibilidad y la vida útil de las variables y los parámetros.
Los ámbitos en JS son: ámbito global y ámbito de función. No existe el concepto de ámbito de bloque. ECMAScript 6 (ES6 para abreviar) ha agregado un alcance a nivel de bloque.
El ámbito de nivel de bloque está incluido en { }, y { } en la instrucción if y for también pertenecen al ámbito de bloque.
var,let,const
- Las variables definidas por var son válidas en el ámbito global , sin el concepto de bloques, y se puede acceder a ellas a través de bloques , pero no a través de funciones . Las variables definidas por
let solo son válidas en el ámbito y no se puede acceder a ellas a través de bloques o funciones .
const declara una constante de solo lectura , que solo es válida en el ámbito , y debe inicializarse (es decir, debe asignarse) al declarar, y el valor posterior no se puede cambiar , de lo contrario se informará un error.
//var
var a=1;
if(true){
var b=2;
for(i=0;i<1;i++){
console.log(a);
console.log(b);
}
}
var c=function(){
var d=3;
}();
var e=function(){
console.log(d);//Uncaught ReferenceError: d is not defined
}();
//let
{
let i1=1;
console.log(i1);
{
let i2=1;
}
{
console.log(i2);//Uncaught ReferenceError: i2 is not defined
var fun1=function(){
let i3=3;
}();
var fun2=function(){
console.log(i3);//Uncaught ReferenceError: i3 is not defined
}();
}
}
2. var tiene promoción variable, let y const no tienen promoción variable
//若在定义一个变量之前使用该变量则会抛出ReferenceError错误，而var则会将变量视为undefined
console.log(p);//Uncaught ReferenceError: p is not defined
p=3;//Uncaught ReferenceError: Cannot access 'p' before initialization
let p;
console.log(r);//Uncaught ReferenceError: r is not defined
r=2;//Uncaught TypeError: Assignment to constant variable.
const r=1;
//下面看var 的变量提升
//例1：
console.log(q);//undefined (var声明的变量有变量提升，在js的预处理阶段，将var q;声明提升到最前面，此时暂时还未赋值,所以打印出来的结果为undefined )
var q=2;
//例2：
s=1;
console.log(s);
var s=2;
- var puede declarar la misma variable repetidamente, ni let ni const pueden declarar la misma variable repetidamente
var c=2;
var c=3;
console.log(c);//3
let b;
let b;//Uncaught SyntaxError: Identifier 'b' has already been declared
const a=1;
const a=1;//Uncaught SyntaxError: Identifier 'a' has already been declared
- Para las variables de tipo compuesto , el nombre de la variable no apunta a los datos, sino a la dirección donde se encuentran los datos. El comando const solo garantiza que la dirección a la que apunta el nombre de la variable permanezca sin cambios, y no garantiza que los datos en la dirección permanezcan sin cambios.
const a=[];
a.push('javascript');
console.log(a);//['javascript']
a=['java'];//Uncaught TypeError: Assignment to constant variable.
Suplemento 1. Alcance a nivel de bloque
El comando let y el comando const de ES6 introducen el concepto de alcance a nivel de bloque, las ventajas del alcance a nivel de bloque:
- Evite que las variables internas sobrescriban las variables externas
- Evite filtrar variables de bucle utilizadas para contar como variables globales
- Permitir declaraciones de funciones en el alcance del bloque
ES5 estipula que las funciones solo se pueden declarar fuera del alcance de nivel superior y el alcance de la función, y no se pueden declarar en el alcance de nivel de bloque
if(true){
function func(){
}
}
try{
function func(){
}
}catch{
}
//上面两种函数声明在es5中都是非法的，但是浏览器没有遵守这一规定，还是支持在块级作用域中声明函数，因此以上两种情况实际都能运行，不会报错；但是在严格模式下，还是会报错；
'use strict'
if(true){
function func(){
}//报错
}
//ES6引入了块级作用域，明确允许在块级作用域中声明函数
'use strict'
if(true){
function func(){
}//不报错
}
//ES6还规定，在块级作用域中，函数声明的行为类似于let，在块级作用域之外不可引用；
//函数声明会提升到函数作用域头部；
//注意ES6的块级作用域允许函数只在使用大括号的情况下成立，如果未使用大括号，会报错
'use strict'
if(true){
function func1(){
}//不报错
}
if(true)
function func2(){
}//不报错
- ES6 permite el anidamiento arbitrario de ámbitos a nivel de bloque, y los ámbitos externos no pueden leer variables en los ámbitos internos
{
{
{
{
{
{
let i=1;}
console.log(i);//Uncaught ReferenceError: i is not defined
}}}}}
- Los ámbitos internos pueden definir variables con el mismo nombre que los ámbitos externos sin afectar
- Haga que la función de ejecución inmediata sea innecesaria y simplifique el código (reemplácelo directamente con el alcance a nivel de bloque {})
//立即执行函数
(function(){
var i=5;
})();
//块级作用域
{
let i=5;
}
Suplemento 2. ¿Por qué JavaScript no reporta error al asignar valores a variables que no han sido declaradas?
1. Consulta L/R
L es izquierda y R es derecha.
Mirando var a = 2, el motor js realizará LHS (el lado izquierdo de la operación de asignación) en a. El otro es RHS (el lado derecho de la operación de asignación)
La consulta RHS es simplemente para encontrar el valor de una variable. Si se encuentra, arrojará una excepción si no puede encontrarla. La
consulta LHS es para tratar de encontrar el contenedor en sí de la variable, para que se le pueda asignar un valor. Se crea en el ámbito global.
2. Para var a = 2, el motor de JavaScript lo compilará en su ámbito, y en este proceso, se dividirá en dos pasos
1. Primero, var a declara una nueva variable en su ámbito, que estará al principio, es decir, antes de que se ejecute el código. 2. A
continuación, a = 2 consultará (LHS) la variable a y le asignará ambas
LHS y RHS Comienzan a buscar en el ámbito actual hasta que alcanza el ámbito global, se detendrá independientemente de si se encuentra. Si
no se encuentra, RHS generará una excepción (ReferenceError).
Si no se logra, LHS creará automática e implícitamente una variable global.