나를 따라와서 javascript var 사전 구문 분석 및 함수 선언 개선_javascript 기술을 배우세요.

1.var 변수 사전 컴파일

JavaScript의 구문은 C, Java, C#과 유사하며 통칭하여 C 유사 구문이라고 합니다. C 또는 Java 프로그래밍 경험이 있는 학생은 "먼저 선언하고 나중에 사용"이라는 규칙을 잘 알고 있어야 합니다. 선언되지 않은 변수나 함수를 사용하면 컴파일 단계에서 오류가 보고됩니다. 그러나 JavaScript에서는 변수와 함수가 선언되기 전에 사용할 수 있습니다. 아래에서 그 비밀을 자세히 살펴보겠습니다.

먼저 코드를 살펴보겠습니다.

(function() {
 console.log(noSuchVariable);//ReferenceError: noSuchVariable is not defined
})();

위 코드를 실행하면 오류가 즉시 보고됩니다. 그러나 noSuchVariable 변수가 전혀 정의되지 않았기 때문에 이는 정확히 우리가 예상한 것입니다! 다음 코드를 살펴보겠습니다.

(function() {
 console.log(declaredLater); //undefined
 var declaredLater = "Now it's defined!";
 console.log(declaredLater);// "Now it's defined!"
})();

우선 위의 코드는 정확하며 문제가 없습니다. 그런데 왜 오류를 보고하지 않습니까? 선언된Later 변수는 호출 문 다음에 정의됩니까? 출력이 정의되지 않은 이유는 무엇입니까?

이것은 실제로 JavaScript 파서에 의해 발생합니다. 파서는 현재 범위에 선언된 모든 변수와 함수를 범위의 시작 부분에 배치합니다. 그러나 변수 선언만 범위의 시작 부분으로 진행됩니다. 제자리에 남아 있습니다. 위 코드는 실제로 파서에게 다음과 같이 보입니다.

(function() {
 var declaredLater; //声明被提前到作用域开始处了！
 console.log(declaredLater); // undefined
 declaredLater = "Now it's defined!"; //赋值操作还在原地!
 console.log(declaredLater);//"Now it's defined!"
})();

이것이 위 코드가 예외를 보고하지 않는 이유입니다! 변수와 함수가 "고급"된 후에는 선언된 나중에 변수가 실제로 호출 함수 앞에 배치됩니다. JavaScript 구문 정의에 따라 선언되었지만 할당되지 않은 변수는 자동으로 정의되지 않은 상태로 할당됩니다. DeclaredLater 변수의 값은 정의되지 않았습니다. 나중에 선언된Later 변수에 값을 할당했으므로 두 번째로 변수를 인쇄하면 이제 정의됩니다.

또 다른 예를 살펴보겠습니다.

var name = "Baggins";
(function () {
 console.log("Original name was " + name);// "Original name was undefined"
 var name = "Underhill";
 console.log("New name is " + name);// "New name is Underhill"
})();

위 코드에서는 먼저 변수 이름을 선언했습니다. 원래 의도는 name 변수를 처음 인쇄할 때 전역 범위에 정의된 name 변수를 출력한 다음 함수에 로컬 이름 변수를 정의하는 것입니다. 전역 변수를 덮고 마지막으로 지역 변수의 값을 출력합니다. 그러나 첫 번째 출력 결과는 우리의 기대와 완전히 일치하지 않습니다. 그 이유는 우리가 정의한 지역 변수가 해당 범위 내에서 "고급", 즉 다음과 같은 형식이 되기 때문입니다.

var name = "Baggins";
(function () {
 var name; //注意：name 变量被提前了！
 console.log("Original name was " + name);// "Original name was undefined"
 name = "Underhill";
 console.log("New name is " + name);//"New name is Underhill"
})();

JavaScript에는 이러한 "특이점"이 있기 때문에 항상 주의를 기울일 수 있도록 변수 선언을 범위의 맨 위에 배치하는 것이 좋습니다.

2. 함수 선언은 "고급"입니다

