집 > 기사 > 웹 프론트엔드 > js 스코프와 스코프체인의 개념 이해 및 사용_기본지식

js 스코프와 스코프체인의 개념 이해 및 사용_기본지식

WBOY원래의: 2016-05-16 17:37:101105검색

(1) 범위

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

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

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

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

var name="one";
function test(){
 var name="two";
 console.log(name); //two
}
test();

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

var name="one";
function test(){
 name="two";
 
}
test();
console.log(name); //two

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

function test(){
 for(var i=0;i<10;i++){
  if(i==5){
   var name = "one";
  }
 }
 console.log(name); //one
}

test(); //因为是函数级作用域，所以可以访问到name="one"

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

function test1(){
 var name = "one";
 return function (){
  console.log(name);
 }
}
test1()();

test1() 후에 외부 함수가 호출되고 내부 함수가 반환됩니다. 그런 다음 continue()가 호출되고 이에 따라 내부 함수가 실행되므로 "one"
이 출력됩니다. 중첩된 함수에는 클로저가 포함되며, 여기서는 내부 함수가 범위 체인 메커니즘을 포함하는 외부 함수에 선언된 변수 이름에 액세스할 수 있습니다.

2.JS에서 미리 선언

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

Tip: 사전 선언은 js 엔진이 미리 컴파일된 경우 코드가 실행되기 전에 발생합니다

예를 들어

var name="one";
function test(){
 console.log(name); //undefined
 var name="two";
 console.log(name); //two
}

test();

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

var name="one";
function test(){
 var name;
 console.log(name); //undefined
 name="two";
 console.log(name); //two
}

test();

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

var name="one";
function test(){
 console.log(name); //one
 name="two";
 console.log(name); //two
}

test();

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

function test(name){
 console.log(name); //one
 name="two";
 console.log(name); //two
}

var name = "one";
test(name);
console.log(name); // one

앞서 언급했듯이 기본 유형은 값으로 전달되므로 테스트에 전달된 이름은 실제로는 함수가 반환된 후 지워집니다.

함수의 name="two"가 두 개의 독립적인 이름이기 때문에 전역 이름을 변경한다고 생각하지 마세요

(2) 스코프체인

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

function test1(){
 var name = "one";
 return function (){
  console.log(name);
 }
}
test1()();

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

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

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

2. 스코프 체인 예시:

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

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

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

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

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

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

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

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

범위 연결의 실제 예:

var name="one";
function test(){
 var name="two";
 function test1(){
  var name="three";
  console.log(name); //three
 }
 function test2(){
  console.log(name); // two
 }
 
 test1();
 test2();
}

test();

上边是个嵌套函数，相应的应该是作用域链上有三个对象
那么在调用的时候，需要查找name的值，就在作用域链上查找

当成功调用test1()的时候，顺序为 test1()->test()->全局对象window 因为在test1()上就找到了name的值three，所以完成搜索返回
当成功调用test1()的时候，顺序为 test2()->test()->全局对象window 因为在test2()上没找到name的值，所以找test()中的，找到了name的值two,就完成搜索返回

还有一个例子有时候我们会犯错的，面试的时候也经常被骗到。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function buttonInit(){
  for(var i=1;i<4;i++){
    var b=document.getElementById("button"+i);
    b.addEventListener("click",function(){ 
      alert("Button"+i); //都是 Button4
    },false);
  }
}
window.onload=buttonInit;
</script>
</head>
<body>
<button id="button1">Button1</button>
<button id="button2">Button2</button>
<button id="button3">Button3</button>
</body>
</html>

为什么？
根据作用域链中变量的寻找规则：

b.addEventListener("click",function(){ 
      alert("Button"+i);
    },false);

这里有一个函数，它是匿名函数，既然是函数，那就在作用域链上具有一个对象，这个函数里边使用到了变量i，它自然会在作用域上寻找它。
查找顺序是这个匿名函数 -->外部的函数buttonInit() -->全局对象window

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

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

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

那怎么解决呢？

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function buttonInit(){
  for(var i=1;i<4;i++){
    (function(data_i){
    var b=document.getElementById("button"+data_i);
    b.addEventListener("click",function(){ 
      alert("Button"+data_i);
    },false);
    })(i);
  }
}
window.onload=buttonInit;
</script>
</head>
<body>
<button id="button1">Button1</button>
<button id="button2">Button2</button>
<button id="button3">Button3</button>
</body>
</html>

这样就可以 Button1..2..3了

4.上述就是作用域链的基本描述，另外，with语句可用于临时拓展作用域链（不推荐使用with）

语法形如：

with(object)

statement

这个with语句，将object添加到作用域链的头部，然后执行statement,最后把作用域链恢复到原始状态

简单用法：

比如给表单中各个项的值value赋值

一般可以我们直接这样

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;
那么使用

with(o){
 x = 2;
}

就可以转换成 o.x = 2;
假如o没有定义属性x，它的功能就只是相当于 x = 2; 一个全局变量罢了。

因为with提供了一种读取o的属性的快捷方式，但他并不能创建o本身没有的属性。

