자바스크립트 작동 메커니즘에 대한 자세한 소개

이것은 객체 지향 언어에서 중요한 키워드입니다. 이 키워드의 사용법을 이해하고 숙달하는 것은 코드의 견고성과 아름다움에 매우 중요합니다. JavaScript의 이것이 Java 및 C#과 같은 순수 객체지향 언어와 다르기 때문에 더욱 혼란스럽고 혼란스럽습니다.

다음 상황에서 사용됩니다:
1. 순수 함수
2. 객체 메서드 호출
3. 생성자 호출에 new 사용
4. 호출/적용
6. 이벤트 바인딩

1. 순수 기능

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

var name = 'this is window'; //정의 창의 이름 속성 
function getName(){ 
 console.log(this); //콘솔 출력: Window //이것은 전역 객체-창 객체를 가리킵니다 
 console.log( this.name); //콘솔 출력: 이것은 window / 

 
getName() 

실행 결과 분석: 순수 함수에서는 모두 전역 개체, 즉 창을 가리킵니다.

2.객체 메소드 호출

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

var name = 'this is window'; //this.name이 호출되는지 확인하기 위해 window의 name 속성을 정의합니다.

var testObj = { 
 name:'this is testObj', 
 getName: function(){ 
 console.log(this); //콘솔 출력: testObj //this는 testObj 객체를 가리킵니다. 
 console.log(this.name) //콘솔 출력: this testObj입니다 
 } 
} 

testObj.getName() 

실행 결과 분석: 호출된 메서드에서 이는 모두 메서드를 호출한 개체를 가리킵니다.

3. 생성자를 호출하려면 new를 사용하세요.

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

function getObj(){

 console .log( this); //콘솔 출력: getObj{} //이 
} 

new getObj() 

가 가리키는 새로 생성된 getObj 객체

실행 결과 분석: 새 생성자의 이는 새로 생성된 개체를 가리킵니다.

4. 내부 기능

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

var name = "this is window"; //정의 윈도우의 name 속성, this.name이 호출되는지 확인하세요.

var testObj = { 
 name: "this is testObj", 
 getName:function(){ 
 //var self = this; //이 개체를 임시로 저장 
 var handler = function(){ 
 console.log(this) //콘솔 출력: Window //이것은 전역 개체를 가리킵니다.-window 개체 
 console.log(this.name); //콘솔 출력: 이것은 window 
 //console.log(self); //testObj 객체에 대한 포인트를 얻을 수 있습니다. 
 🎜> } 
} 

testObj.getName() 




 실행 결과 분석: 내부 함수의 이 항목은 여전히 ​​전역 개체, 즉 창을 가리킵니다. 이는 일반적으로 JavaScript 언어의 설계 오류로 간주됩니다. 왜냐하면 아무도 내부 함수에서 이것이 전역 객체를 가리키는 것을 원하지 않기 때문입니다. 일반적인 처리 방법은 위 코드와 같이 일반적으로 that 또는 self로 합의된 변수로 저장하는 것입니다. 

5. 통화/신청 이용

코드 복사

코드는 다음과 같습니다

var name = 'this is window'; //this.name이 호출되는지 확인하기 위해 window의 name 속성을 정의합니다. 
var testObj1 = { 
 name : 'this is testObj1', 
 getName:function(){ 
 console.log(this); //콘솔 출력: testObj2 //testObj2 객체를 가리킵니다. 
 console.log(this.name); 이것은 testObj2입니다 
 } 
} 

var testObj2 = { 
 name: 'this는 testObj2입니다' 
} 

testObj1.getName.apply(testObj2) ; 
testObj1.getName.call(testObj2) 

참고: apply는 두 번째 매개변수가 다르다는 점을 제외하면 call과 유사합니다.
[1] call( thisArg [, arg1, arg2,... ] ) // 두 번째 매개변수는 다음을 사용합니다. 매개변수 목록: arg1 , arg2,...
[2] apply(thisArg [, argArray] ); //두 번째 매개변수는 매개변수 배열을 사용합니다: argArray
실행 결과 분석: 호출을 사용하는 함수에서 / 바인딩 결정 개체에 포인트를 적용합니다.

6. 이벤트 바인딩
이벤트 메소드에서 가장 헷갈리는 부분이 바로 이 부분인데, 대부분의 오류가 여기서 발생합니다.

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

//페이지 요소에 바인딩
< ;script type="text/javascript">
function btClick(){
console.log(this); //콘솔 출력: Window //이것은 전역 객체를 가리킵니다. --window 객체
}

;

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

//js의 바인딩 방법 (1)

코드 복사

코드는 다음과 같습니다.//js의 바인딩 방법(2)

코드 복사

코드는 다음과 같습니다.

//js의 바인딩 방법 (3)

>

저자별 최신 기사