JavaScript 범위 및 이 키워드

프로그래머로서 여러분은 C++의 this 또는 Python의 self와 같이 객체 지향 언어에서 현재 객체를 참조하는 참조(또는 포인터)에 익숙했을 것입니다. 물론 OO 속성도 있습니다(javascript는 실제로 소위 함수형 언어인 JavaScript에도 현재 속성의 객체를 참조하는 포인터(또는 참조)가 있는데, 이것이 바로 this 키워드입니다.

이 키워드를 이해하려면 한 문장만 기억하고 싶다면 이 키워드가 항상 현재 함수의 소유자 객체(실행 공간)를 가리키는 것이 되어야 합니다. , 아래의 자세한 지침을 참조하세요.

그럼 범위란 무엇인가요?

위키피디아의 설명은 다음과 같습니다. 컴퓨터 프로그래밍에서 범위는 값과 표현이 연관된 둘러싸는 컨텍스트입니다. 중국어는 값이나 표현식과 연관된 컨텍스트(참조할 수 있는 실행 공간)를 지정하는 소위 범위입니다.

이것과 범위가 무슨 관련이 있나요? 위의 정의에서 this는 항상 현재 이 함수를 참조하는 개체를 가리키며, 현재 참조되는 개체를 확인하려면 현재 함수의 범위를 파악해야 합니다. 자세한 내용은 아래 분석을 참조하세요.

이 키워드

아래의 몇 가지 예를 참조하세요.

파이썬 예:

class Person(object):
"""a person class
    """
def __init__(self, name):
self.name = name    #这里的self指向的是实例化后的对象,如下面中的Magic
def get_name(self):
return self.name
Magic = Person("Magic")
print Magic.name

자바스크립트 예:

window.name = "Magic from window"
var get_name = function(){
    // this的具体指向只能在运行时才能确定,也就是确定运行时调用其的对象
    return this.name;   
};
// 输出Magic from window, get_name调用的对象为window
alert(get_name());  
var obj = {}
obj.name = "Magic from obj";
// 输出Magic from obj, 我们强制地使用了 apply来更改调用的对象,使其指向obj
alert(get_name.apply(obj)); 
var innerobj = {
    "name" : "Magic from innerobj"
};
innerobj.get_name = get_name;   // 使得innerobj的get_name方法指向了global scope的get_name函数
alert(innerobj.get_name()); // 输出Magic from innerobj, 此时this指向的是innerobj

위의 간단한 예에서 이는 항상 런타임에 실행될 수 있습니다. 특정 방향을 호출 개체를 알 수 있습니까? 그리고 이는 동적 언어의 중요한 특징이기도 합니다.

그럼 이것이 현재 가리키는 참조 객체를 어떻게 결정할까요? 일반적으로 다음과 같이 판단할 수 있습니다.

전역 범위에서 호출되는 경우(전역 범위가 무엇인지 명확히 하려면 아래 설명 참조) Bowser의 최상위 개체 창을 가리킵니다. : get_name()

이런 참조가 있다면 innerobj. get_name(), 이것이 innerobj

을 가리키는 것이 분명합니다. Apply 또는 call을 사용하여 강제 참조 개체를 가리키면 get_name과 같은 강제 개체도 가리킬 것입니다. 적용(obj).

적용 및 호출에 대하여

이 두 키워드는 이 참조 객체(실행 공간)의 강제로 쉽게 이해될 수 있습니다. 두 키워드의 구문은 다음과 같습니다.

fun. .call(object, arg1, arg2, ...)

fun.apply(object, [arg1, arg2, ...])

둘의 목적은 동일합니다(동적) 함수의 실행 공간을 바꾸거나, 이것이 가리키는 객체를 바꾸거나), 함수에 제공되는 매개변수의 호출 방식만 다릅니다.

샘플 코드는 다음과 같습니다.

