this 키워드

객체는 메서드와 프로퍼티로 구성되어 있다.  동작을 나타내는 메서드는자신이 속한 객체의 상태, 즉 프로퍼티를 참조하고 변경할 수 있어야 한다. 이때 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다.

 

this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다.

this는 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다.

 

 

this가 가리키는 값, 즉, this 바인딩은 함수 호출방식에 의해 동적으로 결정된다.

 

■ 함수 호출방식

1. 일반 함수 호출

2. 메서드 호출

3. 생성자 함수 호출

 

1. 일반 함수 호출

- 전역 함수는 물론이고 중첩 함수, 콜백 함수(setTimeOut, map, etc...)를 일반함수로 호출하면 함수 내부의 this에는 전역 객체(window)가 바인딩된다.

 

function myFunc1(){
    console.log(this); // window
    
    function myFunc2(){
        console.log(this); // window
    }
}

myFunc1();
myFunc2();

 

2. 메서드 호출

- 메서드를 호출한 객체에 바인딩된다.

 

const person = {
    name: "chanki",
    getName(){
    	return this.name;
    }
}

console.log(person.getName()); // chanki

 

- 주의할 것은 메서드 내부의 this는 메서드를 소유한 객체가 아닌 메서드를 호출한 객체에 바인딩된다는 것이다. (객체에 포함된 것이 아니라 독립적으로 존재하는 별도의 객체다.)

 

 

const person = {
    name: "chanki",
    getName(){
    	return this.name;
    }
}

const anotherPerson = {
    name: "pureum"
}

// case#1 - getName 메서드를 anotherPerson 객체의 메서드로 할당
anotherPerson.getName = person.getName;

console.log(anotherPerson.getName()); // pureum

// case#2 - getName 메서드를 변수에 할당
const getName = person.getName;

console.log(getName()); // ''


function handleClick(){
    console.log(this);
}

// HTML 노드 객체가 출력된다.
document.getElementById("btn").addEventListener("click", handleClick);
document.getElementById("btn-0").onclick = handleClick;

 

3. 생성자 함수 호출

생성자 함수 내부의 this에는 생성자 함수가 (미래에) 생성할 인스턴스가 바인딩된다.

 

function Circle(radius){
    this.radius = radius;
    this.getDiameter = function(){
    	return 2 * this.radius;
    }
}

const circle1 = new Circle(5);
const circle2 = new Circle(10);

console.log(circle1.getDiameter()); // 10
console.log(circle2.getDiameter()); // 20