ES6의 let과 closure에 대한 자세한 설명

이 글은 주로 ES6의 let과 closure에 대한 심층적인 이해를 소개하고 있습니다.

이 글에서는 ES6의 let과 closure에 대한 심층적인 이해를 소개하고 모든 사람과 공유합니다. 자세한 내용은 다음과 같습니다.

이 글을 시작하기 전에 코드를 살펴보겠습니다.

for(var i=0;i<10;i++){
  arr[i]=function(){
    return i;
  }
}
console.log(arr[3]());//10

분명히 이 글은 다음과 같습니다. 코드는 10을 출력하고 우리가 기대한 것을 반환하지 않습니다. 3. 이유도 매우 간단합니다(js 변수 승격). 함수가 호출될 때 전역 범위에서 i에 액세스합니다. 전역 변수 i=10;

ES5 표준에서는 예상되는 3을 반환하려고 합니다. 일반적인 접근 방식도 매우 간단합니다. 이는 배열의 각 함수가 별도의 범위를 갖도록 하는 것입니다. 다음과 같은 즉시 실행 함수(js에는 블록 수준 범위가 없으며 함수 범위만 구별되고 전역 범위임):

var array=[];
for(var i=0;i<10;i++){
  array[i]=(function(i){
  return function(){
    return i;
    }
  })(i);
}
console.log(array[3]());//3

이런 식으로 배열의 각 함수는 즉시 실행되는 함수의 함수 범위에 있습니다. . 즉시 실행되는 함수는 i에 전달됩니다. 실제로 for 루프는 다음 코드를 실행합니다.

  array[0]=(function(i){
  return function(){
    return i;
    }
  })(0);
  array[1]=(function(i){
  return function(){
    return i;
    }
  })(1);
  array[2]=(function(i){
  return function(){
    return i;
    }
  })(2);
……

이런 식으로 숫자 그룹의 각 함수는 별도의 함수 범위에 해당합니다(함수는 즉시 실행됩니다). 여기서는 10개의 함수 범위가 생성됩니다. 이 함수 범위의 i 값은 실행 중에 전달된 0입니다. ... 9.

array[3]();을 실행할 때 함수가 액세스하는 i 값은 전역 i 값이 아닌 해당 즉시 실행 함수 범위를 사용하여 예상한 효과를 얻습니다.

그렇지만 클로저에 대해 간단히 이야기하자면, 클로저는 리소스를 해제하지 않은 스택 영역인 클로저로 이해될 수 있으며, 스택 영역의 변수는 활성화된 상태입니다. 위의 예에서는 for 루프가 실행될 때 시스템이 메모리를 할당합니다. 실행 중에 즉시 실행 함수의 변수 i가 내부 함수에 의해 참조되는 것으로 감지됩니다. 스택 영역은 메모리에서 해제되지 않습니다. 함수((배열 요소)가 호출되면 범위 체인에 따라 가장 먼저 액세스되는 것은 상위 범위의 변수입니다(함수 즉시 실행).

여기서는 클로저에 대해 자세히 소개하지 않습니다. 클로저에 대해 더 알고 싶다면 "Javascript 고급 프로그래밍" 7장을 읽어보세요.

앞서 언급했듯이 js에는 블록 수준 범위가 없으며 전역 범위와 전역 범위만 있습니다. ES6에서는 실제로 새로운 블록 수준 범위를 js에 추가합니다. 예를 들어 다음 코드는 각 배열의 함수가 함수 범위를 만들지 않고도 해당 범위의 값에 액세스할 수 있도록 허용합니다.

let arr=[];
for(let i=0;i<10;i++){
  arr[i]=function(){
    return i;
  }
}
console.log(arr[3]());//3

let arr=[];
for(let i=0;i<10;i++){
  let k=i;
  arr[k]=function(){
    return k;
  }
}
console.log(arr[3]());//3

 // 定义常量
const REG_GET_INPUT = /^\d{1,3}$/;

// 定义配置项
let config = {
 isDev : false,
 pubDir: './admin/'
}

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let CleanWebpackPlugin = require('clean-webpack-plugin');

vue2에서 http 요청 문제를 해결하기 위해 axios를 사용하는 방법에 대한 자세한 설명(자세한 튜토리얼)

vue 프로젝트에 하이차트 차트를 도입하는 방법은 무엇입니까?

Angular에서 @HostBinding() 및 @HostListener() 사용(자세한 튜토리얼)

위 내용은 ES6의 let과 closure에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!