(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 name="one";
function test(){
console.log(name); //one
name="two";
console.log(name); //two
}
test();
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对象
看下面的代码：
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
