[Javascript] 자바스크립트의 this 란?

 

 

자바스크립트(Javascript)의 this 란?

자바스크립트(Javascript)의 this란 일반적으로 메소드를 호출한 객체가 저장되어 있는 속성을 말합니다. 하지만 메소드를 호출할때 뿐만 아니라 일반 함수를 호출할때에도 만들어지기도 하며 이벤트가 호출될때에도 this의 속성이 만들어지기도 합니다.

 

자바스크립트(Javascript)의 this 종류

1. 일반 함수에서의 this (Window 내의 객체를 말합니다.)

2. 이벤트 리스너에서의 thins (이벤트를 발생한 객체를 말합니다.)

3. 메소드의 this (메소드를 호출한 객체를 말합니다.)

4. 일반 중첩함수의 this (Window 내의 객체를 말합니다.)

5. 메소드 내부의 중첩함수의 this (Window 내의 객체를 말합니다.)

 

일반 함수 내부의 this는 전역 객체인 window가 저장됩니다.

 

//일반함수의 this 사용방법

var test = 1;

function testData() {
	this.test = 10;
    test = 20;
    
    console.log(" test = " + test);
    console.log(" this.test = " + this.test);
    console.log(" window.test = " + window.test);
}

testData();


=============================================

" test = 20"
" this.test = 20"
" window.test = 20"

 

//이벤트 리스너의 this 사용방법

var test = 1;

$("#testEvent").click(function () {
	this.test = 10;
    test = 20;
    
    console.log(" test = " + test);
    console.log(" this.test = " + this.test);
    console.log(" window.test = " + window.test);
});


=============================================

" test = 20"
" this.test = 10"
" window.test = 20"

 

//메소드의 this 사용방법

var test = 1;

function testFn() {
	this.test = 0;
}

testFn.prototype.method1 = function () {
	this.test = 10;
    test = 20;
    
    console.log(" test = " + test);
    console.log(" this.test = " + this.test);
    console.log(" window.test = " + window.test);
}

var test2 = new testFn();
test2.method1();


=============================================

" test = 20"
" this.test = 10"
" window.test = 20"

 

//일반 중첩함수의 this 사용방법

var test = 1;

function testFn1() {
	function testFn2() {
      this.test = 10;
      test = 20;

      console.log(" test = " + test);
      console.log(" this.test = " + this.test);
      console.log(" window.test = " + window.test);
    }
	testFn2();
}

testFn1();

===========================================================

" test = 20"
" this.test = 20"
" window.test = 20"

 

//메소드 내부의 중첩함수의 this 사용방법

var test = 1;

function testFn() {
	this.test = 0;
}

testFn.prototype.method1 = function () {
	function inner() {
    	this.test = 10;
        test = 20;

        console.log(" test = " + test);
        console.log(" this.test = " + this.test);
        console.log(" window.test = " + window.test);
    }
    inner();
}

var test2 = new testFn();
test2.method1();

===========================================================

" test = 20"
" this.test = 20"
" window.test = 20"