JavaScript 에서 Hoisting 상세 설명(변수 향상 과 함수 성명 향상)
어떻게 함수 성명/변 수 를 역할 영역의 맨 위 에 이동 합 니까?
용어 Hoisting(향상)은 많은 JavaScript 블 로그 에서 식별 자 를 해석 하 는 데 사용 된다.사실 Hoisting(향상)이라는 단 어 는 변수 와 함수 성명 이 함수 나 전역 역할 영역 상단 으로 어떻게 향상 되 었 는 지 설명 하 는 데 사 용 됩 니 다.당신 은 어떤 JavaScript 문서 에서 도 이 용 어 를 찾 을 수 없습니다.우리 가 말 하 는 Hoisting(향상)은 단지 그 글자 의 의 미 를 사용 하여 비 유 를 했 을 뿐 입 니 다.
만약 당신 이 자 바스 크 립 트 작용 역 의 작업 원리 에 대해 기본 적 인 이 해 를 가지 고 있다 면,호 스 팅(향상)을 더욱 깊이 이해 하 는 것 은 당신 이 더욱 강력 한 기초 지식 을 세 우 는 데 도움 이 될 것 이다.어 리 석 은 부두 주석:자 바스 크 립 트 의 총 개념 으로서 변수 향상 과 함수 성명 향상 은 전단 개발 면접 에서 자주 질문 을 받 거나 전단 개발 필기시험 문제 에 나타난다.Hoisting(향상)의 중요성 을 알 수 있 습 니 다.)
기초 지식 을 더 잘 이해 하기 위해'호 이 스 팅(향상)'이 무엇 을 의미 하 는 지 되 짚 어 본다.또한,자바 스 크 립 트 는 해석 적 언어 로 컴 파일 적 언어 와 다 르 며,JS 코드 가 한 줄 씩 실행 되 고 있다 는 것 을 알려 드 립 니 다.
다음 의 예 를 고려 하 십시오.
console.log(notyetdeclared);
// 'undefined'
var notyetdeclared = 'now it is declared';
hoisting();
function hoisting(){
console.log(notyetdeclared);
// 'undefined'
var notyetdeclared = 'declared differently';
console.log(notyetdeclared);
// 'declared differently'
}코드 가 자바 스 크 립 트 에서 실 행 될 때 실행 기 컨 텍스트 를 만 들 것 이 라 고 상단 부터 설명 합 니 다.JavaScript 에는 두 가지 주요 실행 기 컨 텍스트 유형 C 전체 실행 기 컨 텍스트 와 함수 실행 기 컨 텍스트 가 있 습 니 다.JavaScript 는 단일 스 레 드 실행 모델 을 기반 으로 하기 때문에 매번 코드 만 실행 할 수 있 습 니 다.
우리 위의 코드 에 대해 이 과정 은 그림 과 같다.
상기 예제 코드 호출 스 택:
모든 이 용어 들 은 간단 하면 서도 논리 에 맞 는 개념 을 포함한다.그것 을 분해 할 수 있 도록 허락 하 다.품사 환경 은 재 미 있 는 이름 으로 코드 블록 의 변수 와 함 수 를 추적 하 는 데 사용 된다.부분 변수,함수 성명 과 파 라 메 터 를 추적 하 는 것 을 제외 하고 모든 품사 환경 은 부모 급 품사 환경 도 추적 합 니 다.그래서 위의 예제 코드 는 자 바스 크 립 트 엔진 에서 이렇게 해석 된다.상기 코드 의 품사 환경 은 그림 과 같다.
주:
이해 하 는 데 문제 가 있다 면 다음 세 편의 글 을 보십시오.
기본적으로 자 바스 크 립 트 코드 의 실행 은 두 단계 로 나 뉜 다.첫 번 째 단 계 는 현재 품사 환경 에 모든 변수 와 함수 성명 을 등록 합 니 다.완성 되면 두 번 째 단계 의 자 바스 크 립 트 실행 이 시 작 됩 니 다!
그래서 첫 번 째 단 계 를 상세 하 게 설명해 야 한다.그것 은 두 단계 에서 작용 한다.
지금 너 는 어법 환경 이라는 기본 개념 에 대해 어느 정도 알 고 있 을 것 이다.그러면 우 리 는 예시 코드 로 돌아 가 이 문제 들 을 설명 할 것 이다.
전역 컨 텍스트 를 설정 할 때 환경 을 스 캔 하고 hoisting()함 수 를 식별 자 에 추가 합 니 다.그리고 다음 단계 에서 변수 notyetdeclared 가 등록 되 었 고 그 값 은 undefined 로 초기 화 되 었 습 니 다.이 절차 에 따라 코드 를 계속 이해 하 세 요.
이제 예제 코드 에서 제기 한 세 가지 문 제 를 설명 하 겠 습 니 다.
여섯 번 째 줄,이 함수 가 설명 하기 전에 왜 방문 할 수 있 습 니까?
1 단계,hoisting()함수 가 식별 자 에 등록 되 었 습 니 다.JS 코드 가 2 단계 의 전체 실행 기 컨 텍스트 에서 실 행 될 때 hoisting 의 품사 환경 을 찾 고 정의 하기 전에 이 함 수 를 찾 습 니 다.
첫 번 째 줄 에서 오류 가 발생 하지 않 았 습 니 다.이 때 변수 notyetdeclared 가 존재 하지 않 기 때 문 입 니까?
마찬가지 로,notyetdeclared 는 식별 자 에 등록 되 어 있 으 며,1 단계 에서 undefined 로 초기 화 되 어 어떠한 오류 도 발생 하지 않 습 니 다.
마지막 으로
네 번 째 줄,notyetdeclared 는 이미 전체 역할 영역 에서 성명 하 였 습 니 다.왜 9 줄 에서 인쇄 할 때 undefined 입 니까?
지금 우 리 는 함수 hoisting 환경 에 들 어 갑 니 다.1 단계 에서 notyetdeclared 가 등록 되 어 초기 화 되 었 습 니 다. undefined,이 문법 환경 에서 notyetdeclared 의 변 수 는 아직 등록 되 지 않 았 기 때 문 입 니 다.만약 12 줄 에 var 키 워드 를 포함 하지 않 는 다 면 상황 은 달라 질 것 이다.
자바 스 크 립 트 에서 Hoisting(향상)은 우리 가 그 뒤의 원 리 를 설명 하 는 데 사용 되 는 관점 일 뿐 기술적 으로 함수 와 변 수 는 어느 곳 으로 도 이동 하지 않 는 다 는 것 을 잘 알 수 있 기 를 바 랍 니 다.
총결산
이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Thymeleaf 의 일반 양식 제출 과 AJAX 제출텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
