JavaScript 범위 및 클로저에 대한 심층적인 이해

범위

범위는 변수와 함수의 범위입니다. JavaScript의 함수 내에서 선언된 모든 변수는 항상 함수 본문 내에서 볼 수 있습니다. JavaScript에는 전역 범위와 로컬 범위가 있지만 블록 수준 범위, 로컬 범위는 없습니다. 변수는 전역 변수보다 우선순위가 높습니다. JavaScript에서 범위의 "숨겨진 규칙"을 이해하기 위해 몇 가지 예를 사용하겠습니다(이는 프론트엔드 인터뷰에서 자주 묻는 질문이기도 합니다).

1. 변수를 미리 선언하세요
예 1:

var scope="global";
function scopeTest(){
  console.log(scope);
  var scope="local" 
}
scopeTest(); //undefined

로그인 후 복사

여기서의 출력은 정의되지 않았으며 오류가 보고되지 않습니다. 이는 앞서 언급한 함수 내의 선언이 항상 함수 본문에 표시되기 때문입니다.

var scope="global";
function scopeTest(){
  var scope;
  console.log(scope);
  scope="local" 
}
scopeTest(); //local

로그인 후 복사

var를 잊어버리면 해당 변수가 전역 변수로 선언됩니다.

2. 블록 수준 범위 없음

일반적으로 사용되는 다른 언어와 달리 Javascript에는 블록 수준 범위가 없습니다.

function scopeTest() {
  var scope = {};
  if (scope instanceof Object) {
    var j = 1;
    for (var i = 0; i < 10; i++) {
      //console.log(i);
    }
    console.log(i); //输出10
  }
  console.log(j);//输出1

}

로그인 후 복사

JavaScript에서 변수의 범위는 함수 수준입니다. 즉, 함수의 모든 변수는 함수 전체에 걸쳐 정의됩니다. 이는 또한 주의를 기울이지 않으면 직면하게 될 몇 가지 "숨겨진 규칙"을 가져옵니다.

var scope = "hello";
function scopeTest() {
  console.log(scope);//①
  var scope = "no";
  console.log(scope);//②
}

로그인 후 복사

첫 번째의 값이 정의되지 않은 것으로 나타났습니다. 이는 이미 전역 변수의 값을 정의한 것입니다. 실제로 위 코드는 다음과 같습니다.

var scope = "hello";
function scopeTest() {
  var scope;
  console.log(scope);//①
  scope = "no";
  console.log(scope);//②
}

로그인 후 복사

미리 선언하고 전역 변수는 지역 변수보다 우선순위가 낮습니다. 이 두 가지 규칙에 따르면 undefine이 출력되는 이유를 이해하는 것은 어렵지 않습니다.

스코프 체인

JavaScript에서는 각 함수마다 고유한 실행 컨텍스트가 있습니다. 이 환경에서 코드가 실행되면 변수 개체의 범위 체인이 생성됩니다. 범위 체인은 개체 목록 또는 개체 체인입니다. 가변 개체에.
범위 체인의 프런트 엔드는 현재 코드 실행 환경의 변수 개체로, 종종 "활성 개체"라고 합니다. 변수 검색은 개체에 변수 속성이 포함된 경우 시작됩니다. 그렇지 않은 경우 전역 개체를 찾을 때까지 상위 범위 체인을 계속 검색합니다.

스코프 체인을 단계별로 검색하는 것도 프로그램 성능에 영향을 미칩니다. 변수 스코프 체인이 길어질수록 성능에 미치는 영향도 커집니다. 이것이 우리가 사용을 기피하는 주된 이유 중 하나입니다. 전역 변수.

폐업

기본 개념
범위는 클로저를 이해하기 위한 전제 조건입니다. 클로저는 외부 범위의 변수가 항상 현재 범위 내에서 액세스될 수 있음을 의미합니다.

function createClosure(){
  var name = "jack";
  return {
    setStr:function(){
      name = "rose";
    },
    getStr:function(){
      return name + ":hello";
    }
  }
}
var builder = new createClosure();
builder.setStr();
console.log(builder.getStr()); //rose:hello

로그인 후 복사

위의 예는 함수에서 두 개의 클로저를 반환합니다. 두 클로저는 모두 외부 범위에 대한 참조를 유지하므로 외부 함수의 변수는 호출되는 위치에 관계없이 항상 액세스할 수 있습니다. 함수 내부에 정의된 함수는 외부 함수의 활성 개체를 자체 범위 체인에 추가합니다. 따라서 위의 예에서 외부 함수의 속성은 내부 함수를 통해 액세스할 수 있습니다. 개인 변수를 시뮬레이션합니다.

참고: 클로저에는 추가 함수 범위가 있으므로(내부 익명 함수는 외부 함수의 범위를 갖습니다) 클로저는 다른 함수보다 더 많은 메모리 공간을 차지합니다.

클로저의 변수

클로저를 사용할 때 범위 체인 메커니즘의 영향으로 인해 클로저는 내부 함수의 마지막 값만 얻을 수 있습니다. 이에 대한 부작용은 내부 함수가 루프에 있는 경우 변수는 항상 마지막 값입니다.

  //该实例不太合理，有一定延迟因素，此处主要为了说明闭包循环中存在的问题
  function timeManage() {
    for (var i = 0; i < 5; i++) {
      setTimeout(function() {
        console.log(i);
      },1000)
    };
  }