要理解变量的作用域范围就得先理解作用域链
用var关键字声明一个变量时，就是为该变量所在的对象添加了一个属性。
作用域链：由于js的变量都是对象的属性，而该对象可能又是其它对象的属性，而所有的对象都是window对象的属性，所以这些对象的关系可以看作是一条链
链头就是变量所处的对象，链尾就是window对象

看下面的代码：

复制代码代码如下:

 
function t() { 

var a; 

function t2() { 

var b; 

} 

}

js中函数也是对象，所以变量a所在的对象是t，t又在window对象中，所以a的作用域链如下
t--window
那么b所以在的对象即t2，t2又包含在t中，t又在window对象，所以b的作用域链如下
t2--t--window
明白了作用域链下面就开始变量的作用域分析了
1 javascript 没有var的变量都为全局变量，且为window对象的属性

复制代码代码如下:

 
function test1() { 

//执行这个句的时候它会找作用域对象，这个函数就是作用域链中的第一个对象，但这个对象中没有相关的var语句 

//于里就找作用域链的第二个对象，即全局对象，而全局对象中也没有相关的var语句 

//由于没有相关的var语句，js隐式在函数地声明了变量即var all; 

all = 30; 

alert(all); 

} 

test1(); 

alert(all); 

alert(window.all);

2 함수 내에서 정의된 변수(함수 내 함수 제외)는 함수 전체 내에서 유효합니다.

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

 
함수 test2() { 

변수 = 0 

//for 조건에 변수를 정의합니다. 이번 변경의 범위 체인 객체는 이 함수입니다 

//따라서 전체 함수에서 유효합니다 

for (var i = 0; i 
t = 나 

} 

경고(i) 

} 

테스트2()

3 함수 내부의 변수는 전역 변수를 동일한 이름으로 대체합니다

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

 
var t = "bb" 

함수 테스트() { 

//t를 실행하면 먼저 범위 체인 개체를 찾습니다. 함수 내부에 정의되어 있으므로 이 함수는 범위 체인의 첫 번째 개체입니다. 

//그리고 이 객체에는 t의 정의가 있으므로 t는 전역 변수 t를 대체하는 지역 변수입니다. 

//t는 이때 정의만 하고 할당이 없습니다. 할당은 다음 줄에 있으므로 여기서는 undefed가 출력됩니다

경고(t) 

var t = "aa" 

경고(t) 

} 

테스트();

4 블록 범위 없음

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

if (true) { 

//변수가 블록에 정의되어 있고 해당 범위 체인의 첫 번째 개체는 전역 개체 창입니다. 

var tmp = 0 

} 

//tmp의 스코프 체인의 첫 번째 객체는 전역 객체 창이며, 위 전역 객체에는 관련된 var 문이 있으므로 출력은 0입니다 

경고(tmp)

다음 내용은 온라인 블로그에서 읽은 내용을 요약한 것입니다. 핵심만 기억하고, 기꺼이 공유해 주신 블로거분들께 진심으로 감사드립니다. 거인의 어깨!
1.

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

var temp = (함수(){ 

var 이름="테스트" 

반환 함수(){ 

경고(이름) 

} 

})();

위의 코드 조각은 jser에서 흔히 볼 수 있는 작성 방법이며, 전설적인 클로저입니다. 우리 모두 알고 있듯이 temp();를 호출하면 "test"가 팝업됩니다. 이 프로세스는 다음 세 가지 이론을 기반으로 설명할 수 있습니다.
1) js 범위는 함수의 구분 기호에만 관련되며 함수의 중첩은 범위 체인을 형성합니다.
2) 스코프 체인 생성 규칙은 이전 환경의 스코프 체인을 복사하고 체인의 선두에 환경 변수 객체에 대한 포인터를 두는 것입니다. 3) Javascript에서는 객체가 더 이상 참조되지 않으면 해당 객체는 GC에 의해 재활용됩니다. 두 객체가 서로를 참조하고 더 이상 제3자가 참조하지 않는 경우, 서로를 참조하는 두 객체도 재활용됩니다.

위 3가지 항목을 읽어도 이해가 되지 않는다면, 이론을 바탕으로 한 다음의 자세한 코드 설명을 읽어보세요.
첫째, 외부 함수는 실행 후에 삭제됩니다. 그러나 외부 함수의 범위 체인은 내부 함수의 범위 체인의 일부를 형성하면서 복사됩니다. 참조(2조에 따라), 내부 함수는 여전히 name에 액세스할 수 있습니다. 반환된 내부 함수는 temp에 의해 참조되므로 외부 함수가 실행 후 삭제될 때 내부 함수는 외부 함수의 일부이지만 여전히 존재합니다. , 3차 근거와 마찬가지로 제3자가 인용한 전설적인 종결도 이 원칙입니다

성명：

이전 기사：새로운 windows_javascript 기술로 하이퍼링크를 여는 방법 요약다음 기사：새로운 windows_javascript 기술로 하이퍼링크를 여는 방법 요약

js 스코프와 스코프체인의 개념 이해 및 사용_기본지식

관련 기사