Javascript this_javascript 기술에 대한 일부 학습 요약-JS 튜토리얼-php.cn

1.1.1 요약
C, C#, Java 프로그래밍 경험이 있는 사람이라면 누구나 this 키워드에 매우 익숙할 것이라고 생각합니다. Javascript는 객체 지향 프로그래밍 언어이므로 C, C# 또는 Java와 마찬가지로 this 키워드를 포함합니다. 다음으로 Javascript의 this 키워드를 소개하겠습니다.
이 문서의 디렉터리
전역 코드의 this
함수
참조 유형
함수 호출 및 비참조 유형
참조 유형 및 this의 null 값
함수 내 this constructor 함수 호출 시 this의 값
함수 호출 시 this의 값을 수동으로 설정

1.1.2 Text

객체가 많기 때문에- 지향 프로그래밍 언어에는 이 키워드가 포함되어 있으므로 자연스럽게 이를 객체 지향 프로그래밍과 연관시키게 됩니다. 이는 일반적으로 생성자를 사용하여 새로 생성된 객체를 가리킵니다. ECMAScript에서 이는 생성된 객체를 나타내는 데 사용될 뿐만 아니라 실행 컨텍스트의 속성이기도 합니다:

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

 
activeExecutionContext = { 
// Variable object. 
VO: {...}, 
this: thisValue 
}; 
 

글로벌 코드에서는

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

// 전역 범위 
// 
// 전역 객체의 암시적 속성 
foo1 = "abc"; 
alert(foo1); // abc 
// 명시적 속성 of 
 // 전역 객체 
this.foo2 = "def"; 
alert(foo2) // def 
// 
의 암시적 속성 
var foo3 = "ijk"; 
alert(foo3); // ijk 

 

앞에서는 전역 속성인 foo1, foo2 및 foo3을 명시적 및 암시적으로 정의했습니다. , 따라서 그 값은 전역 개체 자체(브라우저의 창 개체)입니다. 다음 함수에서 이를 소개하겠습니다.
함수에 있는 내용
함수 코드에 있는 경우 상황은 훨씬 더 복잡해지고 많은 문제가 발생하게 됩니다.
함수 코드에서 이 값의 첫 번째 특징(그리고 가장 중요한 특징)은 함수에 정적으로 바인딩되지 않는다는 것입니다.
앞서 언급한 바와 같이 실행 컨텍스트(Excution context)에 들어갈 때 this의 값이 결정되는데, 함수 코드에서는 매번 그 값이 달라집니다.
단, 코드가 실행되면 해당 값은 변경할 수 없습니다. 이 시점에서는 전혀 변수가 아니기 때문에 여기에 새 값을 할당하는 것은 불가능합니다.
다음으로 구체적인 예를 통해 함수에서 이를 설명합니다.
먼저 foo와 person이라는 두 객체를 정의합니다. foo에는 속성 이름이 포함되고, person에는 속성 이름과 say() 메서드가 포함됩니다.

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

