나를 따라와서 javascript 범위 및 범위 chain_javascript 기술을 배우십시오.

범위는 JavaScript에서 가장 중요한 개념 중 하나입니다. JavaScript를 잘 배우고 싶다면 JavaScript 범위와 범위 체인의 작동 원리를 이해해야 합니다. 오늘의 기사는 모든 사람이 JavaScript를 더 잘 배울 수 있도록 돕기 위해 JavaScript 범위와 범위 체인에 대한 간략한 소개를 제공합니다.
1. 자바스크립트 범위

모든 프로그래밍 언어에는 범위라는 개념이 있습니다. 간단히 말해서 범위는 변수와 함수의 접근 가능한 범위입니다. 즉, 범위는 변수와 함수의 가시성과 수명 주기를 제어합니다. JavaScript에는 전역 범위와 로컬 범위라는 두 가지 유형의 변수 범위가 있습니다.

1. 글로벌 범위

코드의 어느 위치에서나 액세스할 수 있는 개체에는 전역 범위가 있습니다. 일반적으로 다음과 같은 상황에 전역 범위가 있습니다.

(1) 가장 바깥쪽 함수와 가장 바깥쪽 함수 외부에 정의된 변수에는 전역 범위가 있습니다. 예:

var authorName="小平果";
function doSomething(){
 var blogName="你不知道的JavaScript";
 function innerSay(){
 alert(blogName);
 }
 innerSay();
}
alert(authorName); //小平果
alert(blogName); //脚本错误
doSomething(); //你不知道的JavaScript
innerSay() //脚本错误

(2) 정의되지 않고 직접 할당된 모든 변수는 전역 범위를 갖도록 자동으로 선언됩니다. 예:

function doSomething(){
 var authorName="小平果";
 blogName="你不知道的JavaScript";
 alert(authorName);
}
doSomething(); //小平果
alert(blogName); //你不知道的JavaScript
alert(authorName); //脚本错误

blogName 변수는 전역 범위를 가지지만,authorName은 함수 외부에서 접근할 수 없습니다.

(3) 모든 창 개체 속성에는 전역 범위가 있습니다

일반적으로 window 객체의 내장 속성은 window.name, window.location, window.top 등과 같은 전역 범위를 갖습니다.

　2. 로컬 범위　
전역 범위와 달리 로컬 범위는 일반적으로 고정된 코드 조각 내에서만 액세스할 수 있으며, 가장 일반적으로 함수 내에서 액세스할 수 있으므로 어떤 곳에서는 사람들이 다음과 같이 이 범위를 함수 범위로 참조하는 것을 볼 수도 있습니다. 코드의 innerSay 함수에는 로컬 범위만 있습니다.

function doSomething(){
 var blogName="你不知道的JavaScript";
 function innerSay(){
 alert(blogName);
 }
 innerSay();
}
alert(blogName); //脚本错误
innerSay(); //脚本错误

2. 스코프 체인

JavaScript에서는 함수도 객체입니다. 사실 JavaScript의 모든 것은 객체입니다. 다른 개체와 마찬가지로 함수 개체에는 코드를 통해 액세스할 수 있는 속성과 JavaScript 엔진에서만 액세스할 수 있는 내부 속성 집합이 있습니다. 내부 속성 중 하나는 ECMA-262 표준 제3판에 정의된 [[Scope]]입니다. 이 내부 속성에는 함수가 생성되는 범위의 개체 컬렉션이 포함됩니다. , 함수에서 액세스할 수 있는 데이터를 결정합니다.

함수가 생성되면 해당 범위 체인은 함수가 생성된 범위에서 액세스할 수 있는 데이터 개체로 채워집니다. 예를 들어 다음 함수를 정의합니다.

function add(num1,num2) {
 var sum = num1 + num2;
 return sum;
}

add 함수가 생성되면 아래 그림과 같이 해당 범위 체인이 모든 전역 변수를 포함하는 전역 개체로 채워집니다(참고: 그림은 모든 변수의 일부만 보여줍니다).

함수 추가의 범위는 실행 중에 사용됩니다. 예를 들어 다음 코드를 실행합니다.

var total = add(5,10);

　　执行此函数时会创建一个称为“运行期上下文(execution context)”的内部对象，运行期上下文定义了函数执行时的环境。每个运行期上下文都有自己的作用域链，用于标识符解析，当运行期上下文被创建时，而它的作用域链初始化为当前运行函数的[[Scope]]所包含的对象。

