> 웹 프론트엔드 > JS 튜토리얼 > javascript_javascript 기술의 변수 범위 및 변수 승격에 대한 자세한 소개

javascript_javascript 기술의 변수 범위 및 변수 승격에 대한 자세한 소개

WBOY
풀어 주다: 2016-05-16 17:19:03
원래의
1142명이 탐색했습니다.

변수 범위
"변수의 범위는 변수가 존재하는 컨텍스트를 나타냅니다. 이는 액세스할 수 있는 변수와 변수에 액세스할 수 있는 권한이 있는지 여부를 지정합니다.

가변 범위는 로컬 범위와 전역 범위로 구분됩니다.

지역 변수(함수 수준의 범위)
다른 객체 지향 프로그래밍 언어(예: C, Java 등)와 달리 JavaScript에는 블록 수준 범위(중괄호로 둘러싸여 있음)가 없습니다. ; JavaScript에 함수 수준 범위가 있는 경우, 즉 함수 내에 정의된 변수는 함수 내에서 또는 함수 내의 함수에서만 액세스할 수 있습니다(클로저 제외). 이에 대한 주제는 며칠 후에 작성하겠습니다. .

함수 수준 범위의 예:


코드 복사 코드는 다음과 같습니다.

var name = "Richard" ;

function showName () {
var name = "Jack"; // 이 showName 함수에서만 액세스할 수 있습니다.
console.log (name) // Jack
}
console.log (이름); // Richard: 전역 변수

에는 블록 범위가 없습니다.


코드 복사 코드는 다음과 같습니다.

var name = "Richard" ;
// 이 if 문의 블록은 이름 변수에 대한 로컬 컨텍스트를 생성하지 않습니다.
if (name) {
name = "Jack" // 이 이름은 전역 이름 변수이며 여기서는 "Jack"으로 변경됩니다
console.log (name); // Jack: 여전히 전역 변수
}

// 여기서 name 변수는 동일한 전역 이름 변수입니다. 하지만 if 문
console.log(이름)에서 변경되었습니다. // Jack

// var 키워드를 사용하는 것을 잊지 마세요
// var 키워드를 사용하지 않고 변수를 선언하면 해당 변수는 전역 변수가 됩니다!
// var 키워드를 사용하여 지역 변수를 선언하지 않으면 전역 범위의 일부가 됩니다.
var name = "Michael Jackson";

function showCelebrityName () {
console.log (이름);
}

function showOrdinaryPersonName () {
name = "Johnny Evers";
console.log (이름);
}
showCelebrityName (); // Michael Jackson

// name은 지역 변수가 아니며 단순히 전역 이름 변수를 변경합니다.
showOrdinaryPersonName () // Johnny Evers

// 전역 변수는 이제 유명인 이름이 아닌 Johnny Evers입니다
showCelebrityName (); // Johnny Evers

// 해결 방법은 var 키워드
function showOrdinaryPersonName()을 사용하여 로컬 변수를 선언하는 것입니다. {
var name = "Johnny Evers"; // 이제 name은 항상 지역 변수이며 전역 변수를 덮어쓰지 않습니다.
console.log (name);
}
// 지역 변수 전역 변수보다 우선순위가 높습니다
//전역 범위의 변수가 로컬 범위에서 다시 선언된 경우 이 변수를 로컬 범위에서 호출하면 로컬 범위에서 선언된 변수가 먼저 호출됩니다.
var name = "Paul";

function users () {
// 여기서 name 변수는 로컬 변수이며 전역 범위에서 동일한 이름 변수보다 우선합니다.
var name = "Jack";

// 전역 범위에서 함수 외부를 보기 전에 함수 내부에서 이름 검색이 바로 시작됩니다
console.log (name); >
사용자 () // 잭

전역 변수

함수 외부에서 선언된 모든 변수는 전역 범위에 속합니다. 브라우저 환경에서 이 전역 범위는 Window 객체(또는 전체 HTML 문서)입니다.
함수 외부에서 선언되거나 정의된 모든 변수는 전역 개체이므로 이 변수는 어디에서나 사용할 수 있습니다. 예를 들면 다음과 같습니다.

// 이름과 성별은 전혀 없습니다 function
var myName = "zhou";
var sex = "male";

//모두 창 개체에 있습니다
console.log(window.myName); paul
console.log('sex' in window) //true

var 키워드를 사용하지 않고 처음으로 변수를 초기화/선언하면 전역 범위에 자동으로 추가됩니다.


코드 복사 코드는 다음과 같습니다.

function showAge(){
//age 초기화 시 var 키워드는 사용되지 않으므로 전역 변수입니다.
age = 20;
console.log(age);
}

showAge(); //20
console.log(age); //age는 전역 변수이므로 여기서도 출력은 20

setTimeout 함수는 전역 범위에서 실행됩니다

setTimeout의 함수는 전역 범위에 있으므로 함수에서 this 키워드가 사용되면 this 키워드는 전역 객체(Window)를 가리킵니다.

코드 복사 코드는 다음과 같습니다.

var Value1 = 200;
var Value2 = 20 ;
var myObj = {
Value1 : 10,
Value2 : 1,

caleculatedIt: function(){
setTimeout(function(){
console .log( this.Value1 * this.Value2);
}, 1000);
}
}

myObj.caleculatedIt() //4000

전역 범위의 오염을 피하기 위해 일반적으로 우리는 가능한 한 적은 수의 전역 변수를 선언합니다.
변수 호이스팅
모든 변수 선언은 함수의 시작 부분(변수가 함수 내부에 있는 경우) 또는 전역 범위의 시작 부분(변수가 전역 변수인 경우)으로 호이스팅됩니다. 예를 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

function showName () {
console .log("이름: " name);
var name = "Ford";
console.log("성: " name);
}

showName(); // JavaScript 엔진에서 실제로 코드를 처리하는 방법은 다음과 같습니다.

function showName () {
var name / / name은 호이스팅됩니다(할당은 아래에서 발생하므로 이 시점에서는 정의되지 않았습니다)
console.log("First Name: " name) // First Name: undefine

name = "Ford "; / / 이름에 값이 할당됨

// 이제 이름은 Ford
console.log("성: " name); // 성: Ford
}




함수 선언이 변수 선언을 덮어씁니다

함수 선언과 변수 선언이 있는 경우(참고: 값이 할당되지 않은 선언일 뿐임), 변수 이름과 함수 이름 동일하면 모두 외부 범위의 시작 부분으로 프롬프트가 표시되지만 함수의 우선순위가 더 높으므로 함수가 변수 값을 덮어씁니다.


코드 복사

코드는 다음과 같습니다.// 변수와 함수 모두 명명된 myNamevar myName;?function myName () {
console.log ("Rich");
}

// 함수 선언이 변수 이름을 재정의합니다
console.log(myName 유형); // 함수




그러나 이 변수나 함수에 값이 할당되면 다른 변수나 함수가 이를 덮어쓸 수 없습니다.

코드 복사

코드는 다음과 같습니다.// 하지만 이 예에서는 변수 할당은 함수 선언을 재정의합니다var myName = "Richard"; // 함수 선언을 재정의하는 변수 할당(초기화)입니다.
function myName () {
console.log (" Rich") ;
}

console.log(typeof myName); // 문자열




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