js에서 블록 수준 범위와 함수 범위의 차이점은 무엇입니까? (코드 분석)

이 기사에서 제공하는 내용은 js의 블록 수준 범위와 함수 범위의 차이점에 관한 것입니다. (코드 분석)에는 특정 참고 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

블록 스코프가 왜 필요한가요?

ES5에는 함수 범위가 아닌 전역 범위만 있고 블록 수준 범위가 없으므로 불합리한 시나리오가 많이 발생합니다.

첫 번째 시나리오에서는 내부 변수가 외부 변수를 덮어쓸 수 있습니다.

var tmp = new Date();

function f(){
  console.log(tmp);
  if(false){
    var tmp = "hello";
  }
}

f(); // undefined

위 코드에서 f 함수가 실행된 후 출력 결과는 정의되지 않음입니다. 변수 승격으로 인해 내부 tmp 변수가 외부 tmp 변수를 덮어쓰게 되기 때문입니다. f执行后，输出结果为undefined，原因在于变量提升，导致内层的tmp变量覆盖了外层的tmp变量。

第二种场景，用来技术的循环变量泄露为全局变量：

var s = "hello";
for(var i=0;i<s.length;i++){
  console.log(s[i]);
}

console.log(i); // 5

上面代码中，变量i只用来控制循环，但是循环结束后，它并没有消失，泄露成了全局变量。

ES6的块级作用域

let实际上为JavaScript新增了块级作用域

function f1(){
  let n = 5;
  if(true){
    let n = 10;
  }
  console.log(n); // 5
}

上面的函数有2个代码块，都声明了变量n，运行后输出5。这表示外层代码块不受内层代码块的影响。如果使用var定义变量n

두 번째 시나리오에서는 기술에 사용된 루프 변수가 전역 변수로 유출됩니다.

{
    {let insane = "hello"}
    console.log(insance); // 报错
}

위 코드에서 변수 i는 루프를 제어하는 ​​데에만 사용되지만 사라지지는 않습니다. 루프가 끝난 후 전역 변수로 유출됩니다.

ES6의 블록 수준 범위

let는 실제로 JavaScript에 새로운 블록 수준 범위를 추가합니다

{
    let a = "hello";
    {let a = "hello"}
}

위 함수에는 2개의 코드 블록이 있으며, 둘 다 변수 n< /code를 선언합니다. >, 실행 후 5를 출력합니다. 이는 외부 코드 블록이 내부 코드 블록의 영향을 받지 않음을 의미합니다. <code>var를 사용하여 변수 n을 정의하는 경우 최종 출력 값은 10입니다.

외부 스코프는 내부 ​​스코프의 변수를 읽을 수 없습니다:

// IIFE写法
(function(){
  var tmp = ...;
  ...
}());

// 块级作用域写法
{
  let tmp = ...;
  ...
}

내부 스코프는 외부 스코프에서 동일한 이름의 변수를 정의할 수 있습니다:

function f(){
    ...
    swap(var_a,var_b);
    (function swap(a,b){
        var tmp;
        tmp = a;
        a = b;
        b=tmp;
    })(var_a,var_b);
}

블록 수준 스코프의 출현으로 실제로 널리 사용되었습니다. 함수 표현식(IIFE)은 더 이상 필요하지 않습니다: ​​

function f(){
    let a,b;
    ...
    {
        let tmp;
        tmp = a;
        a = b;
        b=tmp;
    }
}

ES6 이전에는 변수의 범위가 함수 범위였습니다. 때로는 일부 임시 변수가 함수 내에서 로컬로 필요했습니다. 왜냐하면 블록 수준 범위가 없었기 때문입니다. IIEF에서는 중복된 임시 변수를 도입하지 않고도 원하는 효과를 얻을 수 있습니다. 블록스코프 도입 이후 IIEF는 당연히 불필요해졌습니다! rrreee
위 코드에서와 같이 tmp는 IIFE에 캡슐화되어 있으므로 상위 수준 기능을 오염시키지 않으며 블록 수준 범위를 사용하면 IIEF에 캡슐화할 필요가 없으며 블록에 직접 넣기만 하면 됩니다. 수준. rrreee

간단히 말해서 익명 함수를 즉시 실행하는 목적은 블록 수준 범위를 설정하는 것입니다. 이제 실제 블록 수준 범위가 있으므로 익명 함수를 즉시 실행할 필요가 없습니다. 관련 권장 사항:

🎜🎜js의 범위 및 함수 폐쇄 예시 설명🎜🎜🎜🎜🎜PHP{} 블록 수준 범위 세부 설명🎜🎜

위 내용은 js에서 블록 수준 범위와 함수 범위의 차이점은 무엇입니까? (코드 분석)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!