es6 if로 래핑된 변수 계산 블록 내. es6에는 새로운 블록 수준 범위가 있습니다. "{ }"로 래핑된 코드는 블록 수준 범위이며, if 문과 함수의 for 루프에 있는 코드는 모두 블록에 속합니다. 레벨 범위이며 블록 내에서 계산됩니다. es6에서는 블록 수준 범위가 임의로 중첩될 수 있습니다. 외부 범위는 내부 범위의 변수를 읽을 수 없습니다. 내부 범위는 외부 범위에서 동일한 이름의 변수를 정의할 수 있습니다.
이 튜토리얼의 운영 환경: Windows 7 시스템, ECMAScript 버전 6, Dell G3 컴퓨터.
블록 수준 범위는 ES6
의 새로운 기능입니다. 블록 범위는 { }
로 래핑됩니다. if
문의 { }
와 for
문도 속합니다. 블록 범위에. ES6
中新增了块级作用域。块作用域由 { }
包裹,if
语句和 for
语句里面的 { }
也属于块作用域。
函数中的{},if语句,for循环,也是属于块级作用域,let与const定义的变量只能在作用域有效。
第一种场景:内部变量会覆盖外部变量
var time = new Date() function fx () { console.log(time) // undefined if (false) { var time = 'hello' } } fx()
{ var a = 1 console.log(a) // 1 } console.log(a) // 1 // 通过var定义的变量可以跨块作用域访问到。
第二种场景:用来计数的循环变量泄漏为全局变量
for
循环中的用 var
定义的变量在外部作用域可以访问
for (var i = 0; i < 3; i++) { } for (let j = 0; j < 3; j++) { } // 3 console.log(i); // Uncaught ReferenceError: j is not defined console.log(j);
if
语句中 var
定义的变量在外部作用域可以访问
if(true)
与if (false)
的区别
if(true)
中的赋值语句会被执行,所以 a
打印出来是 3
if(false)
中的赋值语句不会被执行,但声明的变量 var b
会由于变量提升,提升到作用域的顶层,所以打印出来是 undefined
if (true) { var a = 3 } if (false) { var b = 3 } // 3 console.log(a); // undefined console.log(b); if (true) { let c = 3 } // Uncaught ReferenceError: c is not defined console.log(c);
function fxFn () { // 这是一个块级作用域 let fx = 'fx is a great girl' if (true) { // 这是一个块级作用域 let fx = 'fx is 18 years old' } console.log(fx) // fx is a great girl } fxFn() // 块级作用域之间相互不影响
ES6 允许块级作用域的任意嵌套。
{{{{ { let fnn = 'Hello' } console.log(fnn); // 报错 }}}};
上面代码使用了一个五层的块级作用域,每一层都是一个单独的作用域。第四层作用域无法读取第五层作用域的内部变量。
{{{{ let fnn = 'Hello'; { let fnn = 'Hello' } }}}};
块级作用域的出现,实际上使得获得广泛应用的匿名立即执行函数表达式(匿名 IIFE
)不再必要了。
// IIFE 写法 (function () { var tmp = '...'; // ... }()); // 块级作用域写法 { let tmp = '...'; // ... }
ES5
规定,函数只能在顶层作用域和函数作用域之中声明,不能在块级作用域声明。
// 情况一 if (true) { function f() {} } // 情况二 try { function f() {} } catch(e) { // ... }
上面两种函数声明,根据 ES5
的规定都是非法的。
但是,浏览器没有遵守这个规定,为了兼容以前的旧代码,还是支持在块级作用域之中声明函数,因此上面两种情况实际都能运行,不会报错。
ES6
引入了块级作用域,明确允许在块级作用域之中声明函数。ES6
规定,块级作用域之中,函数声明语句的行为类似于 let
,在块级作用域之外不可引用。
function f() { console.log('I am outside!'); } (function () { if (false) { // 重复声明一次函数f function f() { console.log('I am inside!'); } } f(); }());
上面代码在 ES5
中运行,会得到“I am inside!
”,因为在 if
内声明的函数 f
会被提升到函数头部,实际运行的代码如下。
// ES5 环境 function f() { console.log('I am outside!'); } (function () { function f() { console.log('I am inside!'); } if (false) { } f(); }());
ES6
就完全不一样了,理论上会得到“I am outside!
”。因为块级作用域内声明的函数类似于 let
,对作用域之外没有影响。
但是,如果你真的在 ES6
浏览器中运行一下上面的代码,是会报错的,这是为什么呢?
// 浏览器的 ES6 环境 function f() { console.log('I am outside!'); } (function () { if (false) { // 重复声明一次函数f function f() { console.log('I am inside!'); } } f(); }()); // Uncaught TypeError: f is not a function
上面的代码在 ES6
浏览器中,都会报错。
原来,如果改变了块级作用域内声明的函数的处理规则,显然会对老代码产生很大影响。为了减轻因此产生的不兼容问题,ES6 规定,浏览器的实现可以不遵守上面的规定,有自己的行为方式
var
,即会提升到全局作用域或函数作用域的头部。注意,上面三条规则只对 ES6
的浏览器实现有效,其他环境的实现不用遵守,还是将块级作用域的函数声明当作 let
处理。
根据这三条规则,浏览器的 ES6
环境中,块级作用域内声明的函数,行为类似于 var
// 浏览器的 ES6 环境 function f() { console.log('I am outside!'); } (function () { var f = undefined; if (false) { function f() { console.log('I am inside!'); } } f(); }()); // Uncaught TypeError: f is not a function
// 块级作用域内部的函数声明语句,建议不要使用 { let a = 'secret'; function f() { return a; } } // 块级作用域内部,优先使用函数表达式 { let a = 'secret'; let f = function () { return a; }; }🎜두 번째 시나리오: 누수를 전역 변수로 계산하는 데 사용되는 루프 변수 🎜🎜
for
루프에서 var
로 정의된 변수는 if
문에서 외부 범위🎜// 第一种写法,报错 if (true) let x = 1; // 第二种写法,不报错 if (true) { let x = 1; }🎜
var에서 액세스할 수 있습니다. 코드로 정의됨>은 외부 범위에서 액세스할 수 있습니다🎜🎜🎜<code>if(true)
와 if(false)
🎜🎜 if(true)
의 할당문이 실행되므로 a
는 3
if(false)로 출력됩니다. )
안의 할당문은 실행되지 않으나 선언된 변수 var b
는 변수 승격으로 인해 스코프의 최상위 수준으로 승격되므로 로 출력됩니다. 정의되지 않음
// 不报错 'use strict'; if (true) { function f() {} } // 报错 'use strict'; if (true) function f() {}🎜🎜🎜블록 수준 범위(ES6은 블록 수준 범위를 구현하기 위해 let 및 const 변수 제공)🎜🎜rrreee🎜ES6에서는 임의 허용 블록 수준 범위 세트 삽입. 🎜rrreee🎜위 코드는 5단계 블록 수준 범위를 사용하며 각 수준은 별도의 범위입니다. 네 번째 수준 범위는 다섯 번째 수준 범위의 내부 변수를 읽을 수 없습니다. 🎜
IIFE
)이 더 이상 필요하지 않게 되었습니다. 🎜rrreee🎜🎜🎜블록 수준 범위 및 함수 선언🎜🎜🎜ES5
에서는 블록이 아닌 최상위 범위와 함수 범위에서만 함수를 선언할 수 있다고 규정합니다. -레벨 범위 선언. 🎜rrreee🎜위 두 함수 선언은 ES5
에 따라 불법입니다. 🎜🎜그러나 브라우저는 이 규칙을 따르지 않습니다. 이전 코드와 호환되기 위해 여전히 블록 수준 범위에서 함수 선언을 지원하므로 위의 두 가지 상황은 실제로 오류 보고 없이 실행될 수 있습니다. 🎜🎜ES6
에서는 블록 수준 범위를 도입하여 블록 수준 범위에서 함수를 선언할 수 있도록 명시적으로 허용했습니다. ES6
는 블록 수준 범위에서 함수 선언문이 let
처럼 동작하고 블록 수준 범위 외부에서 참조될 수 없다고 규정합니다. 🎜rrreee🎜위 코드를 ES5
에서 실행하면 if
내에 함수가 선언되어 있으므로 "<code>I am inside!
"가 표시됩니다. > f는 함수의 선두로 승격되며 실제 실행되는 코드는 다음과 같습니다. 🎜rrreee🎜ES6
는 완전히 다릅니다. 이론적으로는 "나는 밖에 있습니다!
"라는 메시지가 표시됩니다. 블록 수준 범위에서 선언된 함수는 let
와 유사하므로 범위 외부에는 아무런 영향을 미치지 않습니다. ES6
브라우저에서 위 코드를 실행하면 오류가 발생하는 이유는 무엇일까요? 🎜rrreee🎜위 코드는 ES6
브라우저에서 오류를 보고합니다. 🎜🎜블록 수준 범위에 선언된 함수의 처리 규칙이 변경되면 분명히 이전 코드에 큰 영향을 미칠 것으로 나타났습니다. 이로 인한 비호환성 문제를 완화하기 위해 ES6에서는 브라우저 구현이 위 규정을 준수할 수 없으며 고유한 동작을 가질 수 있도록 규정합니다.🎜var
와 유사합니다. 즉, 전역 범위 또는 함수 범위의 선두로 승격됩니다. ES6
의 브라우저 구현에만 유효합니다. 다른 환경의 구현은 여전히 블록 수준 함수 선언을 준수할 필요가 없습니다. let
핸들로. 🎜🎜이 세 가지 규칙에 따르면 브라우저의 ES6
환경에서 블록 수준 범위에 선언된 함수는 var
에 선언된 변수와 유사하게 동작합니다. 위 예제에서 실제로 실행되는 코드는 다음과 같습니다. 🎜rrreee🎜환경에 따른 동작이 너무 다르다는 점을 고려하면 블록 수준 범위에서 함수를 선언하는 것은 피해야 합니다. 꼭 필요한 경우에는 함수 선언문이 아닌 함수 표현식으로 작성해야 합니다. 🎜// 块级作用域内部的函数声明语句,建议不要使用 { let a = 'secret'; function f() { return a; } } // 块级作用域内部,优先使用函数表达式 { let a = 'secret'; let f = function () { return a; }; }
如果没有大括号,JavaScript
引擎就认为不存在块级作用域。
// 第一种写法,报错 if (true) let x = 1; // 第二种写法,不报错 if (true) { let x = 1; }
上面代码中,第一种写法没有大括号,所以不存在块级作用域,而let只能出现在当前作用域的顶层,所以报错。第二种写法有大括号,所以块级作用域成立。
函数声明也是如此,严格模式下,函数只能声明在当前作用域的顶层。
// 不报错 'use strict'; if (true) { function f() {} } // 报错 'use strict'; if (true) function f() {}
【推荐学习:javascript视频教程】
위 내용은 블록 내부로 간주되는 경우 es6에 래핑된 변수가 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!