앞서 이야기한 것은 변수이고, 다음으로는 함수에 대해 이야기해보겠습니다.

함수가 "고급"인 상황은 두 가지가 있습니다. 하나는 함수 선언이고, 두 번째는 함수가 변수에 값으로 할당되는 경우, 즉 함수 표현식입니다.

먼저 첫 번째 상황인 코드에 대해 이야기해 보겠습니다.

isItHoisted();//"Yes!"
function isItHoisted() { 
 console.log("Yes!");
}

위에서 보듯이 자바스크립트 인터프리터에서는 함수 선언 이전에 사용할 수 있습니다. 즉, 함수 선언이 단순히 함수 이름이 아니라 함수 정의 전체도 "고급"이라는 것입니다! 그러면 위의 코드가 올바르게 실행될 수 있습니다.

두 번째 경우인 함수 표현 형식을 살펴보겠습니다. 코드부터 시작해 보겠습니다.

definitionHoisted();// "Definition hoisted!"
definitionNotHoisted();// TypeError: undefined is not a function
function definitionHoisted() { 
 console.log("Definition hoisted!");
}
var definitionNotHoisted = function () { 
 console.log("Definition not hoisted!");
};

definitionHoisted 함수는 첫 번째 유형에 따라 올바르게 실행되었지만, definitionNotHoisted 변수는 이러한 관점에서 고급이 아니었습니다. 즉, 앞서 이야기한 변수의 "고급"과 완전히 일치하며 "고급" 변수의 기본값이 정의되지 않았기 때문에 보고된 오류는 "유형 불일치"에 속합니다. 물론 부를 수는 없다.

요약
위의 설명을 통해 정리하면 다음과 같습니다.

변수 선언은 범위의 최상위로 진행되며 할당은 그대로 유지됩니다
전체 함수 선언이 "고급"입니다
함수 표현식을 사용할 때 변수만 "고급"이고 함수는 "고급"이 아닙니다.
3.var의 부작용

암시적 전역 변수와 명시적으로 정의된 전역 변수의 작은 차이점은 삭제 연산자를 통해 변수를 정의되지 않은 상태로 둘 수 있다는 것입니다.

var를 통해 생성된 전역 변수(함수 이외의 모든 프로그램에서 생성됨)는 삭제할 수 없습니다.
var 없이 생성된 암시적 전역 변수는(함수에서 생성되었는지 여부에 관계없이) 삭제할 수 있습니다.
이는 기술적으로 암시적 전역 변수가 실제 전역 변수는 아니지만 전역 개체의 속성임을 보여줍니다. 속성은 삭제 연산자를 통해 삭제할 수 있지만 변수는 삭제할 수 없습니다.

// 定义三个全局变量
var global_var = 1;
global_novar = 2;  // 反面教材
(function () {
 global_fromfunc = 3; // 反面教材
}());

// 试图删除
delete global_var;  // false
delete global_novar; // true
delete global_fromfunc; // true

// 测试该删除
typeof global_var;  // "number"
typeof global_novar; // "undefined"
typeof global_fromfunc; // "undefined"

在ES5严格模式下，未声明的变量（如在前面的代码片段中的两个反面教材）工作时会抛出一个错误。

4、单var形式声明变量

在函数顶部使用单var语句是比较有用的一种形式，其好处在于：

提供了一个单一的地方去寻找功能所需要的所有局部变量
防止变量在定义之前使用的逻辑错误
少代码（类型啊传值啊单线完成）
单var形式长得就像下面这个样子：

function func() {
 var a = 1,
  b = 2,
  sum = a + b,
  myobject = {},
  i,
  j;
 // function body...
}

您可以使用一个var语句声明多个变量，并以逗号分隔。像这种初始化变量同时初始化值的做法是很好的。这样子可以防止逻辑错误（所有未初始化但声明的变量的初始值是undefined）和增加代码的可读性。在你看到代码后，你可以根据初始化的值知道这些变量大致的用途。

以上就是针对javascript的var预解析与函数声明提升的学习内容，希望对大家的学习有所帮助。