머리말
2771 워드 문서, 그것은 팔분 정도 걸립니다 읽어 보시기 바랍니다.
요약 : 이 문서에서는 개념을 자바 스크립트 범위, 범위 유형, 범위 체인 JavaScript와 같은 방법과 변수의 범위 체인과 모양을 설정하는 방법을 설명합니다.
- 원본 주소 : 자바 스크립트의 이해 범위 및 범위 체인
- 있는 공개 "프런트 엔드 고급 학습 '는 응답은,"666 ", 프론트 엔드 기술 책의 패키지를 얻을
시든 꽃, 불모의 전체가 아닌 봄.
본문
자바 스크립트 및 다른 많은 프로그래밍 언어의 범위와 범위 체인은 기본 개념이다. 자바 스크립트하지만 많은 개발자들이 정말 그들을 이해하지 않지만, 자바 스크립트는 이러한 개념을 파악하는 것이 중요합니다.
당신은 더 나은, 더 효율적이고 더 간결한 코드를 작성의 권리는 당신이 더 나은 자바 스크립트 개발자가 그래서, 찬성 개념을 이해합니다.
따라서이 문서에서 나는 범위와 범위 체인뿐만 아니라 내에서 자바 스크립트 엔진이 작동하고 어떻게 변수를 찾아이 무엇인지를 설명합니다.
그 이상의 야단 법석없이, 몸은 시작 :)
범위는 무엇입니까
자바 스크립트 범위에 접근성과 변수의 가시성에 대해 이야기. 즉, 전체 프로그램의 일부 변수에 액세스 할 수있는 말, 또는 변수는 어떤 지역에서 볼 수 있음.
이 중요한 이유 범위
- 범위 가장 중요한 것은 보안입니다. 변수 만 특정 영역에 액세스 할 수 있습니다, 우리는 다른 위치에 프로그램에서 변수를 변경하는 범위와 사고를 방지 할 수 있습니다.
- 범위 명명 된 압력을 줄일 수 있습니다. 우리는 아래에 다른 범위에 같은 변수 이름을 정의 할 수 있습니다.
유형의 범위
자바 스크립트 세 가지 범위가 있습니다 :
- 글로벌 범위;
- 함수 영역;
- 블록 레벨 범위;
1. 전역
어떤이 아닌 함수 나 중괄호로 선언 된 변수, 전역 범위에서 선언 된 변수는 프로그램 어디서나 액세스 할 수 있습니다, 전역 범위에 있습니다. 예를 들면 :
// 全局变量
var greeting = 'Hello World!';
function greet() {
console.log(greeting);
}
// 打印 'Hello World!'
greet();2. 함수 영역
변수는 그 함수 영역 아래 있던 함수 내에 선언 된 경우 함수 영역은 또한, 지역 범위로 알려진. 이 변수뿐만 아니라 함수 외부 방문, 함수 내에서 액세스 할 수 있습니다. 예를 들면 :
function greet() {
var greeting = 'Hello World!';
console.log(greeting);
}
// 打印 'Hello World!'
greet();
// 报错： Uncaught ReferenceError: greeting is not defined
console.log(greeting);3. 블록 레벨 범위
ES6 소개 let및 const키워드 및 var키워드는 중괄호에서 다른 let및 const블록 레벨의 범위에 존재하는 변수 선언. 이 변수는 중괄호 외부에 액세스 할 수 없습니다. 예를 들어 봐 :
{
// 块级作用域中的变量
let greeting = 'Hello World!';
var lang = 'English';
console.log(greeting); // Prints 'Hello World!'
}
// 变量 'English'
console.log(lang);
// 报错：Uncaught ReferenceError: greeting is not defined
console.log(greeting);위의 코드에서 볼 수 있듯이, 중괄호로 사용되는 varlang 변수는 괄호 접근 할 수 밖에 선언했다. 사용 var가변하는 블록 레벨 범위의 유무를 선언.
중첩 된 범위
자바 스크립트 기능처럼 다른 함수 내에서 함수 선언을 할 수있다 범위가 다른 범위에 중첩 될 수 있습니다. 예를 참조하십시오 :
var name = 'Peter';
function greet() {
var greeting = 'Hello';
{
let lang = 'English';
console.log(`${lang}: ${greeting} ${name}`);
}
}
greet();여기에서는 세 개의 하위 범위를 갖고, 제 1 층은 제 블록 레벨 범위 (인 let함수 (의 범위 내에 중첩 선언) greet기능), 최 외층의 범위 전역이다.
어휘 범위 지정
보다 결정 (보통 컴파일 단계) 리터럴 감각 어휘 스코핑 단계에서 말하는 것이다 (정적 범위라고도 함) 어휘 스코핑 오히려 구현 단계를 결정한다. 예를 들어 봐 :
let number = 42;
function printNumber() {
console.log(number);
}
function log() {
let number = 54;
printNumber();
}
// Prints 42
log();위의 코드는 관계없이 볼 수있는 printNumber()전화 위치를 console.log(number)인쇄 42. 동적 범위 다른는 console.log(number)코드 인쇄 기능이 라인은 무엇에 따라 달라집니다 printNumber()호출하는 어디.
경우 동적 범위 , 위의 console.log(number)코드 라인이 인쇄됩니다 54.
어휘 범위를 사용하여, 우리는 단지 변수의 범위의 효과를 결정하기 위해 소스 코드를 볼 수 있지만, 동적 범위 전의 경우는, 우리는 행동의 코드 실행 변수 범위를 확인할 수 없습니다.
등 C, C ++, 자바, 자바 스크립트, 마찬가지로 대부분의 프로그래밍 언어는 정적 범위를 지원합니다. 펄 모두 동적 범위 지정이 정적 영역을 지원하는 지원한다.
범위 체인
발견되지 않는 경우는 자바 스크립트에서 변수를 사용하는 경우, 자바 스크립트 엔진을 이동하는 최초의 일이 현재의 변수의 범위를 찾기 위해 노력할 것입니다, 다음, 그 범위는 정상을 찾을 수 있습니다, 그래서 당신은 변수 나 글로벌 역할에왔다에 찾을 때까지 도메인.
여전히 글로벌 범위에서 변수를 찾을 수없는 경우 암시 적 전역에서 오류에 직접 변수 (비 엄격 모드) 또는 선언합니다.
예를 들면 :
let foo = 'foo';
function bar() {
let baz = 'baz';
// 打印 'baz'
console.log(baz);
// 打印 'foo'
console.log(foo);
number = 42;
console.log(number); // 打印 42
}
bar();함수가되면 bar()현재 범위의 변수, 자바 스크립트 엔진 첫째 외모라고 baz한 다음 foo는 변수 보이지만 현재 범위에서 찾을 수 없습니다 발견하고 범위를 벗어난 볼을 계속 발견 그것 (이의 전역에서 발견된다 ).
그런 다음 42변수에 할당 number. 자바 스크립트 엔진은 현재 범위에서 다음 단계의 범위를 벗어난 숫자 변수를 찾습니다 (찾을 수 없음).
가 아닌 엄격 모드에있는 경우, 엔진이 생성됩니다 number전역 변수를하고 42그것에 할당합니다. 하지만 엄격 모드에있는 경우가 잘못보고 될 것입니다.
결론 : 변수 시간을 사용하는 경우 사용자가 변수를 찾을 때까지, 자바 스크립트 엔진은, 계층에 의해 변수 계층을 찾을 수있는 범위 체인을 따릅니다.
어떻게 작업의 범위와 범위 체인
우리가 범위 입력 범위를 설명했다보다도, 지금의 자바 스크립트 엔진은 범위 체인 변수를 결정하는 방법과 변수를 찾을 수있는 방법입니다 보자.
자바 스크립트 변수를 찾는 방법을 이해하기 위해, 자바 스크립트 (다음을 참조하십시오 어휘 개념의 환경을 이해해야합니다 구현 및 실행 스택의 자바 스크립트의 컨텍스트를 이해 ).
어휘 환경은 무엇입니까
소위 사전 환경 의 종류 가변 - 식별자 (단 구조 매핑 식별자 변수 / 함수의 이름을 의미 변수는 실제 객체 또는 참조 인 기본 데이터 타입 [오브젝트 기능의 종류 함유 배열] 참조).
간단히 말해, 어휘 환경은 지역 변수와 객체 참조를 저장하는 데 사용되는 자바 스크립트 엔진입니다.
참고 : 음주의 어휘 환경과 어휘 범위, 어휘 범위 지정 혼동하지 코드 컴파일 단계 범위 (결정하는 번역기의 참고 : 추상적 인 개념을), 그리고 어휘 환경은 지역 변수와 객체 참조를 저장하는 데 사용되는 자바 스크립트 엔진입니다 ( 역자 주의 : 이미지의 개념).
이와 같은 어휘 환경 :
lexicalEnvironment = {
a: 25,
obj: <ref. to the object>
}코드의 범위가 실행될 때에 만, 엔진은 어휘 범위에 대한 새로운 환경을 만듭니다. 어휘 환경도 (즉, 범위 외부) 외부 어휘 환경에 의해 참조 기록합니다. 예 :
lexicalEnvironment = {
a: 25,
obj: <ref. to the object>
outer: <outer lexical environemt>
}자바 스크립트 엔진은 가변 조회 얼마나
이제 우리는 범위, 어휘 범위 체인과 환경의 개념을 알고, 이제 자바 스크립트 엔진이 범위를 결정하고 어휘 범위 체인 환경을 사용하는 방법에 관해 살펴 보겠습니다.
예제와 함께 우리는 이러한 개념을보다 이해한다 :
let greeting = 'Hello';
function greet() {
let name = 'Peter';
console.log(`${greeting} ${name}`); // Hello Peter
}
greet();
{
let greeting = 'Hello World!'
console.log(greeting); // Hello World!
}위의 코드가로드 된 후, 처음으로 우리는 변수와 함수는 전역 범위에서 선언이 포함 된 글로벌 어휘 환경을 만들 수 있습니다. 이 같이 :
globalLexicalEnvironment = {
greeting: 'Hello'
greet: <ref. to greet function>
outer: <null>
}여기의 outer(어휘 환경 외부에있다) 필드는 순서로 설정되어 null글로벌 어휘 환경이 이미 어휘 환경의 상단이기 때문에.
우리는 그 다음 전화 greet()기능을하고 새 어휘 환경이 생성됩니다 :
functionLexicalEnvironment = {
name: 'Peter'
outer: <globalLexicalEnvironment>
}다음의 outer필드가 설정되어 globalLexicalEnvironment그는 전역 범위의 범위 밖에 있기 때문에.
그런 다음을 console.log ( '$ {인사} $ {이름}`) 이 줄의 코드, 자바 스크립트 엔진은 최초의 현재 기능의 어휘 환경 변수를 찾을 수 greeting및 name있지만 찾을 수를 name찾을 수 없습니다, greeting. 그런 어휘 환경의 상단에 계속 찾고 greeting(이것은 지구 환경 법률 작사가이다). 마지막으로 글로벌 어휘 환경을 발견 greeting.
그런 다음 블록 레벨을위한 새로운 어휘 환경을 만들기 위해 괄호에 해당 코드를 실행합니다. 으로는 다음과 같습니다 :
blockLexicalEnvironment = {
greeting: 'Hello World',
outer: <globalLexicalEnvironment>
}그런 다음 실행 console.log(greeting)먼저이 계층 어휘 환경을보고, 코드 줄을 greeting확인, 끝을 찾을 수 있습니다. 이 시점에서 우리는 변수를 찾기 위해 (여기에 글로벌 범위는) 범위 밖에 가지 않을 것이다.
참고 만 let하고 const새로운 어휘 저장 환경을 만들 것이다 선언 변수 사용 var변수 선언을 현재 블록의 어휘 환경 (또는 지구 환경 어휘 사전 함수 환경)에 위치 (괄호)에 저장된다.
결론 : 변수를 사용하는 경우는 상위 어휘 환경을 내가 찾을 때까지보고를 찾을 수 찾을 수없는 경우, 현재의 환경에서 자바 스크립트 엔진 첫째 어휘는 찾습니다.
결론
범위 가변 영역 접근 표시 및 JavaScript 엔진에 사용되는 변수의 범위를 찾아 층을 통과 할 같은 자바 스크립트 범위도 중첩 될 수 기능한다.
자바 스크립트는 변수의 역할이 컴파일시에 결정된다는 것을 의미 어휘 범위 지정을 사용합니다.
자바 스크립트 엔진은 프로그램 실행 중에 어휘 환경 변수와 함수를 저장하는 데 사용합니다.
범위와 범위 체인은 범위와 더 나은 자바 스크립트 개발자가 만들 수있는 범위 체인을 이해 개념 자바 스크립트를 기반으로합니다.
위.
에라타 환영 제한 용량, 일반의 수준은, 감사합니다.
구독 더 많은 기사가 대중 번호 "프런트 엔드 고급 학습 ', 대답,"666 "에 대해 우려 할 수있다, 프론트 엔드 기술 책의 패키지를 얻을
