JS 범위 및 범위 체인에 대한 자세한 설명_기본 지식

(1) 범위

변수의 범위는 프로그램 소스 코드에 정의된 변수의 영역입니다.

1. JS에서는 어휘 범위를 사용합니다

함수 내에서 선언되지 않은 변수(함수에서 var가 생략된 경우에도 전역 변수로 간주됨)를 전역 변수(전역 범위)라고 합니다.

함수 내에서 선언된 변수는 함수 범위를 가지며 지역 변수입니다

로컬 변수는 전역 변수보다 우선순위가 높습니다

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

var name="one";
함수 테스트(){
var name="two";
console.log(이름); //두개
}
테스트();

함수에서 var를 생략하면 실제로 전역 변수에 다시 작성되었기 때문에 전역 변수에 영향을 미칩니다.

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

var name="one";
함수 테스트(){
이름="두";
}
테스트();
console.log(이름); //두개

함수 범위, 즉 함수는 범위의 기본 단위입니다. js에는 if for 등 c/c와 같은 블록 수준 범위가 없습니다.

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

함수 테스트(){
for(var i=0;i If(i==5){
      var name = "one";
}
}
console.log(이름); //하나
}
test(); //함수 수준의 범위이기 때문에 name="one"에 접근할 수 있습니다

물론 js에서도 고차 함수가 사용되는데, 이는 실제로 중첩 함수로 이해될 수 있습니다

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

함수 테스트1(){
var 이름 = "하나";
반환 함수(){
console.log(이름);
}
}
test1()();

test1() 후에 외부 함수가 호출되고 내부 함수가 반환됩니다. 그런 다음 continue()가 호출되고 이에 따라 내부 함수가 실행되므로 "one"

이 출력됩니다.

중첩 함수에는 클로저가 포함되며 이에 대해서는 나중에 설명하겠습니다. 여기서 내부 함수는 범위 체인 메커니즘과 관련된 외부 함수에 선언된 변수 이름에 액세스할 수 있습니다.

2.JS에서 미리 선언

js의 함수 범위는 함수 내에서 선언된 모든 변수가 함수 본문 내에서 항상 표시된다는 의미입니다. 게다가 변수가 선언되기 전에도 사용할 수 있는 상황을 호이스팅(hoisting)이라고 합니다

팁: js 엔진이 미리 컴파일되면 코드가 실행되기 전에 미리 선언되는 현상이 발생합니다

예를 들어

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

var name="one";
함수 테스트(){
console.log(이름); //정의되지 않음
var name="two";
console.log(이름); //두개
}
테스트();

위의 내용은 다음과 같은 효과를 얻습니다

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

var name="one";
함수 테스트(){
변수 이름;
console.log(이름); //정의되지 않음
이름="두";
console.log(이름); //두개
}
테스트();

var를 다시 제거해 보시겠습니까? 전역 변수가 된 함수 내 이름이므로 더 이상 정의되지 않습니다

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

var name="one";
함수 테스트(){
console.log(이름); //하나
이름="두";
console.log(이름); //두개
}
테스트();

3. 위에서 언급한 매개변수 중 어느 것도 통과되지 않았다는 점에 주목할 필요가 있습니다. 테스트에 매개변수가 있으면 어떻게 되나요?

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

기능 테스트(이름){
console.log(이름); //하나
이름="두";
console.log(이름); //두개
}
var 이름 = "하나";
테스트(이름);
console.log(이름); // 하나

앞서 언급했듯이 기본 유형은 값으로 전달되므로 테스트에 전달된 이름은 실제로는 함수가 반환된 후 지워집니다.
함수의 name="two"가 두 개의 독립적인 이름이기 때문에 전역 이름을 변경한다고 생각하지 마세요

(2) 스코프체인

위에 언급된 고급 기능에는 범위 체인이 포함됩니다

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

함수 테스트1(){
var 이름 = "하나";
반환 함수(){
console.log(이름);
}
}
test1()();

1. 설명을 위해 큰 단락을 소개합니다.
JavaScript 코드(전역 코드 또는 함수)의 각 부분에는 이와 관련된 범위 체인이 있습니다.

이 범위 체인은 개체의 목록 또는 연결된 목록입니다. 이 개체 그룹은 이 코드에서 "범위 내" 변수를 정의합니다.

js가 변수 x의 값을 찾아야 하는 경우(이 프로세스를 변수 확인이라고 함) 체인의 첫 번째 개체에서 시작됩니다. 이 개체에 x라는 속성이 있는 경우 이 속성의 값은 다음과 같습니다. 첫 번째 객체에 x라는 속성이 없으면 js는 체인에서 다음 객체를 계속 검색합니다. 두 번째 객체에 여전히 x라는 속성이 없으면 계속해서 다음 객체를 찾습니다. 범위 체인의 개체에 x 속성이 포함되어 있지 않으면 x가 이 코드의 범위 체인에 존재하지 않는 것으로 간주되어 결국 ReferenceError 예외가 발생합니다.

2. 스코프 체인 예시:

