JavaScript 도메인에 대한 간단한 이해

역할 영역은 일반적으로 지정된 시간 내에 변수가 코드에 존재하는 것을 가리킨다.역할 영역에 대한 이해가 부족하면 우울한 디버깅 체험을 초래할 수 있다.작용역의 개념은 우리 코드에서 어떤 확실한 함수나 변수, 코드의 상하문과 실행 환경에 접근할 수 있는지에 관한 것이다.
JavaScript에는 전역 및 로컬 도메인의 두 가지 유형이 있습니다.
전역 역할 영역
첫 번째 역할 영역은 전역 역할 영역이다.그것은 정의하기 쉽다.만약 변수나 함수가 _전체적인_,그러면 프로그램의 어느 곳에서든 접근할 수 있습니다.브라우저에서 전역 역할 영역은 윈도우 대상입니다.함수 밖에서 변수를 설명하면, 이 변수는 전역 대상에 존재합니다.예:

var x = 9;

이 변수가 정의되면 윈도우로 인용될 수 있습니다.x, 전역 대상에 존재하기 때문에, 우리는 간단하게 x로 인용할 수 있습니다.
국부 작용역
JavaScript는 각 함수체에 로컬 도메인을 생성할 수도 있습니다.예:

function myFunc() {
  var x = 5;
}

myFunc();

console.log( x ); // ReferenceError: x is not defined

x는 myFunc()에서 초기화되기 때문에 myFunc()에서만 접근할 수 있습니다. 만약 우리가 myFunc() 밖에서 x에 접근하려고 한다면 인용 오류가 발생합니다.
주의하다
var 키워드를 사용하여 변수를 설명하는 것을 잊어버리면, 이 변수는 자동으로 전역 변수가 됩니다.그래서 이 코드는 실행할 수 있습니다.

function myFunc() {
  x = 5;
}

myFunc();

console.log( x ); // 5

이것은 나쁜 생각이다.전역 변수의 값은 프로그램의 모든 부분이나 다른 스크립트에 의해 변경될 수 있습니다.이것은 발생할 것을 기대하지 않는다. 왜냐하면 그것은 예측할 수 없는 부작용을 초래하기 때문이다.
현재 호출 표현식(IIFE)은 전역 변수를 피하는 방법을 제공합니다.jQuery와 같은 JavaScript 라이브러리에서 자주 사용하는 방식을 볼 수 있습니다.

(function() {
  var jQuery = { /* All my methods go here. */ };
  window.jQuery = jQuery;
})();

모든 것을 하나의 함수에 포함하고 이 함수를 즉시 호출합니다. 이것은 함수의 모든 변수가 _에 귀속된다는 것을 의미합니다로컬 도메인_중.함수 끝 부분에서 jQuery 대상을 전역 대상 윈도우에 귀속시켜 방법과 속성을 공개할 수 있습니다.함수 표현식을 즉시 호출하는 방법에 대한 자세한 내용은 Ben Alman의 글을 참조하십시오Immediately-Invoked Function Expression .
로컬 역할 영역이 함수를 통해 작동하므로 다른 함수에 정의된 함수는 외부 함수의 변수에 액세스할 수 있습니다.

function outer() {
  var x = 5;

  function inner() {
    console.log( x );
  }

  inner(); // 5
}

하지만..outer () 함수는 접근할 수 없습니다.inner () 함수에 정의된 모든 변수입니다.

function outer() {
  var x = 5;

  function inner() {
    console.log( x );
    var y = 10;
  }

  inner(); // 5

  console.log( y ); // ReferenceError: y is not defined
}

또한 하나의 함수에서 var 키워드로 정의되지 않은 변수는 이 함수의 국부 변수가 아닙니다. 자바스크립트는 역할 영역 체인을 위로 옮겨다니며 (마지막으로 윈도우 대상에 도착) 이전에 정의된 변수를 찾습니다.만약 이 변수가 정의되지 않는다면, 전체 국면에서 이 변수를 정의할 것이다. 이렇게 하면 의외의 결과를 초래할 것이다.

// Functions have access to variables defined in the same scope.

var foo = "hello";

var sayHello = function() {
  console.log( foo );
};

sayHello(); // "hello"

console.log( foo ); // "hello"

같은 이름의 변수는 서로 다른 작용 영역에 다른 값을 저장할 수 있습니다.

var foo = "world";

var sayHello = function() {
  var foo = "hello";
  console.log( foo );
};

sayHello(); // "hello"

console.log( foo ); // "world"

하나의 함수에서 외부 작용역에 정의된 변수를 인용하면 함수는 이 함수가 정의된 후에 변경된 변수 값에 접근할 수 있다.

var myFunction = function() {
  var foo = "hello";
  var myFn = function() {
    console.log( foo );
  };
  foo = "world";
  return myFn;
};

var f = myFunction();

f(); // "world"

이것은 더욱 복잡한 역할 영역의 예입니다.

(function() {

  var baz = 1;

  var bim = function() {
    console.log( baz );
  };

  bar = function() {
    console.log( baz );
  };

})();

이 인스턴스에서 다음을 실행합니다.

console.log( baz ); // baz is not defined outside of the function

ReferenceError가 표시됩니다.baz는 함수에서만 정의되었을 뿐 전역 작용역에 노출되지 않았습니다.

bar(); // 1

.bar () 는 익명 함수에서 정의되었지만 var 키워드 정의를 사용하지 않았습니다. 이것은 국부 작용역에 귀속되지 않고 전역 작용역에 생성되었다는 것을 의미합니다.또한baz 변수에 접근할 수 있습니다. 왜냐하면.bar () 는 baz와 같은 작용역에 정의되어 있기 때문에 함수 외부의 다른 코드가 안 되더라도 변수baz에 접근할 수 있습니다.

bim(); // ReferenceError: bim is not defined

.bim () 은 함수에서만 정의되기 때문에 국부 변수로 전역 대상에 존재하지 않습니다.
다음은 JavaScript 역할 영역에 대한 상세한 내용입니다. JavaScript 역할 영역에 대한 더 많은 자료는 저희 다른 관련 글을 주목해 주십시오!