자바스크립트 시리즈 심층이해(13) 이거요?_자바스크립트 실력?-JS 튜토리얼-php.cn

소개
이 기사에서는 실행 컨텍스트와 직접적으로 관련된 자세한 내용을 논의하겠습니다. 토론 주제는 바로 이 키워드입니다. 실습을 통해 이 주제가 어렵다는 것이 입증되었으며 다양한 실행 상황에서 이를 결정하는 데 문제가 자주 발생합니다.

많은 프로그래머는 프로그래밍 언어에서 this 키워드가 객체 지향 프로그램 개발과 밀접한 관련이 있으며 완전히 생성자가 새로 생성한 객체를 가리킨다고 믿는 데 익숙합니다. 이는 ECMAScript 사양에서도 구현되지만 앞으로 살펴보겠지만 ECMAScript에서는 새로 생성된 객체를 가리키는 것에만 국한되지 않습니다.

영어 번역: Stoyan Stefanov의 도움을 받은 Dmitry A. Soshnikov
게시 날짜: 2010-03-07
http://dmitrysoshnikov.com/ecmascript/chapter-3-this/

러시아어 원문: Dmitry A. Soshnikov
수정: Zerogif
출시: 2009-06-28
업데이트: 2010-03-07
http://dmitrysoshnikov.com/ ecmascript /ru-chapter-3-this/

이 기사의 대부분의 내용은 다음을 참조합니다: http://www.denisdeng.com/?p=900
일부 문장은 다음을 참조합니다: justin의 중국어 번역
코드 복사
ECMAScript에서 이것이 정확히 무엇인지 자세히 살펴볼까요?

정의
실행 컨텍스트의 속성입니다.

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

 
activeExecutionContext = { 
VO: {...}, 
this: thisValue 
} 

여기서 VO는 이전 장의 변수 객체에서 논의했습니다.

이 값은 컨텍스트에 들어갈 때 결정되며 컨텍스트가 실행되는 동안 변경되지 않습니다.

이러한 사례를 더 자세히 살펴보겠습니다.

글로벌 코드에서는
모든 것이 간단합니다. 전역 코드에서는 항상 전역 객체 자체이므로 간접적으로 참조하는 것이 가능합니다.

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

 
// 전역을 정의하는 속성을 표시합니다. object
this .a = 10; // global.a = 10 
alert(a); // 10 

// 식별되지 않은 항목에 할당하여 암시적 
b 
 Alert(this.b); // 20 

// 변수 선언을 통해서도 암시적으로 선언됩니다
// 전역 컨텍스트의 변수 객체가 전역 객체 자체이기 때문입니다
var c = 30; 
alert(this.c); // 30 

함수 코드에서 this
이것은 함수 코드에서 사용할 때 흥미롭습니다. 많은 문제.

이 유형의 코드에서 이 값의 첫 번째(아마도 가장 중요한) 특징은 함수에 정적으로 바인딩되지 않는다는 것입니다.

위에서 언급한 것처럼 Context에 들어갈 때 이 값이 결정되는데, 함수 코드에서는 매번 전혀 다른 값을 가집니다.

어쨌든 this의 값은 코드가 실행되는 동안 변경되지 않습니다. 즉, 변수가 아니기 때문에 새 값을 할당할 수 없습니다(반대로 Python에서는 프로그래밍 언어에서는 런타임 중에 지속적으로 변경될 수 있는 객체 자체로 잘 정의되어 있습니다.

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

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

 
function foo() { 
alert (this) ; 
} 

foo(); // 전역 

alert(foo === foo.prototype.constructor); // true 

/ / 하지만 동일합니다. 함수의 호출 표현식이 다르면 다릅니다. 

foo.prototype.constructor() // foo.prototype

을 정의된 메소드로 사용할 수 있습니다. 일부 객체에 의해 함수가 호출되지만 이는 이 객체에 설정되지 않습니다.

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

 
var foo = { 
bar: function () { 
alert(this); 
alert(this === foo); 
} 
} // foo, true 
 
var exampleFunc = foo.bar; 

alert(exampleFunc === foo.bar); // true 

// 다시 한번, 동일한 호출 표현식 function , 이것은 다릅니다 

exampleFunc(); // global, false 

 
그렇다면 함수를 호출하는 방식이 this 값에 어떤 영향을 미칠까요? 이 값의 결정을 완전히 이해하려면 내부 유형 중 하나인 참조 유형(참조 유형)을 자세히 분석해야 합니다. 

참조 유형(Reference type)
의사 코드를 사용하면 참조 유형의 값을 propertyName의 base(즉, 속성이 있는 객체)와 base라는 두 가지 속성이 있는 객체로 표현할 수 있습니다. .

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

var valueOfReferenceType = {

base: , 
propertyName:  
} 

 
참조 유형 값에는 두 가지 상황만 있습니다. 

식별자
또는 속성 접근자
식별자의 처리는 다음 기사에서 자세히 논의할 것입니다. 여기서는 이 알고리즘의 반환 값이 항상 참조 유형 값이라는 것만 알면 됩니다. 이것을 말하는 것이 중요합니다).

