자바스크립트 시리즈 심층이해(13) 이거요?_자바스크립트 실력?
소개
이 기사에서는 실행 컨텍스트와 직접적으로 관련된 자세한 내용을 논의하겠습니다. 토론 주제는 바로 이 키워드입니다. 실습을 통해 이 주제가 어렵다는 것이 입증되었으며 다양한 실행 상황에서 이를 결정하는 데 문제가 자주 발생합니다.
많은 프로그래머는 프로그래밍 언어에서 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에서는 프로그래밍 언어에서는 런타임 중에 지속적으로 변경될 수 있는 객체 자체로 잘 정의되어 있습니다.
var foo = {x: 10};
var bar = {
x: 20,
test: function () {
alert(this === bar) // true
alert(this .x) ; // 20
this = foo; // 오류, this 값은 언제든지 변경할 수 없습니다.
alert(this.x); 오류는 20이 아닌 10이어야 합니다.
}
}
// 컨텍스트에 들어갈 때
// 이것은 bar 객체 // "bar" 개체로 결정된 이유 -
// 아래에서 자세히 설명합니다.
bar.test() // true, 20
foo. test = bar.test;
// 그러나 여기서는 여전히 foo가 아닙니다.
// 동일한 함수가 호출되지만
foo.test(); 10
따라서 함수 코드에서 이 값의 변경에 영향을 미치는 몇 가지 요소가 있습니다.
우선 일반 함수 호출에서는 컨텍스트 코드를 활성화하는 호출자가 이를 제공합니다. 즉, 함수의 상위 컨텍스트를 호출하는 것입니다. 이는 함수가 어떻게 호출되는지에 따라 다릅니다.
어떤 상황에서도 이것의 가치를 정확하게 판단하기 위해서는 이 중요한 점을 이해하고 기억할 필요가 있다. 호출 컨텍스트에서 this 값에 영향을 미치는 것은 함수가 호출되는 방식이며 다른 것은 없습니다. (일부 기사에서 볼 수 있으며 심지어 자바스크립트에 관한 책에서도 다음과 같이 주장합니다. "this의 값은 함수가 어떻게 동작하는지에 따라 달라집니다.) 정의됩니다. 전역 함수인 경우 전역 개체로 설정되고, 함수가 개체의 메서드인 경우 항상 개체를 가리킵니다. 이는 절대 사실이 아닙니다.") 주제를 계속 진행하면 일반적인 전역 함수도 다양한 호출 방법에 의해 활성화된다는 점을 알 수 있습니다. 이러한 다양한 호출 방법으로 인해 this 값이 달라집니다.
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라는 두 가지 속성이 있는 객체로 표현할 수 있습니다. .
propertyName:
}
참조 유형 값에는 두 가지 상황만 있습니다.
식별자
또는 속성 접근자
식별자의 처리는 다음 기사에서 자세히 논의할 것입니다. 여기서는 이 알고리즘의 반환 값이 항상 참조 유형 값이라는 것만 알면 됩니다. 이것을 말하는 것이 중요합니다).
식별자는 전역 개체의 변수 이름, 함수 이름, 함수 매개변수 이름 및 인식할 수 없는 속성 이름입니다. 예를 들어, 다음 식별자의 값은 다음과 같습니다.
연산의 중간 결과에서 참조 유형에 해당하는 값은 다음과 같습니다.
propertyName : 'foo'
};
var barReference = {
base: global,
propertyName: 'bar'
};
순서 의사 코드에서 참조 유형에서 개체의 실제 값을 가져오려면 GetValue 메서드를 다음과 같이 설명할 수 있습니다.
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 객체를 기반으로 하는 참조 유형이 있는데, 이는 기능 표시줄이 활성화될 때 사용됩니다.
propertyName: 'bar'
};
그러나 동일한 기능을 다른 형식으로 활성화하면 다른 이 값을 얻게 됩니다.
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'
};
alert(this.bar)
}
var x = { bar: 10};
var y = {bar: 20};
x.test = foo;
y.test =
x.test(); // 10
y.test(); // 20
그래서 우리가 지적했듯이 호출 괄호의 왼쪽 참조 유형이 아니고 다른 유형인 경우 이 값은 자동으로 null로 설정되고 결과는 전역 개체입니다.
이 표현을 다시 생각해 보겠습니다.
alert(this); // null => 전역
})()
더 복잡한 예:
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장에서 배웠듯이 지역 변수, 내부 함수, 형식 매개변수는 주어진 함수의 활성화 객체에 저장됩니다.
코드 복사
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의 새 버전에서 수정되었습니다. 이런 방식으로 특정 활성 개체에서 이는 전역 개체를 가리킵니다. 캐치 개체가 아닌.
alert(this);
};
} catch(e) {
e(); // ES3 표준은 __catchObject, ES5 표준은 전역
// 아이디어
var eReference = {
base: __catchObject,
propertyName: 'e'
}// 이 문제는 새로운 버전에서 수정되었습니다. ES5 표준 이 버그는
// 이것이 전역 객체입니다
var eReference = {
base: global,
propertyName: 'e'
}
이름이 지정된 함수에 대한 재귀 호출에서도 동일한 상황이 발생합니다(함수에 대한 자세한 내용은 15장 함수 참조). 함수의 첫 번째 호출에서 기본 개체는 상위 활동 개체(또는 전역 개체)입니다. 재귀 호출에서 기본 개체는 함수 표현식의 선택적 이름을 저장하는 특정 개체여야 합니다. 그러나 이 경우 이는 항상 전역 개체를 가리킵니다.
코드 복사
})(); / global
생성자로 호출되는 함수에서
이 값과 관련된 또 다른 상황은 생성자에 대한 호출인 함수의 컨텍스트에 있습니다.
코드 복사
var a = new A()
alert(a.x) ; // 10
이 예에서 new 연산자는 "A" 함수의 내부 [[Construct]] 메서드를 호출한 다음 객체가 생성된 후 내부 [[ 통화]] 방법. 동일한 함수 "A"는 새로 생성된 객체에 이 값을 설정합니다.
함수 호출에서 this 값을 수동으로 설정
함수 프로토타입에 정의된 두 가지 메서드(모든 함수가 액세스할 수 있도록)를 사용하면 함수 호출에서 this 값을 수동으로 설정할 수 있습니다. .apply 및 .call 메소드입니다. 그들은 this 값으로 받아들이는 첫 번째 인수를 사용하고, 이는 호출 범위에서 사용됩니다. 이 두 메서드의 차이는 매우 작습니다. .apply의 경우 두 번째 매개 변수는 배열(또는 인수와 같은 배열과 유사한 개체)이어야 합니다. 결과적으로 .call은 모든 매개 변수를 허용할 수 있습니다. 두 메서드 모두에 필요한 매개 변수는 다음과 같습니다. 첫 번째 ——이것.
예:
코드 복사
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 키워드가 어떻게 작동하는지 정확히 이해하는 데 도움이 되었기를 바랍니다. 다시 한 번 댓글을 통해 귀하의 질문에 답변해 드리겠습니다.
기타 참고자료

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