// foo 객체를 정의합니다. 
var foo = { 
name: "Foo " 
}; 
// person 객체를 정의합니다. 
var person = { 
name: "JK_Rush", 
say: function() { 
alert(this === person ); 
alert( "내 이름은 " this.name); 
person.say(); // 내 이름은 JK_Rush 
// foo입니다. 
// 같은 함수를 참조하세요 
foo.say = person.say; 
foo.say(); // 제 이름은 Foo입니다. 코드에서 호출하는 사람을 찾습니다. say() 메소드를 사용하면 this는 person 객체를 가리키고, foo의 say() 메소드는 할당을 통해 peson의 say() 메소드를 가리키게 됩니다. foo의 say() 메소드를 호출하여 이것이 person 객체를 가리키는 것이 아니라 foo 객체를 가리키는 것을 발견했습니다. 그 이유는 무엇입니까? 
먼저 this의 값은 함수가 호출될 때 결정됩니다. 특정 코드가 실행되기 전에 this의 값은 호출자에 의해 결정됩니다. 예를 들어 호출하는 경우 컨텍스트 코드를 활성화합니다. 더 중요한 것은 this의 값이 호출하는 표현식의 형식에 따라 결정되므로 함수에 정적으로 바인딩되지 않는다는 것입니다. 
이것은 함수에 정적으로 바인딩되지 않으므로 함수에서 this의 값을 동적으로 수정할 수 있나요? 

코드 복사

코드는 다음과 같습니다. // foo 객체를 정의합니다. var foo = { name: "Foo" }; // person 객체를 정의합니다.

var person = {

name: "JK_Rush",
say: function() {
alert(this === person);
this = foo; // ReferenceError
alert("내 이름은 " this.name); person.say (); // 제 이름은 JK_Rush

이제 say() 메서드에서 this 값을 동적으로 수정합니다. 위 코드를 다시 실행하면 this 값이 잘못 참조되는 것을 발견합니다. 코드 실행 단계에 진입하면(함수가 호출될 때, 특정 코드가 실행되기 전) 이 값이 결정되어 변경할 수 없기 때문입니다.
참조 유형
앞서 this의 값은 컨텍스트 코드를 활성화하는 호출자에 의해 결정된다고 언급했습니다. 더 중요한 것은 this의 값은 호출 표현식의 형식에 따라 결정된다는 것입니다. 이것의 가치에 어떻게 영향을 미칠까요?
먼저 내부 유형, 즉 참조 유형을 소개하겠습니다. 해당 값은 기본 속성(속성이 속한 개체)과 기본 개체의 propertyName이라는 두 가지 속성이 있는 개체로 의사 코드로 표현될 수 있습니다. 속성:

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

 
// 참조 유형. 🎜>var valueOfReferenceType = { 
base: mybase, 
propertyName : 'mybasepropertyName' 
};

참조 유형의 값은 다음 두 가지 상황에만 있을 수 있습니다.
식별자를 처리할 때
로 사용되거나 속성에 액세스할 때
식별자는 실제로 변수 이름, 함수 이름, 함수 매개변수 이름 및 전역 개체의 무제한 속성입니다.

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

// 변수를 선언합니다 
. foo = 23 ; 
// 함수 선언 
function say() { 
// 코드 
} 

 

중간 프로세스에서 해당 참조 유형

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

// 참조 유형. 
var fooReference = { 
base: global, 
propertyName: 'foo' 
} 
var sayReference = { 
base: global, 
propertyName: 'say' 
}; 

 

Javascript에서 속성에 액세스하는 방법에는 점 표기법과 대괄호 표기법이 있다는 것을 알고 있습니다.

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

// say 메소드를 호출합니다. 
foo.say() 
foo['say']( ); 

 

say( ) 메소드는 식별자이므로 다음과 같이 foo 객체 참조 유형에 해당합니다.

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

// 참조 유형 
var fooSayReference = { 
base: foo, 
propertyName: 'say' 
}; 

 

say()를 찾았습니다. 메소드의 기본 속성 값이 foo 객체인 경우 해당 this 속성도 foo 객체를 가리킵니다.
say() 메소드를 직접 호출하고 해당 참조 유형이 다음과 같다고 가정합니다.

코드 복사 코드

// 참조 유형 
var sayReference = { 
base: global, 
propertyName: 'say' 
}; > 
say() 메서드의 기본 속성 값이 전역(일반적으로 창 객체)이기 때문에 해당 this 속성도 전역을 가리킵니다. 
함수 컨텍스트에서 this 값은 함수 호출자가 제공하며 현재 호출 표현식의 형식에 따라 결정됩니다. 호출하는 대괄호()의 왼쪽에 참조 유형 값이 있는 경우 이 값은 참조 유형 값의 기본 개체로 설정됩니다. 다른 모든 경우(비참조 유형)의 경우 이 값은 항상 null입니다. 그러나 null은 이에 대한 의미가 없으므로 암시적으로 전역 개체로 변환됩니다. 

함수 호출 및 비참조 유형
앞서 호출 괄호의 왼쪽이 비참조 유형인 경우 이 값이 null로 설정되고 결국 암시적으로 전역 개체로 변환된다고 언급했습니다.
이제 익명의 자체 실행 함수를 정의합니다. 구체적인 구현은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다. 다음: //익명 함수 선언

(function () {

alert(this); // null => 전역 
})(); 
 
 대괄호() 왼쪽의 익명 함수는 비참조형 객체(식별자도 아니고 속성 접근도 아님)이므로 this 값이 전역 객체로 설정됩니다. 

코드 복사

코드는 다음과 같습니다.

 
// 객체를 선언합니다. 
var foo = { 
bar: function () { 
alert(this) 
} 
}; bar)(); // foo.
(foo.bar = foo.bar)(); // 전역? 
(false || foo.bar)(); foo.bar, foo.bar)(); // 전역 

 
 여기에서 네 가지 표현식 중 첫 번째 표현식만 foo 객체를 가리키고 나머지 세 표현식은 다음을 실행합니다. 글로벌. 

이제 또 다른 질문이 있습니다. 속성에 액세스하는 이유는 무엇입니까? 그런데 이것의 최종 값은 참조 유형 개체가 아니라 전역 개체입니까?
표현식 2는 연산자의 표현식 세트와 달리 할당 연산자이며 GetValue 메서드에 대한 호출을 트리거합니다(11.13.1의 세 번째 단계 참조). 최종적으로 반환되면 (참조 유형 값이 아닌) 함수 개체가 됩니다. 즉, 이 값이 null로 설정되고 결국 전역 개체가 됩니다.
세 번째와 네 번째 경우는 비슷합니다. 쉼표 연산자와 OR 논리식은 GetValue 메서드에 대한 호출을 트리거하므로 이에 따라 원래 참조 유형 값이 손실되고 함수 유형이 되며 이 값은 글로벌 객체.
참조 유형과 this의 null 값
앞서 언급한 상황의 경우 호출 표현식의 왼쪽이 참조 유형의 값이지만 this의 값이 null인 경우에는 결국 예외가 있습니다. 전역 객체(전역 객체)가 됩니다. 이것이 발생하는 조건은 참조 유형 값의 기본 객체가 활성화 객체일 때입니다.
이는 상위 함수에서 내부 하위 함수가 호출될 때 발생합니다. 활성 개체는 다음 도식 코드로 도입됩니다.

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

// foo 함수를 선언합니다.

function foo() { 
function bar() { 
alert(this) / / global 
} 
// AO.bar()와 동일합니다. 
bar() 
} 

 
활성화 개체는 항상 이 값을 반환합니다. is - null(의사 코드를 사용하여 AO.bar()를 나타내는 것은 null.bar()와 동일), 이 값은 결국 null에서 전역 개체로 변환됩니다. 

with 문의 코드 블록 내에 함수 호출이 포함되어 있고 with 객체에 함수 속성이 포함되어 있으면 예외가 발생합니다. with 문은 범위 체인의 앞쪽, 활성 개체 앞에 개체를 추가합니다. 이에 따라 참조 유형 값(식별자 또는 속성 액세스)의 경우 기본 개체는 더 이상 활성 개체가 아니라 with 문의 개체입니다. 또한, 내부 함수뿐만 아니라 전역 함수에도 해당된다는 점을 언급할 가치가 있습니다. 그 이유는 with 객체가 범위 체인에서 상위 수준 객체(전역 객체 또는 활성 객체)를 가리기 때문입니다.
함수 as constructor 호출 시 this의 값
함수가 생성자로 사용될 때 new 연산자를 통해 인스턴스 객체를 생성하면 Foo() 함수의 내부 [[Construct]] 메서드가 호출됩니다. 객체가 생성되면 내부 [[Call]] 메서드를 호출한 다음 모든 Foo() 함수의 this 값이 새로 생성된 객체로 설정됩니다.

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

//생성자 선언

함수 Foo () { 
// 새 객체 
alert(this); 
this.x = 10 
} 
var foo = new Foo(); = 23; 
alert(foo.x); // 23 함수 호출 시 이 값을 수동으로 설정합니다. 

 
Function.prototype은 프로토타입에 두 가지 메서드를 정의합니다. 함수가 호출될 때 이 값을 지정합니다. 이 두 가지 메서드는 .apply() 및 .call()입니다. 두 메소드 모두 호출 컨텍스트에서 this의 값으로 첫 번째 매개변수를 허용하며, 두 메소드의 차이점은 전달된 매개변수입니다. .apply() 메소드의 경우 두 번째 매개변수는 배열 유형(또는 객체의 Array 클래스)을 허용합니다. .call() 메소드는 임의 개수의 인수(쉼표로 구분)를 허용하지만 이 두 메소드 중 첫 번째 인수(this 값)만 필요합니다. 
샘플 코드를 통해 call() 메소드와 apply() 메소드 사용법 소개: 

코드 복사 코드는 다음과 같습니다. 다음: var myObject = {};

var myFunction = function(param1, param2) {

//setviacall()'this'는 함수가 호출될 때 내 개체를 가리킵니다. 🎜>this.foo = param1;
this.bar = param2;
//logs Object{foo = 'foo', bar = 'bar'}
console.log(this); };
// 함수를 호출하고 이 값을 myObject로 설정합니다.
myFunction.call(myObject, 'foo', 'bar')
// Object {foo = 'foo', bar = ' bar'}
console.log(myObject)

call() 메소드의 첫 번째 매개변수는 필요한 this 값입니다. 그런 다음 원하는 수의 매개변수를 전달할 수 있습니다. 다음으로 apply() 메소드의 사용을 소개하겠습니다.

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

 
var myObject = 
 var myFunction = function(param1, param2) { 
//apply()를 통해 설정합니다. 이는 함수가 호출될 때 내 개체를 가리킵니다. 
this.foo=param1; 
this.bar=param2; >// 로그 Object{foo='foo', bar='bar'} 
console.log(this) 
} 
// 함수 호출, 이 값 설정 
myFunction.apply (myObject, ['foo', 'bar']); 
// Object {foo = 'foo', bar = 'bar'} 
console.log(myObject) 

 기록 

call() 메소드와 비교해보면, 메소드 시그니처가 다르다는 점 외에는 apply() 메소드와 call() 메소드 사이에 큰 차이가 없다는 것을 알 수 있었습니다.

1.1.3 요약
이 글은 Javascript에서 this의 사용법을 소개하고, 더 중요하게는 전역 변수, 함수, 일부 특별한 경우에는 중앙값의 생성자와 변경 사항이 있습니다.

함수 컨텍스트에서 this 값은 함수 호출자가 제공하며 현재 호출 표현식의 형식에 따라 결정됩니다. 호출하는 대괄호()의 왼쪽에 참조 유형 값이 있는 경우 이 값은 참조 유형 값의 기본 개체로 설정됩니다. 다른 모든 경우(비참조 유형)의 경우 이 값은 항상 null입니다. 그러나 null은 이에 대한 의미가 없으므로 암시적으로 전역 개체로 변환됩니다.
특수한 경우 할당 연산자, 쉼표 연산자 및 || 논리 표현식으로 인해 원래 참조 유형 값이 손실되고 함수 유형이 되며, 이 값은 전역 객체가 됩니다.

참고
[1]
http://dmitrysoshnikov.com/ecmascript/chapter-3-this/영어 버전[2]
http:// blog. goddyzhao.me/post/11218727474/this 번역[3]
https://net.tutsplus.com/tutorials/javascript-ajax/full-understanding-the-this-keyword/
[작성자] : JK_Rush