>웹 프론트엔드 >JS 튜토리얼 >js의 변수 선언 및 함수 선언 승격에 대한 자세한 분석(예제 포함)

js의 변수 선언 및 함수 선언 승격에 대한 자세한 분석(예제 포함)

不言
不言원래의
2018-08-23 14:16:431636검색

이 기사는 js의 변수 선언 및 함수 선언 개선 사항에 대한 자세한 분석을 제공합니다(예제 포함). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

변수 선언 개선
1. 변수 정의
변수에 값을 할당하지 않으면 변수의 초기 값이 정의되지 않습니다.

2. 변수 범위
변수 범위는 변수가 작동하는 범위를 말합니다. 변수는 전역변수와 지역변수로 나누어진다. 전역 변수는 전역적으로 정의됩니다. 지역 변수는 함수 내에서만 유효합니다.
함수 본문에서는 동일한 이름을 가진 지역 변수나 매개변수가 전역 변수보다 우선순위가 높습니다. 즉, 함수에 전역변수와 이름이 같은 지역변수나 매개변수가 있으면 지역변수가 전역변수를 덮어쓰게 됩니다.
var 없이 정의된 모든 변수는 전역 변수로 간주됩니다

3. 함수 범위 및 사전 선언
자바스크립트의 함수 효과는 함수 내에서 선언된 모든 변수가 항상 함수 본문에 정의된다는 것입니다. 변수는 선언되기 전에 사용할 수 있습니다. 이 기능을 선언 호이스팅이라고 합니다. 즉, JavaScript 함수의 모든 선언(선언만 해당)은 함수 본문의 맨 위로 올라가는 반면 변수 할당 작업은 함수 본문의 맨 위로 유지됩니다. 함수 본문. 다음 예는 다음과 같습니다.
참고: 사전 선언은 코드 실행이 시작되기 전에 JavaScript 엔진을 사전 컴파일하는 동안 수행됩니다.

var scope = 'global';function f(){
    console.log(scope);    
    var scope = 'local';
    console.log(scope);
}

함수 내 선언 승격으로 인해 위의 코드는 실제로 다음과 같습니다.

var scope = 'global';function f(){
    var scope;    //变量声明提升到函数顶部
    console.log(scope);
    scope = 'local';    //变量初始化依然保留在原来的位置
    console.log(scope);
}

이러한 변환 후에는 답이 매우 분명해집니다. 첫 번째 console.log(scope) 문 이전에 범위가 정의되었지만 값이 할당되지 않았으므로 현재 범위의 참조는 두 번째 console.log(scope) 문 이전에 정의되지 않았습니다. 값이 'local'이므로 출력 결과는 로컬입니다.

함수 선언 개선
함수 선언 구문

f('superman');function f(name){
    console.log(name);
}

함수 표현식 구문

f('superman');var f= function(name){
    console.log(name);
}

위 코드를 실행하면 오류 Uncaught ReferenceError: f is not Defined(…)가 보고되고, 오류 메시지에 f가 아님이 표시됩니다. 한정된.
같은 코드에서 함수 선언과 함수 표현식이 다른 이유는 무엇인가요?
함수 선언에는 함수 선언 호이스팅이라는 매우 중요한 기능이 있기 때문입니다. 함수 선언문은 외부 스크립트 또는 외부 함수 범위의 맨 위에 호이스팅됩니다(변수 호이스팅과 매우 유사합니다). 이 기능으로 인해 함수를 호출하는 문 뒤에 함수 선언을 배치할 수 있습니다. 다음 예에서와 같이 최종 출력은 무엇이어야 합니까? :

var getName = function(){
    console.log(2);
}function getName (){
    console.log(1);
}
getName();

어떤 분들은 최종 출력 결과가 1이라고 생각하실 수도 있습니다. 이를 분석해 보겠습니다. 이 예제에는 변수 선언 승격과 함수 선언 승격이 포함됩니다. 앞서 함수 선언 승격에서 언급했듯이 함수 선언 function getName(){}이 맨 위로 올라갑니다. 함수 표현식 var getName = function(){}은 변수 선언 승격을 보여줍니다. 따라서 이 경우 getName도 변수이므로 이 변수의 선언도 맨 아래로 승격되지만 변수 할당은 여전히 ​​원래 위치에 유지됩니다. 함수 선언과 변수 선언이 모두 승격되지만 함수가 먼저 승격되고 변수가 승격됩니다. 따라서 위 함수는 다음과 같이 변환될 수 있습니다.

function getName(){    //函数声明提升到顶部
    console.log(1);
}
var getName;    //变量声明提升
getName = function(){    //变量赋值依然保留在原来的位置
    console.log(2);
}
getName();    // 最终输出:2

따라서 최종 출력은 다음과 같습니다. 2. 원래 예에서는 함수 선언이 함수 표현식 뒤에 있지만 함수 선언이 맨 위로 승격되므로 나중에 함수 표현식의 할당 연산으로 getName을 덮어쓰므로 2가 출력됩니다.

관련 추천:



위 내용은 js의 변수 선언 및 함수 선언 승격에 대한 자세한 분석(예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.