JS_Basic 지식에서 이 변수의 사용 소개

JavaScript에서 this의 사용

this 변수는 JavaScript에서 찾기 힘든 키워드입니다. 이에 대한 관련 지식을 완전히 이해하면 객체 지향 JavaScript 프로그램을 작성하는 데 도움이 됩니다. 쉬움.

이 변수에 대해 가장 중요한 것은 이것이 어떤 개체를 참조하는지 명확히 할 수 있다는 것입니다. 어쩌면 많은 정보가 나름대로 설명이 있지만 일부 개념은 다소 복잡합니다. 내 이해는 다음과 같습니다. 먼저 이것이 위치한 함수가 메소드로 호출되는 객체를 분석한 다음 객체가 참조되는 객체입니다.

예시 1,

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

var obj = {};

obj.x = 100;

obj.y = function(){ 경고( this.x ) }; (); //팝업 100


이 코드는 obj.y()가 실행되면 객체 obj의 메소드로 호출되므로 이 코드는 매우 이해하기 쉽습니다. 함수 본문은 obj 객체를 가리키므로 100이 나타납니다.

예시 2,

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

var checkThis = function(){

alert( this.x);

var x = '창의 속성입니다.'

var obj = {};

obj.x = 100;

obj.y = function(){ 경고( this.x ) }; .y( ); //팝업 100

checkThis(); //'이것은 윈도우의 속성입니다'


왜 '이것이 윈도우의 속성입니까? '여기에 팝업이 뜨나요? 어쩌면 다소 혼란스러울 수도 있습니다. JavaScript 변수 범위에는 "전역 변수는 창 개체의 속성"이라는 규칙이 있습니다. checkThis()가 실행되면 window.checkThis()와 동일합니다. 따라서 이때 checkThis 함수에서 this 키워드의 지점이 window 객체가 되고, window 객체에는 또 다른 x 속성('thisis')이 있기 때문입니다. a property of window' ), '이것은 window의 속성입니다'라는 팝업이 나타납니다.

위의 두 예는 현재 함수가 어떤 개체를 메서드로 호출하는지(어떤 개체가 호출되는지)만 결정하면 현재 이 변수를 쉽게 결정할 수 있기 때문에 비교적 이해하기 쉽습니다.

this.x와 apply(), call()

call과 Apply를 통해 함수의 실행 환경을 재정의할 수 있다는 것, 즉 this의 핵심이 아주 흔히 일부 응용 프로그램에서 사용됩니다.

예제 3: call()




코드 복사

코드는 다음과 같습니다. functionchangeStyle( 유형 , 값 ){ this.style[ 유형 ] = 값

}

var one = document.getElementByIdx( 'one' ) ;

changeStyle.call( one , 'fontSize' , '100px' );

changeStyle('fontSize' , '300px'); //changeStyle에서 다음을 참조하므로 오류가 발생했습니다. window 객체와 window에는 스타일 속성이 없습니다.


changeStyle.call()에는 세 가지 매개변수가 있습니다. 첫 번째 매개변수는 함수가 호출될 객체를 지정하는 데 사용됩니다. 여기에 하나가 지정되어 있는데, 이는 ChangeStyle 함수가 하나씩 호출된다는 의미이므로 함수 본문의 이 지점이 하나의 개체입니다. 두 번째 및 세 번째 매개변수는changeStyle 함수의 두 가지 형식 매개변수 유형 및 값에 해당합니다. 우리가 보는 가장 일반적인 효과는 Dom 요소 1의 글꼴이 20px이 된다는 것입니다.

예제 4: apply()

코드 복사

코드는 다음과 같습니다. functionchangeStyle( 유형 , 값 ){ this.style[ 유형 ] = 값

}

var one = document.getElementByIdx( 'one' ) ;

changeStyle.apply( one , ['fontSize' , '100px' ])

changeStyle('fontSize' , '300px'); //오류가 발생했습니다. 예제 3과 동일


apply의 사용법은 call과 거의 동일하지만 한 가지 차이점만 적용됩니다. 첫 번째 매개변수는 call과 동일해야 합니다. 배열. 배열의 요소는 형식 매개변수에 해당합니다.

의미 없는(이상한) 사용

예 5:

코드 복사

Code As 다음: var obj = { x : 100,

y : function(){

setTimeout(

function(){ Alert(this.x); } //여기서는 우리가 기대하는 obj가 아닌 창 개체를 가리키므로 undef가 나타납니다.

, 2000); }

}

obj.y()


원하는 효과를 얻는 방법

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

var obj = {

x : 100,

y : function(){

var that = this;

setTimeout(

function() { 경고(that.x) }

, 2000)

}

obj.y(); //pop 100


이벤트 청취 함수에서

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

var one = document.getElementByIdx( 'one' )

one.onclick = function(){

alert( this.innerHTML ); /이것은 하나의 요소를 가리킵니다. 이것은 매우 간단합니다.

}


참고: js의 전역 변수는 Window의 인스턴스 창에 속성으로 동적으로 추가됩니다. .

이것은 js의 키워드입니다. 함수가 상황에 따라 사용됨에 따라 이 값이 변경됩니다. 그러나 항상 원칙이 있습니다. 즉, 함수를 호출하는 객체를 참조한다는 것입니다.

1. 순수 함수 호출.

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

function test() {

이것 .x = 1;
alert(x);
}
test()


사실 이것은 전역 변수입니다. 다음 예를 보면 실제로 이것이 글로벌 객체인 Global이라는 것을 명확하게 이해할 수 있습니다.

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

var x = 1; test() {

alert(this.x);
}
test();//1

var x = 1
function test() {
this.x = 0;
}
test();
alert(x);//0


2. 물체.

코드 복사 코드는 다음과 같습니다. function test() {

alert (this.x);

var o = {};
o.m = test;
o.m(); 🎜>
3. 생성자로 호출됩니다. 소위 생성자 함수는 새로운 객체를 생성하는 것입니다. 이때 this는 이 객체를 가리킵니다.




코드 복사

코드는 다음과 같습니다.

function test() { 이것 .x = 1; } var o = new test(); alert(o.x);//1

4. 이는 적용의 첫 번째 매개변수를 가리킵니다.




코드 복사

코드는 다음과 같습니다.

var x = 0; test() { alert(this.x); var o = {}; o.m = test; ); / /0 o.m.apply(o);//1

apply에 매개변수가 없으면 전역 객체로 표현됩니다. 따라서 값은 0입니다.