Vue2의 이 포인팅 문제로 인해 동료가 버그로 인해 화살표 기능이 사용되어 해당 소품을 얻을 수 없게 되었습니다. 제가 그에게 소개했을 때 그는 그것을 몰랐고, 그래서 저는 일부러 프론트엔드 커뮤니케이션 그룹을 살펴보았습니다. 지금까지 적어도 70%의 프론트엔드 프로그래머들은 오늘 그것을 이해하지 못하고 있습니다. 모든 것이 불분명하다면 이 링크를 아직 배우지 않았다면 큰 소리로 말해주세요.

1. this 키워드 1. this 유형: 호출되는 개체는 해당 개체의 참조 유형입니다. 2. 사용법 요약 1. this.data;//Access 속성 2. this.func();//Access 메서드 3.this ( );//이 클래스의 다른 생성자를 호출합니다. 3. 사용법 설명 1.this.data가 멤버 메서드에 사용됩니다. 이것이 추가되지 않으면 어떻게 되는지 살펴보겠습니다. classMyDate{publicintyear;publicintmonth;publicintday; 월,월){예

jQuery는 웹 개발에서 DOM 조작 및 이벤트 처리에 널리 사용되는 인기 있는 JavaScript 라이브러리입니다. 중요한 개념 중 하나는 이 키워드를 사용하는 것입니다. jQuery에서 이는 현재 작동 중인 DOM 요소를 나타내지만, 다른 컨텍스트에서는 이것의 포인터가 다를 수 있습니다. 이 기사에서는 특정 코드 예제를 통해 jQuery에서 이에 대한 사용 기술을 분석합니다. 먼저 간단한 예를 살펴보겠습니다.

JavaScript의 화살표 함수는 자체 this 키워드가 없는 비교적 새로운 구문입니다. 반대로 화살표 함수의 this는 이를 포함하는 범위 개체를 가리킵니다. 1. 화살표 함수의 This는 다음과 같습니다. 2. 화살표 함수는 생성자로 사용할 수 없습니다. 3. 화살표 함수는 메서드로 사용할 수 없습니다.

이게 뭔가요? 다음 기사에서는 JavaScript에서 이에 대해 소개하고 다양한 함수 호출 방법의 차이점에 대해 설명하겠습니다. 도움이 되기를 바랍니다.

JavaScript는 이 포인터를 어떻게 변경합니까? 다음 기사에서는 JS에서 이 포인터를 변경하는 세 가지 방법을 소개합니다. 이것이 도움이 되기를 바랍니다.

1.이 참조 1.1 왜 이 참조가 있어야 합니까? 먼저 날짜 클래스의 예를 작성해 보겠습니다. publicclassclassCode{publicintyear;publicintmonth;publicintday;publicvoidsetDay(inty,intm,intd){year=y;month=m;day= d;}publicvoidprintDate (){System.out.println(year+"-"+month+"-"+day);}publicstatic

이 글은 Vue 소스 코드를 해석하는 데 도움이 될 것이며 이를 사용하여 Vue2의 다양한 옵션에서 속성에 액세스할 수 있는 이유를 소개하는 것이 모든 사람에게 도움이 되기를 바랍니다!