var test_call_apply = function(name, gender, school){
alert(this.age + name + gender + school);
};
test_call_apply.call({age:24}, "Magic", "male", "ISCAS");
test_call_apply.apply({age:24}, ["Magic", "male", "ISCAS"]);

범위 세부 정보

var global_scope = "I'm global";
var fun = function(){
var fun_scope = "I'm in fun scope";
return innerfun(){
var inner_func_scope = "I'm in the inner fun scope";
return global_scope + fun_scope + inner_func_scope; //此处的引用是重要的,请特别注意
};
};
alert(fun()());

위 코드에 유의하세요. 여기서:

global_scope는 전역 범위입니다.

fun_scope는 함수의 범위입니다.

inner_func_scope 함수 내에 위치한 함수의 범위입니다

계속해서 함수를 삽입할 수도 있으며 그러면 여러 범위가 생성됩니다.

그러면 왜 innerfun 메소드가 자신의 범위에 속하지 않는 변수를 참조할 수 있는가 하는 질문이 생깁니다.

이 질문에 답하기 전에 먼저 스코프 체인의 개념을 소개해야 합니다. 소위 범위 체인은 JavaScript 코드에 형성된 우선순위 및 관련 범위의 체인을 나타냅니다.

위 코드를 예로 들면

전역 범위의 경우 자체적으로 전역 범위 체인을 생성합니다(물론 현재 이 체인에는 범위가 하나만 있습니다).

fun 함수의 범위를 위해 먼저 전역과 동일한 범위 체인을 설정한 다음 다음 구조와 유사하게 자체 범위(현재 이 체인에는 2개의 범위가 있음)를 추가합니다. global ==>fun

innerfun의 경우 fun 함수가 소유한 체인 외에도 자체 범위도 추가합니다(물론 현재 이 체인에는 3개의 범위가 있습니다). 구조 : global==>fun==>innerfun

스코프 체인은 다음과 같은 특징을 갖습니다:

순서 지정

함수가 생성될 때마다 범위와 추가 자신만의 스코프 체인에 추가하세요

이 체인은 스택과 비슷합니다. 변수를 찾을 때는 항상 위에서부터 시작하세요.

실제로는 표현식을 계산할 때 자체 스코프 체인을 위에서 아래로 검색하고, 검색한 후 전체 체인을 찾지 못하면 즉시 이 값을 반환한다는 것을 이해하기 쉽습니다.

이 검색 메커니즘은 일반적으로 체인의 프런트 엔드에 위치한 범위가 더 높은 우선 순위를 갖는다고 결정합니다.

예를 들어 javascript가 global_scope + fun_scope + inner_func_scope; 표현식을 계산할 때 위 이미지의 범위 체인을 찾아 최종 결과를 결정합니다.

一些说明

如果你弄清楚了上面的论述，应该说你对this关键字和scope已经具有完全的知识基础了，但是我们需要在实际中更好地使用和理解这些概念，这样才能把能力上升到别一个层次，这也即所谓的理论与实践的关系。

请看下面这个例子：

var change_color = function(){
this.style.color = "red";
};
window.onload = function(){
var text = document.getElementById("text");
text.onclick = change_color;    //此时this指向的是text这个对象(dom对象)
};
// 下面这行代码是在body中
//这点需要特别注意, inline script指向的是window,此处会无定义  
<span id="another" onclick="change_color()">My color will be changed2.</span>

需要特别注意的是：

inline event registration中的this并非指向的是自己的dom节点，而是global scope的window，这点可以从上面的例子中得到证明

这种inline event registration是不可取的，推荐的是 Unobtrusive JavaScript (处理逻辑和页面结构相分离)

javascript 是一种非常强大的动态语言，它是披着C语言外衣的函数式语言，如果你只当作它是一种类C的命令式语言，那么你的知识层次还过于低，而倘若你能够理解到javascript 的函数式语言本质，你在运用 javascript，理解 jQuery 及其它的库，甚至自己写一些 javascript 都会游刃有余的。