자바스크립트의 this 키워드란?

Question

자바스크립트에서 사용되는 this 키워드의 정의와 활용 예제 등을 조금은 구체적으로 알고 싶습니다.

함수 내에서 객체를 참조한다고 알고 있는데, 어떤 매커니즘으로 참조하는 객체가 달라지는지 궁금합니다.

따뜻한물수리156 · Accepted Answer

this 란?this는 일반적으로 메소드를 호출한 객체가 저장되어 있는 속성입니다.- 예제 코드1function MyClass () {
    this.property1 = "value1";
}

MyClass.prototype.method1 = function() {
    console.log(this.property1);
}

var my1 = new MyClass();
my1.method1();코드 1 실행 결과 메소드를 호출한 객체는 my1이 되며 method1은 메소드가 됩니다. method1()이 실행되면 메소드 내부에는 자바스크립트 엔진에 의해 this 속성이 생기게 됩니다. 바로 이 this에는 mthod1을 호출한 my1 객체가 저장됩니다.결론을 말씀 드리자면,1. 일반 함수 :  this -> window2. 중첩 함수 : this -> window3. 이벤트 : this -> 이벤트 객체4. 메소드 : this -> 메소드 객체5. 메소드 내부의 중첩 함수 : this -> window1. 일반 함수에서의 this- 예제 코드2var data = 10;        // 1
function outer() {
    this.data = 20;   // 2
    data = 30;        // 3

console.log("1. data = " + data);
    console.log("2. this.data = " + this.data);
    console.log("3. window.data = " + window.data);
}
outer();

/*
- 코드 2 실행 결과 -

1. data = 30
2. this.data = 30
3. window.data = 30
*/일반 함수 내부에서 this는 전역 객체인 window가 저장됩니다.주석2의 data는 window.data와 동일하기 때문에, 주석1의 data에 20이 저장됩니다.주석3이 실행 되는 경우 먼저 지역 변수 내에서 data를 찾고 없으면 outer()를 호출한 영역에서 찾기 때문에 결론적으로, 주석3의 data 역시 전역변수인 data에 30이 저장됩니다.1, 2, 3의 data 모두 전역 변수인 data를 나타냅니다 (1의 data)3. 일반 중첩 함수에서의 this- 예제 코드3var data = 10;            // 1
function outer() {
    function inner() {
        this.data = 20;   // 2
        data = 30;        // 3

console.log("1. data = " + data);
        console.log("2. this.data = " + this.data);
        console.log("3. window.data = " + window.data);
    }
    inner();
}

outer();

/* 
- 코드 3 실행 결과 -

1. data = 30
2. this.data = 30
3. window.data = 30
*/일반 중첩 함수에서 this 역시 window가 됩니다.이에 따라 주석2의 this.data는 주석1의 전역 변수인 data와 동일하기 때문에 주석1의 data에 20이 저장됩니다.주석3의 data는 우선 지역 변수 내에서 data를 찾고, 없다면 outer()를 호출한 영역에서 data를 찾습니다. inner와 outer 모두 data가 없기 때문에, 주석3의 data 역시 주석1의 전역 변수인 data가 됩니다. 따라서 주석1의 전역 변수인 data는 30이 저장됩니다.1, 2, 3의 data 모두 전역 변수인 data를 나타냅니다 (1의 data)4. 이벤트 리스너에서의 this- 예제 코드4var data = 10;             // 1
$("#myButton").click(function () {
    this.data = 20;    // 2
    data = 30;         // 3

console.log("1. data = " + data);
    console.log("2. this.data = " + this.data);
    console.log("3. window.data = " + window.data);
});

/*
- 코드 4 실행 결과 -

1. data = 30
2. this.data = 20
3. window.data = 30
*/이벤트 리스너에서 this는 이벤트를 발생시킨 객체가 됩니다.그렇기 때문에 this는 #myButton이 됩니다. 이에 따라 주석2는 #myButton 객체에 data라는 프로퍼티를 동적으로 추가하는 구문이 됩니다. #myButton의 data 프로퍼티에 20을 저장합니다.주석3의 data는 우선 지역 변수 내에서 data를 찾고, 없다면 상위 영역에서 data를 찾게 됩니다. 결국, 주석3의 data는 주석1의 전역 변수 data가 되어 30을 저장합니다.주석2의 data는 #myButton 객체의 data, 주석3번 data는 전역 변수인 data를 나타냅니다 (1의 data)5. 메소드에서의 this- 예제 코드5var data = 10;              // 1
function MyClass () {
    this.data = 0;
}
MyClass.prototype.method1 = function () {
    this.data = 20;         // 2
    data = 30;              // 3

console.log("1. data = " + data);
    console.log("2. this.data = " + this.data);
    console.log("3. window.data = " + window.data);
}

var my1 = new MyClass();
my1.method1();

/*
- 코드 5 실행 결과 -

1. data = 30
2. this.data = 20
3. window.data = 30
*/메소드에서의 this는 메소드를 호출한 객체가 됩니다.주석2의 data는 객체의 프로퍼티가 되어 코드 my1.data에 20이 저장됩니다.주석3의 data는 우선 지역 변수 내에서 data를 찾고, 없으면 상위 영역에서 data를 찾게 됩니다. 결국 주석3의 data는 주석1의 전역 변수 data가 되어 30을 저장합니다.주석2의 data는 my1 객체의 data, 주석3번 data는 전역 변수인 data를 나타냅니다 (1의 data)6. 메소드 내부의 중첩 함수에서의 this- 예제 코드6var data = 10;             // 1
function MyClass () {
    this.data = 0;
}
MyClass.prototype.method1 = function () {
    function inner() {
        this.data = 20;         // 2
        data = 30;              // 3

console.log("1. data = " + data);
        console.log("2. this.data = " + this.data);
        console.log("3. window.data = " + window.data);
    }
    inner();
}

var my1 = new MyClass();
my1.method1();

/*
- 코드 6 실행 결과 -

1. data = 30
2. this.data = 30
3. window.data = 30
*/객체의 메소드 내부에서 만들어지는 중첩 함수에서 this는 객체가 아닌 window가 됩니다.이에 따라 주석2의 data는 주석1의 전역 변수가 되어 주석1의 data에 20이 저장됩니다.주석3의 data는 우선 지역 변수 내에서 data를 찾고, 없으면 상위 영역에서 data를 찾게 됩니다. 결국은 주석3의 data 역시 주석1의 전역 변수 data가 되어 30을 저장합니다.1, 2, 3의 data 모두 전역 변수인 data를 나타냅니다 (1의 data)(참조 문헌 : 자바스크립트 + JQuery 완전정복 스터디)

파란여새275 · Answer

안녕하세요.객체 메서드 a 안의 this는 객체를 가리킵니다. 이것은 객체의 메서드를 호출할 때 this를 내부적으로 바꿔주기 때문에 그렇습니다.다만, 호출할 때 호출하는 함수가 객체의 메서드인지 그냥 함수인지가 중요합니다. a2는 obj.a를 꺼내온 것이기 때문에 더 이상 obj의 메서드가 아닙니다.어떠한 상황에서 this를 사용하느냐에 따라 달라집니다.감사합니다.

생활꿀팁

생활꿀팁

자바스크립트의 this 키워드란?

this 란?

1. 일반 함수에서의 this

3. 일반 중첩 함수에서의 this

4. 이벤트 리스너에서의 this

5. 메소드에서의 this

6. 메소드 내부의 중첩 함수에서의 this