자바스크립트의 스코프 체인

자바스크립트의 스코프 체인

---

Javascript에서 범위 체인을 읽었지만 이해가 되지 않았습니다. 범위 체인이 무엇인지, 그래픽이나 바보도 이해할 수 있는 것과 어떻게 작동하는지 알려줄 수 있는 사람이 있습니까? 나는 그것을 봤지만 이해할 수있는 것을 찾지 못했습니다 :(

---

범위 체인을 이해하려면 클로저가 작동하는 방식을 알아야 합니다.

클로저는 함수를 중첩할 때 형성되며 내부 함수는 부모 함수가 이미 실행된 후에도 외부 둘러싸는 함수에 있는 변수를 참조할 수 있습니다.

JavaScript는 로컬에서 전역으로 이동하면서 범위 체인을 가로질러 특정 컨텍스트 내에서 식별자를 확인합니다.

세 개의 중첩 함수가 있는 이 예제를 고려하십시오.

var currentScope = 0; // global scope
(function () {
  var currentScope = 1, one = 'scope1';
  alert(currentScope);
  (function () {
    var currentScope = 2, two = 'scope2';
    alert(currentScope);
    (function () {
      var currentScope = 3, three = 'scope3';
      alert(currentScope);
      alert(one + two + three); // climb up the scope chain to get one and two
    }());
  }());
}());

추천 읽기:

• 자바스크립트 클로저
• 폐쇄

---

ECMAScript(JS의 기반이 되는 핵심 언어)의 모든 함수 호출은 서로 개별적으로 실행되는 별도의 실행 컨텍스트를 생성합니다. 각 실행 컨텍스트 내부 this에서 해당 객체를 참조하며 기본적으로 함수가 연결된 모든 항목을 지정합니다.

function foo() {
    alert(this===window)
}

창이 'foo' 메서드를 소유한 객체이기 때문에 true로 경고합니다. 함수에 정의된 모든 변수는 해당 함수의 고유한 범위 체인인 환경을 통해 액세스됩니다.

function world() {
    var name = 'global';
    alert(name)
}

분명히 '글로벌'에 경고합니다.

function world() {
    var name = 'global';
    (function() {
        var name = 'country';
        alert(name)
    })();
    alert(name)
}

최신 예에서 첫 번째 경고가 호출될 때 Javascript는 식별자 name가 정의된 내부 함수의 범위 체인에서 확인 하므로 이를 파악 하기 위해 범위 체인을 조회할 필요가 없습니다.

두 번째 경고 호출 name에서도 동일한 컨텍스트와 경고 '전역'에 정의되어 있습니다.

function world() {
    var name = 'global';
    (function() { alert(name) })();
}

이 예에서 name식별자는 동일한 컨텍스트에서 정의되지 않으므로 이름이 정의된 외부 함수로 범위 체인을 이동해야 하며 전역으로 경고합니다.

참조:

• http://www.digital-web.com/articles/scope_in_javascript/
• http://www.jibbering.com/faq/faq_notes/closures.html

---

이것은 폐쇄에 관한 것입니다. 내부 범위에서 범위 외부 변수를 사용할 수 있습니다.

function get_inner_scope () {
    var outer = 'Outer variable value';
    return function () {
        alert(outer);
    }
}
f = get_inner_scope();
f(); // alerts Outer variable value

첫 번째 Google 링크를 통해 다른 샘플에 대한 자세한 정보: http://blogs.msdn.com/jscript/archive/2007/07/26/scope-chain-of-jscript-functions.aspx

---

나는 그것이 오래된 게시물이라는 것을 알고 있지만 여전히 개발자에게 도움이됩니다. 초보자가 범위 체인을 이해하는 데 더 친숙하기 때문에 조금 다른 방식으로 수행하고 싶었습니다. 다음은 수정된 코드 버전입니다.

var currentScope = 0; // global scope
function a () {
   var currentScope = 1, one = 'scope1';
   alert(currentScope);

  function b () {
      var currentScope = 2, two = 'scope2';
      alert(currentScope);

      function c () {
         var currentScope = 3, three = 'scope3';
         alert(currentScope);
  alert(one + two + three); // climb up the scope chain to get one and two
     }
     c();
  }
  b();
}
a();

---

평신도 용어로 설명된 Javascript의 범위 체인

Alex는 행복한 사람입니다.어느 좋은 날, 월급을 손에 들고 길을 가다가 강도를 당합니다.

나중에 그는 내일이 딸들의 등록금 1000달러를 지불하는 마지막 날이라는 것을 깨달았습니다.
그는 집으로 달려가서 400$의 저축을 찾았고 나머지(600$)에 대해 걱정했습니다. 순간적으로 번쩍이는 생각은 그의 아버지 Mathew에게서 일부를 빌리는 것입니다.
돈이 없는 가난한 목수 매튜는 상속받은 팔찌를 300달러에 팔아 아들 알렉스에게 빌려줍니다.
사회에서 평판이 좋은 알렉스는 즉시 은행에서 나머지 300달러를 받고 딸의 등록금을 제때 내준다.

Javascript의 범위 체인으로 돌아가기:
Alex- 자바스크립트 의 함수
Mathew-즉시 함수,Alex가 중첩되어 있습니다.
Mathews 부모-즉시 함수 Mathew가 중첩되어 있습니다.
Bank-Global 변수.

function Bank() {
    loan=300;
    Mathew();

    function Mathew() {
        mathew=300;
        Alex();

        function Alex() {
            savings:400;
            alert('I need some money');
        }

    }

}

Bank();

이 시점에서 Alex의 범위 체인은 다음과 같습니다. [savings:400]+[mathew:300]+[loan:300];

---

요약:

범위 체인은 자바스크립트에서 변수 이름의 값을 확인하는 데 사용됩니다. 범위 체인이 없으면 Javascript 엔진은 다른 범위에 정의된 변수가 여러 개 있는 경우 특정 변수 이름에 대해 어떤 값을 선택해야 하는지 알지 못합니다. 자바스크립트의 범위 체인은 어휘적으로 정의 되어 있습니다. 즉, 코드를 보고 범위 체인이 무엇인지 알 수 있습니다.

범위 체인의 맨 위에있는 전역 인 window브라우저 (의 오브젝트 global에가 NodeJS). 전역 범위 외에도 함수에는 자체 변수 범위가 있습니다. 범위 체인은 함수가 정의된 위치를 보고 결정할 수 있습니다.

변수를 해결할 때 내부 함수는 먼저 자체 범위를 확인합니다. 자체 범위에서 변수를 찾을 수 없으면 범위 체인을 올라가서 함수가 정의된 환경에서 변수 이름을 찾습니다. 이것은 다음과 같습니다.

따라서 이미지 예제 innerFoo에서 변수를 사용할 bar때 먼저 innerFoo(함수 본문 내의 코드) 범위 내에서 변수 를 찾으려고 시도합니다. 그런 다음 여기에서 찾지 못하면 범위 체인 을 foo. 으로 foo도 이름이 더 변수가 없습니다 bar. 따라서 범위 체인을 올라 이제 글로벌 범위를 살펴봅니다. 전역 범위에는 값이 10인 bar라는 이름의 변수 bar가 있습니다.

예시:

let foo = 1;
let bar = 1;


function test (bar) {
   
   return function innerTestFunc () {
      let foo = 10;
      
      console.log(foo, bar);
    }
  
}

const innerTestFunc1 = test(5);
const innerTestFunc2 = test(20);


innerTestFunc1();  // logs 10, 5

innerTestFunc2();  // logs 10, 20

위의 예에는 함수를 반환하는 함수가 있습니다. 먼저 이 함수를 변수 innerTestFunc1및 에 저장합니다 innerTestFunc2. 이것은 기본적으로 외부 환경의 범위 체인의 스냅샷인 클로저 를 생성 합니다.

그런 다음 함수가 실행될 때 함수는 변수 foo및 에 대한 값을 모두 필요로 합니다 bar. foo의 값은 innerTestFunc및 수준에서 확인할 수 있으며 둘 다에 대해 10입니다. 10은 이미 에서 발견 innerFoo되었으므로 foo에 대한 범위 체인을 올라갈 필요가 없습니다.

의 경우 bar변수 함수는에서 찾을 수 없습니다 innerFoo. 따라서 범위 체인을 올라갈 것입니다. 먼저 bar함수 에서 변수 를 만나 test므로 값을 bar테스트 함수(이 예에서는 5, 20)에 있는 값으로 해석합니다 .

참조URL : https://stackoverflow.com/questions/1484143/scope-chain-in-javascript