> 웹 프론트엔드 > JS 튜토리얼 > JavaScript는 var 사전 구문 분석 및 부작용을 탐색합니다.

JavaScript는 var 사전 구문 분석 및 부작용을 탐색합니다.

高洛峰
풀어 주다: 2016-11-28 14:39:08
원래의
1053명이 탐색했습니다.

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 엄격 모드에서는 선언되지 않은 변수(예: 이전 코드 조각의 두 가지 부정 예) 작업에서 오류가 발생합니다.

단일 var 형식

함수 상단에 단일 var 문을 사용하는 것이 더 유용한 형식입니다. 장점은 다음과 같습니다.

은 함수를 찾을 수 있는 단일 위치를 제공합니다. 로컬 변수는 모두 필요

정의 전 변수 사용시 로직 오류 방지

선언된 글로벌 변수를 기억할 수 있도록 도와줌으로써 글로벌 변수 수가 적다 //zxx: 여기 좀 어지러워.. .

더 적은 코드(유형, 값 및 한 줄 완성)

단일 var 형식은 다음과 같습니다.

function func() {
   var a = 1,
       b = 2,
       sum = a + b,
       myobject = {},
       i,
       j;
   // function body...
}
로그인 후 복사

var 문을 사용하여 선언할 수 있습니다. 여러 변수는 쉼표로 구분됩니다. 이처럼 변수와 값을 동시에 초기화하는 것이 좋습니다. 이는 논리 오류(초기화되지 않았지만 선언된 모든 변수의 초기 값은 정의되지 않음)를 방지하고 코드의 가독성을 높입니다. 코드를 본 후에는 초기화된 값을 기반으로 이러한 변수의 일반적인 목적(예: 개체로 사용할지 정수로 사용할지 여부)을 알 수 있습니다.

이전 코드에서 sum = a + b와 같이 선언할 때 실제 작업을 수행할 수도 있습니다. 또 다른 예는 DOM(Document Object Model) 참조를 사용하는 경우 단일 var를 사용하여 지정할 수 있습니다. 다음 코드에 표시된 것처럼 DOM 참조를 로컬 변수로 함께 사용합니다.

function updateElement() {
   var el = document.getElementById("result"),
       style = el.style;
   // 使用el和style干点其他什么事...
}
로그인 후 복사

vars 변수 준비

JavaScript에서는 함수 내 어디에서나 여러 var 문을 선언하고 이를 가질 수 있습니다. 마치 함수의 맨 위에 선언된 것처럼 보이는 함수를 호이스팅(hoisting)이라고 합니다. 변수를 사용한 다음 나중에 함수에서 다시 선언하면 논리 오류가 발생할 수 있습니다. JavaScript의 경우 변수가 동일한 범위(동일한 함수)에 있으면 var 선언 이전에 사용되더라도 선언된 것으로 간주됩니다. 다음 예를 살펴보십시오.

// 反例
myname = "global"; // 全局变量
function func() {
    alert(myname); // "undefined"
    var myname = "local";
    alert(myname); // "local"
}
func();
로그인 후 복사

이 예에서는 첫 번째 경고에 "global"이 표시되고 두 번째 경고에 "loacl"이 표시된다고 생각할 수 있습니다. 첫 번째 경고 당시 myname이 선언되지 않았기 때문에 이 기대는 이해할 수 있습니다. 이때 함수는 자연스럽게 전역 변수 myname을 봐야 하지만 실제로는 이것이 작동하는 방식이 아닙니다. 첫 번째 경고는 myname이 함수의 지역 변수로 처리되고(나중에 선언되더라도) "정의되지 않음" 팝업이 표시되고 모든 변수 선언이 함수 상단에 일시 중단되기 때문입니다. 따라서 이러한 혼란을 피하려면 사용하려는 모든 변수를 미리 선언하는 것이 가장 좋습니다.

위의 코드 조각은 다음과 같이 동작할 수 있습니다.

myname = "global"; // global variable
function func() {
   var myname; // 等同于 -> var myname = undefined;
   alert(myname); // "undefined"
   myname = "local";
   alert(myname); // "local"}
func();
로그인 후 복사

완전성을 위해 실행 수준에서 약간 더 복잡한 것을 언급하겠습니다. 코드 처리는 두 단계로 나누어집니다. 첫 번째 단계는 변수, 함수 선언, 일반 형식 매개변수 생성 단계입니다. 두 번째 단계는 함수 표현식과 규정되지 않은 식별자(선언된 변수에 대한)가 생성되는 코드 실행입니다. 그러나 실용적인 목적을 위해 ECMAScript 표준에는 정의되지 않고 일반적으로 동작을 설명하는 데 사용되는 "호이스팅" 개념을 채택합니다.

전역 개체 액세스

브라우저에서는 창 속성을 통해 코드의 어느 곳에서나 전역 개체에 액세스할 수 있습니다(창의 로컬 변수를 선언하는 등 터무니없는 작업을 수행하지 않는 한). 그러나 다른 상황에서는 이 편의 속성을 다른 이름으로 부를 수도 있습니다(또는 프로그램에서 사용할 수 없는 경우도 있음). 하드 코딩된 창 식별자 없이 전역 개체에 액세스해야 하는 경우 모든 수준의 함수 범위에서 다음을 수행할 수 있습니다.

var global = (function () {
   return this;
}());
로그인 후 복사

这种方法可以随时获得全局对象,因为其在函数中被当做函数调用了(不是通过new构造),this总是指向全局对象。实际上这个病不适用于ECMAScript 5严格模式,所以,在严格模式下时,你必须采取不同的形式。例如,你正在开发一个JavaScript库,你可以将你的代码包裹在一个即时函数中,然后从全局作用域中,传递一个引用指向this作为你即时函数的参数。


관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