로그인 후 복사

위 프로그램은 예상한 대로 1~5의 숫자를 입력하지 않고 5번을 모두 출력합니다. 또 다른 예를 살펴보겠습니다.

function createClosure(){
  var result = [];
  for (var i = 0; i < 5; i++) {
    result[i] = function(){
      return i;
    }
  }
  return result;
}

로그인 후 복사

createClosure()[0]() 호출의 반환 값은 5이고, createClosure()[4]()의 반환 값은 여전히 5입니다. 위의 두 가지 예를 통해 루프와 함께 내부 함수를 사용할 때 클로저가 갖는 문제를 볼 수 있습니다. 각 함수의 범위 체인은 외부 함수(timeManage, createClosure)에 대한 활성 개체를 저장하므로 모두 동일한 변수를 참조합니다. i. 외부 함수가 반환되면 이때 i의 값은 5이므로 각 내부 함수의 i 값도 5이다.
그렇다면 이 문제를 해결하는 방법은 무엇입니까? 익명 래퍼(익명 자체 실행 함수 표현식)를 통해 예상 결과가 반환되도록 강제할 수 있습니다.

function timeManage() {
  for (var i = 0; i < 5; i++) {
    (function(num) {
      setTimeout(function() {
        console.log(num);
      }, 1000);
    })(i);
  }
}

로그인 후 복사

또는 클로저 익명 함수에서 익명 함수 할당을 반환합니다.

function timeManage() {
  for (var i = 0; i < 10; i++) {
    setTimeout((function(e) {
      return function() {
        console.log(e);
      }
    })(i), 1000)
  }
}
//timeManager();输出1,2,3,4，5
function createClosure() {
  var result = [];
  for (var i = 0; i < 5; i++) {
    result[i] = function(num) {
      return function() {
        console.log(num);
      }
    }(i);
  }
  return result;
}
//createClosure()[1]()输出1；createClosure()[2]()输出2

로그인 후 복사

无论是匿名包裹器还是通过嵌套匿名函数的方式，原理上都是由于函数是按值传递，因此会将变量i的值复制给实参num，在匿名函数的内部又创建了一个用于返回num的匿名函数，这样每个函数都有了一个num的副本，互不影响了。

闭包中的this

在闭包中使用this时要特别注意，稍微不慎可能会引起问题。通常我们理解this对象是运行时基于函数绑定的，全局函数中this对象就是window对象，而当函数作为对象中的一个方法调用时，this等于这个对象（TODO 关于this做一次整理）。由于匿名函数的作用域是全局性的，因此闭包的this通常指向全局对象window：

var scope = "global";
var object = {
  scope:"local",
  getScope:function(){
    return function(){
      return this.scope;
    }
  }
}

로그인 후 복사

调用object.getScope()()返回值为global而不是我们预期的local，前面我们说过闭包中内部匿名函数会携带外部函数的作用域，那为什么没有取得外部函数的this呢？每个函数在被调用时，都会自动创建this和arguments，内部匿名函数在查找时，搜索到活跃对象中存在我们想要的变量，因此停止向外部函数中的查找，也就永远不可能直接访问外部函数中的变量了。总之，在闭包中函数作为某个对象的方法调用时，要特别注意，该方法内部匿名函数的this指向的是全局变量。

幸运的是我们可以很简单的解决这个问题，只需要把外部函数作用域的this存放到一个闭包能访问的变量里面即可：

var scope = "global";
var object = {
  scope:"local",
  getScope:function(){
    var that = this;
    return function(){
      return that.scope;
    }
  }
}
object.getScope()()返回值为local。

로그인 후 복사

内存与性能

由于闭包中包含与函数运行期上下文相同的作用域链引用，因此，会产生一定的负面作用，当函数中活跃对象和运行期上下文销毁时，由于必要仍存在对活跃对象的引用，导致活跃对象无法销毁，这意味着闭包比普通函数占用更多的内存空间，在IE浏览器下还可能会导致内存泄漏的问题，如下：

 function bindEvent(){
  var target = document.getElementById("elem");
  target.onclick = function(){
    console.log(target.name);
  }
 }

로그인 후 복사

上面例子中匿名函数对外部对象target产生一个引用，只要是匿名函数存在，这个引用就不会消失，外部函数的target对象也不会被销毁，这就产生了一个循环引用。解决方案是通过创建target.name副本减少对外部变量的循环引用以及手动重置对象：

 function bindEvent(){
  var target = document.getElementById("elem");
  var name = target.name;
  target.onclick = function(){
    console.log(name);
  }
  target = null;
 }

로그인 후 복사

闭包中如果存在对外部变量的访问，无疑增加了标识符的查找路径，在一定的情况下，这也会造成性能方面的损失。解决此类问题的办法我们前面也曾提到过：尽量将外部变量存入到局部变量中，减少作用域链的查找长度。

总结：闭包不是javascript独有的特性，但是在javascript中有其独特的表现形式，使用闭包我们可以在javascript中定义一些私有变量，甚至模仿出块级作用域，但闭包在使用过程中，存在的问题我们也需要了解，这样才能避免不必要问题的出现。