식별자는 전역 개체의 변수 이름, 함수 이름, 함수 매개변수 이름 및 인식할 수 없는 속성 이름입니다. 예를 들어, 다음 식별자의 값은 다음과 같습니다.

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

var foo = 10 ;

function bar() {} 

연산의 중간 결과에서 참조 유형에 해당하는 값은 다음과 같습니다.

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

var fooReference = {

base: global, 
propertyName : 'foo' 
}; 

var barReference = { 
base: global, 
propertyName: 'bar' 
}; 

 
순서 의사 코드에서 참조 유형에서 개체의 실제 값을 가져오려면 GetValue 메서드를 다음과 같이 설명할 수 있습니다. 

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

function GetValue(value) {

if (Type(value) != Reference) { 
return value; 

var base = GetBase(value); 

if ( base === null) { 
throw new ReferenceError; 

 return base.[ [Get]](GetPropertyName(value)); 

} 

내부 [[Get]] 메서드는 상속된 속성 분석을 포함하여 개체 속성의 실제 값을 반환합니다. 프로토타입 체인.

코드 복사

코드는 다음과 같습니다.

 
GetValue(fooReference); // 10 
GetValue(barReference); // 함수 객체 "bar" 

속성 접근자는 모두 익숙해야 합니다. 여기에는 점(.) 구문(속성 이름이 올바른 식별자이고 미리 알려진 경우) 또는 대괄호 구문([])의 두 가지 변형이 있습니다.

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

 
foo.bar() 
 foo[' bar'](); 

중간 계산의 반환 값에는 참조 유형의 값이 있습니다.

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

 
var fooBarReference = { 
base: foo, 
propertyName: 'bar' 
}; 

GetValue(fooBarReference); // 함수 객체 "bar" 

참조 유형의 값 함수 컨텍스트에서 이 값은 어떤 관련이 있나요? — 가장 중요한 의미에서. 이러한 연합 과정이 이 글의 핵심이다. 함수 컨텍스트에서 this 값을 결정하는 일반적인 규칙은 다음과 같습니다.

함수 컨텍스트에서 이는 호출자가 제공하며 함수가 호출되는 방식에 따라 결정됩니다. 호출 대괄호()의 왼쪽이 참조 유형 값인 경우 이는 참조 유형 값의 기본 개체로 설정됩니다(참조 유형과 다른 모든 속성). 이 값은 null이 됩니다. . 그러나 this 값이 null인 실제 상황은 없습니다. 왜냐하면 this 값이 null이면 해당 값이 암시적으로 전역 개체로 변환되기 때문입니다. 참고: ECMAScript 5판에서는 전역 변수로의 변환이 더 이상 강제되지 않지만 값은 정의되지 않음으로 할당됩니다.

이 예의 성능을 살펴보겠습니다.

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

 
function foo() { 
return this; 
} 

foo() // 전역 

호출 괄호의 왼쪽은 참조 유형 값입니다(foo는 식별자이기 때문입니다).

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

 
var fooReference = { 
base: global, 
propertyName: 'foo' 
}; 

이 역시 참조 유형의 기본 객체로 설정됩니다. 그것이 전역 객체입니다.

마찬가지로 속성 접근자를 사용하세요.

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

 
var foo = { 
bar: function () { 
return this; 
} 
} // foo 

 
Foo 객체를 기반으로 하는 참조 유형이 있는데, 이는 기능 표시줄이 활성화될 때 사용됩니다. 

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

var fooBarReference = {

base: foo, 
propertyName: 'bar' 
}; 

 
그러나 동일한 기능을 다른 형식으로 활성화하면 다른 이 값을 얻게 됩니다. 

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

var test = foo.bar; >test( ); // global

 
test를 식별자로 사용하기 때문에 참조형의 다른 값이 생성되며, 그 베이스(전역 객체)가 이 값으로 사용됩니다. 

코드 복사 코드는 다음과 같습니다. var testReference = {

base: global,

propertyName: 'test' 
}; 

 
이제 서로 다른 형태의 표현식으로 동일한 함수를 활성화하면 이 값이 달라지는 이유를 명확하게 알 수 있습니다. 참조 유형이 다른 중간 값(참조 유형) 

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

 
function foo() { 
alert(this); 

foo(); // 전역, 

var fooReference = { 
base: global, 
propertyName: 'foo' 
}; 

alert(foo === foo.prototype.constructor); // true 

// 호출 표현식 

foo.prototype.constructor(); // foo.prototype, 왜냐하면 

var fooPrototypeConstructorReference = { 
base: foo.prototype, 
propertyName이기 때문입니다. 'constructor' 
}; 

 

호출을 통해 이 값을 동적으로 결정하는 또 다른 전형적인 예:

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

function foo() { 
alert(this.bar) 
} 

var x = { bar: 10}; 
var y = {bar: 20}; 

x.test = foo; 
y.test = 

x.test(); // 10 
y.test(); // 20 

 

함수 호출 및 비참조 유형
그래서 우리가 지적했듯이 호출 괄호의 왼쪽 참조 유형이 아니고 다른 유형인 경우 이 값은 자동으로 null로 설정되고 결과는 전역 개체입니다.

이 표현을 다시 생각해 보겠습니다.

코드를 복사하세요 코드는 다음과 같습니다.

(function () { 
alert(this); // null => 전역 
})() 

 

이 예에는 함수 객체 그러나 참조 유형의 객체가 아닙니다(식별자나 속성 접근자가 아닙니다). 따라서 this 값은 최종적으로 전역 객체로 설정됩니다.

더 복잡한 예:

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

 var foo = { 
bar: function () { 
alert(this); 
} 
} // 참조, OK = > foo 
(foo.bar)(); // 참조, OK => foo 

(foo.bar = foo.bar)() // 전역? || foo.bar)(); // 전역? 
(foo.bar, foo.bar)(); // 전역? 

 
 중간 값은 참조 유형 값이어야 합니다. 일부 호출에서 우리가 얻는 this 값은 기본 개체가 아니라 전역 개체입니까? 

문제는 다음 세 가지 호출에서 특정 연산을 적용한 후 호출 괄호 왼쪽의 값이 더 이상 참조 유형이 아니라는 것입니다. 

첫 번째 예는 명백합니다. 결과적으로 이것이 기본 객체인 foo입니다.
두 번째 예에서는 그룹 연산자가 적용되지 않습니다. 위에서 언급한 GetValue와 같은 참조 유형에서 개체의 실제 값을 가져오는 메서드를 생각해 보세요. 이에 따라 그룹 작업이 반환될 때 여전히 참조 유형을 얻습니다. 이것이 바로 this 값이 기본 개체인 foo로 다시 설정되는 이유입니다.
세 번째 예에서는 그룹 연산자와 달리 할당 연산자가 GetValue 메서드를 호출합니다. 반환된 결과는 함수 객체입니다(참조 유형은 아님). 이는 null로 설정되고 결과가 전역 객체임을 의미합니다.
네 번째와 다섯 번째도 마찬가지입니다. 쉼표 연산자와 논리 연산자(OR)가 GetValue 메서드를 호출하고 그에 따라 참조를 잃고 함수를 가져옵니다. 그리고 다시 전역으로 설정하세요.
참조 유형이고 이것이 null입니다.
다음과 같은 상황이 있습니다. 호출 표현식이 호출 괄호 왼쪽의 참조 유형 값을 제한하는 경우, 이것이 null로 설정되어 있어도 결과가 변환됩니다. 글로벌로. 이러한 상황은 참조 유형 값의 기본 개체가 활성 개체일 때 발생합니다.

다음 예에서는 부모 함수에 의해 내부 함수가 호출되는 경우 위에서 언급한 특별한 상황을 볼 수 있습니다. 12장에서 배웠듯이 지역 변수, 내부 함수, 형식 매개변수는 주어진 함수의 활성화 객체에 저장됩니다.

코드 복사

코드는 다음과 같습니다. function foo() { function bar() {

alert(this); // 전역

}
bar() // AO.bar()와 동일
}

활성 객체는 항상 다음과 같이 반환되며 값은 null입니다. 즉, 의사 코드의 AO.bar()는 null.bar()와 동일합니다. 여기서는 전역 객체로 설정된 위에서 다시 설명한 예제로 돌아갑니다.

한 가지 예외가 있습니다. with 객체에 함수 이름 속성이 포함된 경우 해당 함수는 with 문의 내부 블록에서 호출됩니다. With 문은 개체 범위 앞, 즉 활성 개체 앞에 추가됩니다. 이에 따라 기본 개체가 더 이상 활성 개체가 아니라 with 문의 개체인 참조 유형(식별자 또는 속성 접근자를 통해)이 있습니다. 그건 그렇고, 이는 내부 함수뿐만 아니라 전역 함수에도 관련이 있습니다. 왜냐하면 with 개체가 범위 체인의 맨 앞 개체(전역 개체 또는 활성 개체)보다 빠르기 때문입니다.

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

 
var x = 10; 🎜>with ({ 

foo: function () { 
alert(this.x); 
}, 
x: 20 

}) { 
 
 foo(); // 20 

} 

// 왜냐하면 

var fooReference = { 
base: __withObject, 
propertyName: 'foo ' 
}; 

 
catch 문 함수 호출의 실제 매개변수에서도 동일한 상황이 발생합니다. 이 경우 catch 개체가 범위 앞에 추가됩니다. 활성 개체 또는 전역 개체 Front. 그러나 이 특정 동작은 ECMA-262-3의 버그로 확인되었으며, 이는 ECMA-262-5의 새 버전에서 수정되었습니다. 이런 방식으로 특정 활성 개체에서 이는 전역 개체를 가리킵니다. 캐치 개체가 아닌. 

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

try {

throw function() { 
alert(this); 
}; 
} catch(e) { 
e(); // ES3 표준은 __catchObject, ES5 표준은 전역 

// 아이디어 

var eReference = { 
base: __catchObject, 
propertyName: 'e' 
}// 이 문제는 새로운 버전에서 수정되었습니다. ES5 표준 이 버그는 
// 이것이 전역 객체입니다 
var eReference = { 
base: global, 
propertyName: 'e' 
} 

 
 이름이 지정된 함수에 대한 재귀 호출에서도 동일한 상황이 발생합니다(함수에 대한 자세한 내용은 15장 함수 참조). 함수의 첫 번째 호출에서 기본 개체는 상위 활동 개체(또는 전역 개체)입니다. 재귀 호출에서 기본 개체는 함수 표현식의 선택적 이름을 저장하는 특정 개체여야 합니다. 그러나 이 경우 이는 항상 전역 개체를 가리킵니다. 

코드 복사

코드는 다음과 같습니다. (function foo(bar) { alert(this);

!bar && foo(1); // "는" 특수 객체여야 하지만 항상 (올바른) 전역 

})(); / global 

생성자로 호출되는 함수에서 
이 값과 관련된 또 다른 상황은 생성자에 대한 호출인 함수의 컨텍스트에 있습니다.

코드 복사

코드는 다음과 같습니다. function A() { alert (this) ; // "a" 객체 아래에 새 속성을 만듭니다. this.x = 10

}

var a = new A() 
alert(a.x) ; // 10 

이 예에서 new 연산자는 "A" 함수의 내부 [[Construct]] 메서드를 호출한 다음 객체가 생성된 후 내부 [[ 통화]] 방법. 동일한 함수 "A"는 새로 생성된 객체에 이 값을 설정합니다. 

 함수 호출에서 this 값을 수동으로 설정

함수 프로토타입에 정의된 두 가지 메서드(모든 함수가 액세스할 수 있도록)를 사용하면 함수 호출에서 this 값을 수동으로 설정할 수 있습니다. .apply 및 .call 메소드입니다. 그들은 this 값으로 받아들이는 첫 번째 인수를 사용하고, 이는 호출 범위에서 사용됩니다. 이 두 메서드의 차이는 매우 작습니다. .apply의 경우 두 번째 매개 변수는 배열(또는 인수와 같은 배열과 유사한 개체)이어야 합니다. 결과적으로 .call은 모든 매개 변수를 허용할 수 있습니다. 두 메서드 모두에 필요한 매개 변수는 다음과 같습니다. 첫 번째 ——이것.

예:

코드 복사

코드는 다음과 같습니다. var b = 10; function a(c) { alert(this.b)

alert(c); >a(20) ; // this === 전역, this.b == 10, c == 20

a.call({b: 20}, 30) // this === {b: 20} , this.b == 20, c == 30
a.apply({b: 30}, [40]) // this === {b: 30}, this.b = = 30, c = = 40

결론
이 글에서는 ECMAScript에서 이 키워드의 특징에 대해 논의했습니다(C와 Java에 비해 실제로 특징입니다). 이 기사가 ECMAScript에서 this 키워드가 어떻게 작동하는지 정확히 이해하는 데 도움이 되었기를 바랍니다. 다시 한 번 댓글을 통해 귀하의 질문에 답변해 드리겠습니다.

기타 참고자료

10.1.7 – 이것
11.1.1 – 이 키워드
11.2.2 – 새로운 연산자
11.2.3 – 함수 호출