js의 최상위 코드(즉, 함수 정의가 포함되지 않은 코드)에서 범위 체인은 전역 개체로 구성됩니다.

중첩이 포함되지 않은 함수 본문에는 범위 체인에 두 개의 개체가 있습니다. 첫 번째는 함수 매개변수와 지역 변수를 정의하는 개체이고 두 번째는 전역 개체입니다.

중첩된 함수 본문에는 범위에 객체가 3개 이상 있습니다.

3. 스코프 체인 생성 규칙:

함수를 정의하면(정의되면 시작됩니다) 실제로 범위 체인을 저장합니다.

이 함수가 호출되면 매개변수나 지역 변수를 저장할 새 개체를 만들고 해당 범위 체인에 개체를 추가하며 "체인"을 호출하는 함수에 대한 새롭고 긴 표현을 만듭니다.

중첩 함수의 경우 상황이 다시 변경됩니다. 외부 함수가 호출될 때마다 내부 함수가 다시 정의됩니다. 외부 함수가 호출될 때마다 범위 체인이 다르기 때문입니다. 내부 함수는 정의될 때마다 미묘하게 달라야 합니다. 내부 함수의 코드는 외부 함수가 호출될 때마다 동일하며 이 코드와 관련된 범위 체인도 다릅니다.

(tip: 위의 3가지 사항을 잘 이해하고 기억해 두세요. 본인의 말로 말하는 것이 가장 좋으며, 그렇지 않으면 면접관이 직접 물어볼 것이기 때문에 외워야 합니다: 스코프 체인에 대해 설명해 주세요.. .)

범위 연결의 실제 예:

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

var name="one";
함수 테스트(){
var name="two";
함수 테스트1(){
var name="세";
console.log(이름); //세개
}
함수 test2(){
console.log(이름); // 2개
}
test1();
test2();
}
테스트();

위는 중첩된 함수이므로 범위 체인에 세 개의 객체가 있어야 합니다
그런 다음 호출할 때 이름 값을 찾아야 하며 범위 체인에서

를 검색하면 됩니다.

test1()이 성공적으로 호출되면 test1()->test()-> 전역 객체 창 순서가 됩니다. test1()에서 name의 값 3을 찾았으므로 검색이 완료되고

test1()이 성공적으로 호출되면 test2()->test()->전역 개체 창 순서가 됩니다. test2()에서는 name 값을 찾을 수 없으므로 test( ) 이름의 값이 2이면 검색이 완료되고

이 반환됩니다.

또 다른 예는 우리가 면접 중에 실수를 하거나 속이는 일이 잦다는 것입니다.

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

ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
http://www.w3.org/1999/xhtml">


머리>

Button1
Button2
Button3
본문>

为什么?
根据작업용域链中变weight的寻找规则：

复主代码 代码如下:

b.addEventListener("click",function(){
            Alert("버튼" i);
        },거짓);

여기에는 모두가 있습니다.然会는 域上寻找它。
查找顺序是 这个匿name函数 -->외부의 函数buttonInit() -->전체局对象창

匿name函数中找不到i,自然跑到了buttonInit(), ok,for中找到了，

这时注册事件已经结束了, 不要以为它会一个一个i放下来, 因为函数数数数数数数数域の内的变weight对是对对業域内是一直可见的，就是说会保持到最后的状态

当匿name函数要使用i的时候，注册事件完了，i已经变成了4，所以都是Button4

那怎么解决呢?

给它传值进去吧, 每次循环时, 再使用一个匿name函数, 把for里边的i传进去, 匿name函数的规则如代码

复主代码 代码如下:

ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
http://www.w3.org/1999/xhtml">


머리>

Button1
Button2
Button3
본문>

这样就可以 버튼1..2..3了

4.上述就是작업용域链적基本描述, 另외, with语句可用于临时拓展작업용域链(不推荐使用 with)

문법적 형태:

(객체)와 함께

성명

这个with语句，将object添加到态添加到态始状态

简单사용법：

比如给表单中各个项의 가치 가치赋值

一般可以我们直接这样

复主代码 代码如下:

var f = document.forms[0];
f.name.value = "";
f.age.value = "";
f.email.value = "";

with를 소개한 후 (with를 사용하면 일련의 문제가 발생하므로 위의 형식을 사용하겠습니다)

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

with(document.forms[0]){
f.name.value = "";
f.age.value = "";
f.email.value = "";
}

또한 객체 o에 x 속성이 있으면 o.x = 1;
그런 다음

을 사용하세요.

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

(o)와 함께{
x = 2;
}

은 o.x = 2로 변환될 수 있습니다.
o가 속성 x를 정의하지 않으면 해당 기능은 x = 2 전역 변수와 동일합니다.

with는 o의 속성을 읽는 지름길을 제공하지만, o 자체에 없는 속성을 생성할 수는 없기 때문입니다.

이상 내용이 이 글의 전체 내용입니다. 자바스크립트를 배우시는 모든 분들께 도움이 되었으면 좋겠습니다.