　　这些值按照它们出现在函数中的顺序被复制到运行期上下文的作用域链中。它们共同组成了一个新的对象，叫“活动对象(activation object)”，该对象包含了函数的所有局部变量、命名参数、参数集合以及this，然后此对象会被推入作用域链的前端，当运行期上下文被销毁，活动对象也随之销毁。新的作用域链如下图所示：

　　在函数执行过程中，没遇到一个变量，都会经历一次标识符解析过程以决定从哪里获取和存储数据。该过程从作用域链头部，也就是从活动对象开始搜索，查找同名的标识符，如果找到了就使用这个标识符对应的变量，如果没找到继续搜索作用域链中的下一个对象，如果搜索完所有对象都未找到，则认为该标识符未定义。函数执行过程中，每个标识符都要经历这样的搜索过程。

三、作用域链和代码优化

　　从作用域链的结构可以看出，在运行期上下文的作用域链中，标识符所在的位置越深，读写速度就会越慢。如上图所示，因为全局变量总是存在于运行期上下文作用域链的最末端，因此在标识符解析的时候，查找全局变量是最慢的。所以，在编写代码的时候应尽量少使用全局变量，尽可能使用局部变量。一个好的经验法则是：如果一个跨作用域的对象被引用了一次以上，则先把它存储到局部变量里再使用。例如下面的代码：

function changeColor(){
 document.getElementById("btnChange").onclick=function(){
 document.getElementById("targetCanvas").style.backgroundColor="red";
 };
}

　　这个函数引用了两次全局变量document，查找该变量必须遍历整个作用域链，直到最后在全局对象中才能找到。这段代码可以重写如下：

function changeColor(){
 var doc=document;
 doc.getElementById("btnChange").onclick=function(){
 doc.getElementById("targetCanvas").style.backgroundColor="red";
 };
}

　　这段代码比较简单，重写后不会显示出巨大的性能提升，但是如果程序中有大量的全局变量被从反复访问，那么重写后的代码性能会有显著改善。

四、改变作用域链

　　函数每次执行时对应的运行期上下文都是独一无二的，所以多次调用同一个函数就会导致创建多个运行期上下文，当函数执行完毕，执行上下文会被销毁。每一个运行期上下文都和一个作用域链关联。一般情况下，在运行期上下文运行的过程中，其作用域链只会被 with 语句和 catch 语句影响。

　　with语句是对象的快捷应用方式，用来避免书写重复代码。例如：

function initUI(){
 with(document){
 var bd=body,
 links=getElementsByTagName("a"),
 i=0,
 len=links.length;
 while(i < len){
 update(links[i++]);
 }
 getElementById("btnInit").onclick=function(){
 doSomething();
 };
 }
}

　　这里使用width语句来避免多次书写document，看上去更高效，实际上产生了性能问题。

　　当代码运行到with语句时，运行期上下文的作用域链临时被改变了。一个新的可变对象被创建，它包含了参数指定的对象的所有属性。这个对象将被推入作用域链的头部，这意味着函数的所有局部变量现在处于第二个作用域链对象中，因此访问代价更高了。如下图所示：

　　因此在程序中应避免使用with语句，在这个例子中，只要简单的把document存储在一个局部变量中就可以提升性能。

　　另外一个会改变作用域链的是try-catch语句中的catch语句。当try代码块中发生错误时，执行过程会跳转到catch语句，然后把异常对象推入一个可变对象并置于作用域的头部。在catch代码块内部，函数的所有局部变量将会被放在第二个作用域链对象中。示例代码：

try{
 doSomething();
}catch(ex){
 alert(ex.message); //作用域链在此处改变
}

　　请注意，一旦catch语句执行完毕，作用域链机会返回到之前的状态。try-catch语句在代码调试和异常处理中非常有用，因此不建议完全避免。你可以通过优化代码来减少catch语句对性能的影响。一个很好的模式是将错误委托给一个函数处理，例如：

try{
 doSomething();
}catch(ex){
 handleError(ex); //委托给处理器方法
}

　　

최적화된 코드에서 handlerError 메서드는 catch 절에서 실행되는 유일한 코드입니다. 이 함수는 예외 객체를 매개변수로 전달받기 때문에 보다 유연하고 균일하게 오류를 처리할 수 있습니다. 명령문은 하나만 실행되고 지역 변수에는 액세스되지 않으므로 범위 체인의 임시 변경은 코드 성능에 영향을 미치지 않습니다.

위 내용은 이 글의 전체 내용입니다. 이 글을 통해 모두가 JavaScript의 범위와 범위 체인에 대해 더 잘 이해하고 함께 발전할 수 있기를 바랍니다.