javascript 변수scope_javascript 기술 사용 시 발생하는 일반적인 오류 요약

오늘 rainweb 블로그에서 아주 좋은 글을 보고 공유해야겠다는 생각이 들었습니다. 이 글을 주의 깊게 읽으면 js Scope에 대한 이해가 한 단계 더 높아질 것이라고 믿습니다.

머리말: JavaScript에서 변수 범위는 종종 골치 아픈 문제이고 오류가 발생하기 쉬운 상황을 10가지 질문을 통해 간략하게 요약한 것입니다.

질문 1

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

var name = ' casper'; // 의심할 여지 없이 출력: casper

질문 2

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

alert(name); //오류: 존재하지 않는 변수를 사용해도 객체가 정의되지 않아 오류가 발생합니다
age = 24; // 잘못된 건 없는데, 나이가 정의되어 있지 않나요? Rhinoceros 책을 읽고 //정의되지 않은 변수에 값을 할당하면 다음과 같은 전역 변수가 생성된다는 점을 이해하세요. var age = 24

질문 3

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

alert(name); //이름은 아래에 정의되어 있습니다. 여기에 오류가 있어야 합니다. ? 잘못된! 여기에 팝업이 나타납니다: undefed
var name = 'casper';

설명: JavaScript 코드가 구문 분석되면 var로 선언된 변수를 검색하여 미리 선언합니다. 프로세스는 다음과 같습니다.

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

var name; / name 변수만 선언했지만 값이 할당되지 않았으므로 다음과 같습니다. undefed
alert(name); name = 'casper'

질문 4

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

var name = 'casper'
function show(){
alert(name);
name = 'hello'; //전역 변수 이름을 'hello'로 변경합니다.
}
show() //출력: casper

질문 5

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

var name = 'casper';
function show(){ 경고(name ); //출력: 정의되지 않음, 죽고 싶나요?
var name = 'hello' //참고: 질문 4와 비교하면, 여기 이름 앞에 추가 var가 있습니다.
} show( : 외부 전역 변수와 동일한 이름의 로컬 변수가 있는 경우 해당 로컬 변수가 먼저 사용됩니다. 여기에는 name)
function show( ){ var name; Alert(name); name = 'hello'; }

질문 6




코드 복사

var list = [1,2,3] function show(){ if(typeof list === 'undefine') { list = [ ]; } alert(list.length); show(); // 결과: 3, 한눈에 알 수 있나요? =, 잠시만 기다려주세요.

질문 7




코드 복사

코드는 다음과 같습니다.

var list = [1,2,3]; function show(){ if(typeof list === 'undefine' ) { var list = []; 질문 6에는 var } Alert(list.length) }; show(); //결과 :0, 갑자기 죽고 싶은 충동이 생기나요?

설명: JavaScript에는 블록 수준 범위(즉, {}에 의해 제한되는 범위)가 없으며 모든 변수는 어디에 있든 상관없이 함수에 선언됩니다. 명령문은 함수 전체에 정의된다는 점에서 C와 다릅니다. 그리고 다른 회색 영역을 빠르게 생각을 바꾸고 시대에 발맞추세요

그럼 show 메소드의 실제 내부 파싱 로직을 살펴보겠습니다




복사 code

코드는 다음과 같습니다.


function show(){ var list; //list는 지역 변수이며 아직 여기서 사용할 수 없습니다. >if(typeof 목록 === '정의되지 않음'){

list = [] } alert(list.length) };
질문 8

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

alert(typeof show ); / /결과: 함수, 눈을 믿으세요, 올바르게 읽으셨습니다.
function show(){}

설명: 자바스크립트 코드 구문 분석 과정, 양식 문과 유사 function show() 함수는 var로 선언된 변수와 마찬가지로 함수 선언과 정의가 동시에 완료되지만, var로 선언된 변수 할당은 나중에 완료된다는 점이 차이점입니다.
질문 9

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

alert(typeof show) / /결과: 정의되지 않음, 다시 한번 다듬어주세요 눈, 올바르게 읽었습니다
var show = function(){};

설명: 함수를 정의하는 두 프로세스에는 약간의 차이가 있습니다. 함수 정의 및 함수 표현식 사용
함수 정의: function show(){}
함수 표현식: var show = function(){}
함수 정의 방법을 사용하면 함수가 미리 정의됩니다. 함수 표현식 사용 선언 방법 및 함수 정의는 var로 선언한 지역 변수와 동일합니다. 함수 선언은 미리 되지만 함수 정의 위치는 변경되지 않습니다.

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

var show;alert(typeof show)
show = function(){ };

질문 10

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

var data = {name:'casper'};
function data(){ Alert('casper') }
data(); //TypeError: 객체가 함수가 아닙니다

모니터를 부수고 싶은 충동이 드시나요? . . 이때 실제로 data는 {name:'casper'}이고 객체가 함수로 호출되므로 오류가 보고됩니다
앞서 언급한 것처럼 함수에서 선언한 변수(함수 정의를 통해)와 var 선언이 고급화됩니다. , 하지만 순서는 다음과 같습니다.

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

function data(){ 경고('casper');
} var data = {name:'casper'}
data();

, 결과가 다릅니다.

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

var data = {name:'casper'};
var data = function (){ //함수 표현식을 통해 함수 선언
alert('casper') }
data() // 결과: casper

결합 Wen이 다음과 같이 프로세스를 추측하는 것은 어렵지 않습니다.

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

var data; /결과: 캐스퍼