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

이전처럼 함수 범위를 구성하지 않고도 원하는 효과를 얻을 수 있다는 것을 알 수 있습니다. 블록 수준 범위를 도입하면 for 루프 뒤에 있는 {}를 더 쉽게 작성하고 이해할 수 있습니다. 위의 코드는 블록 수준 범위입니다. 루프할 때마다 반환된 각 함수는 해당 블록 범위의 변수를 참조합니다. 좀 더 생생하게 보이도록 코드를 약간 변경합니다.

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

블록 범위가 도입된 이후에 볼 수 있습니다. ES6에서는 클로저 함수를 구성하는 것이 더 편리합니다.

여기에서는 let과 const에 대해 많이 설명하지 않겠습니다. 이전에 ES6를 접해 본 적이 없다면 Ruan Yifeng 선생님의 "ES6 표준 소개"를 읽어 보시기 바랍니다.

여기서 한 가지 더 언급할 것은 개념을 읽은 후 많은 사람들의 첫인상은 "const는 불변의 값을 나타내고, 원래 var를 대체하는 데 사용됩니다."일 때 let을 사용하는 대신 let으로 간주되는 경우가 많습니다. 변수를 선언하면 다음 코드를 작성할 가능성이 높습니다.

 // 定义常量
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');

const의 정의는 재할당할 수 없는 값으로, 정의에서 const로 정의된 객체와는 다릅니다. 속성은 나중에 수정할 수 있습니다.

실제로 상수, 구성 항목, 참조 구성 요소, 정의된 "대부분의" 중간 변수 등을 포함하여 사용 시나리오가 매우 광범위하므로 모두 cosnt로 정의해야 합니다. 반대로, let에 관한 한 사용 시나리오는 상대적으로 적어야 합니다. 우리는 이를 루프(for, while 루프)와 재정의해야 하는 소수의 변수에서만 사용할 것입니다.

추측: 실행 효율성 측면에서 const는 재할당이 불가능하므로 정적 구문 분석 측면에서 더 많은 최적화를 수행할 수 있어 실행 효율성이 높아집니다.

그래서 위 코드에서 let을 사용하는 모든 부분은 실제로 const를 사용해야 합니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

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

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

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

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