> 웹 프론트엔드 > JS 튜토리얼 > JavaScriptvar의 준비 및 부작용에 대한 심층 분석

JavaScriptvar의 준비 및 부작용에 대한 심층 분석

怪我咯
풀어 주다: 2017-05-07 11:49:40
원래의
1029명이 탐색했습니다.

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 문을 사용하는 것이 더 유용한 형식입니다. 이점은 다음과 같습니다.

은 단일 위치를 제공합니다. go 함수에 필요한 모든 지역 변수 찾기

변수가 정의되기 전에 사용되는 논리 오류 방지

선언된 전역 변수를 기억하는 데 도움이 되므로 전역 변수 수가 줄어듭니다. //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 표준에는 정의되지 않고 일반적으로 동작을 설명하는 데 사용되는 "호이스팅" 개념을 채택합니다.

전역 개체 액세스

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

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


이 메서드는 언제든지 전역 개체를 가져올 수 있습니다. time 객체는 함수에서 함수로 호출되기 때문에(new를 통해 생성되지 않음) 항상 전역 객체를 가리킵니다. 실제로 이 버그는 ECMAScript 5 엄격 모드에는 적용되지 않으므로 엄격 모드에서는 다른 형식을 취해야 합니다. 예를 들어 JavaScript 라이브러리를 개발하는 경우 코드를 즉시 함수로 래핑한 다음 전역 범위에서 이에 대한 참조를 직접 함수의 매개 변수로 전달할 수 있습니다.

위 내용은 JavaScriptvar의 준비 및 부작용에 대한 심층 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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