[JS] this

 

1. this 란?

• this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다.
• this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다.
• 자바스크립트 엔진에 의해 암묵적으로 생성되며 코드 어디서든 참조할 수 있다.
• this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다.
• strict mode(엄격 모드)는 this 바인딩에 영향을 준다.
•  

 

💡 this 바인딩
바인딩이란 식별자와 값을 연결하는 과정을 말한다. 예를들어, 변수 선언은 변수 이름과 확보된 메모리 공간의 주소를 바인딩 하는 것이다. 즉, this 바인딩은 this와 this가 가리킬 객체를 연결하는 것이다.

 

 

2. 함수 호출 방식

 

2.1 일반 함수 호출

 

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

foo();

 

• 기본적으로 this에는 전역 객체가 바인딩된다.
• 전역 함수, 중첩 함수는 일반 함수로 호출하면 함수 내부의 this에는 전역 객체가 바인딩 된다.
• 하지만 this는 객체의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수라 객체를 생성하지 않는 일반 함수에서는 의미가 없다.
• strict mode가 적용된 일반함수는 undefined가 바인딩 된다. 

 

💡 만약 콜백 함수가 일반 함수로 호출된다면 어떻게 될까?

 

var obj = {
    value: 100,
    foo() {
        setTimeout(function() {
            console.log(this.value); // window
        }, 1000);
    }
};

obj.foo() // undefined, 전역객체에 value 값이 없기 때문에

 

• 콜백 함수 내부의 this에도 전역객체가 바인딩 된다.

 

2.2 메서드 호출

 

var obj = {
    value: 100,
    foo: function() {
        console.log(this.value);
    }
};

obj.foo(); // 100

 

• 객체의 메서드 내에서 this는 그 메서드가 속한 객체를 가리킨다.
• 객체.메서드이름() → 이때, 메서드 이름 앞에 객체에 바인딩 된다.
• 메서드 내부의 this는 메서드를 소유한 객체가 아닌 메서드를 호출한 객체에 바인딩 된다는 것을 주의해서 알아둬야한다.

 

2.3 생성자 함수 호출

 

function Person(name) {
    this.name = name;
}

var person1 = new Person("John");
console.log(person1.name); // "John"

 

• 생성자 함수에서 this는 새로운 인스턴스를 가리킨다.
• 즉, 생성자 함수 내부의 this에는 생성자 함수가 미래에 생성할 인스턴스가 바인딩 된다.
• 이때 만약 new 연산자를 사용하지 않으면 생성자 함수가 아닌 일반 함수로 동작한다.

 

2.4 apply, call, bind 메서드에 의한 간접 호출

• Function.prototype.apply / call / bind 메서드에 첫 번째 인수로 전달한 객체
• 모두 Function.prototype 메서드다. 즉, 이들 메서드는 모든 함수가 상속 받아 사용할 수 있다.
• apply, call, bind 메서드를 사용하여 함수를 호출할 때 this를 명시적으로 지정할 수 있습니다.
• 이러한 메서드를 사용하면 함수 내에서 this 값을 원하는 객체로 지정할 수 있다.

 

apply 메서드

• 함수를 호출하며, 함수의 인수를 배열로 받습니다.
• 함수를 호출하면 첫 번째 인수로 전달한 특정 객체를 호출한 함수의 this에 바인딩 한다.

 

call 메서드

• 함수를 호출하며, 지정한 첫 번째 매개변수 외에 나머지 매개변수는 호출할 함수의 인수로 사용됩니다.
• 함수를 호출하면 첫 번째 인수로 전달한 특정 객체를 호출한 함수의 this에 바인딩 한다.

 

💡 apply 메서드와 call 메서드는 호출한 함수에 인수를 전달하는 방식만 다를 뿐 동일하게 동작한다.

→ 두 메서드의 대표적인 용도는 arguments 객체와 같은 유사 배열 객체에 배열 메서드를 사용하는 경우다.

 

bind 메서드

• 함수를 호출하지 않고 this로 사용할 객체만 전달한다.
• 메서드의 this와 메서드 내부의 중첩 함수 또는 콜백 함수의 this가 불일치 하는 문제를 해결하기 위해 사용한다.

 

var obj = {
    value: 100,
    foo() {
        setTimeout(function() {
            console.log(this.value); // 100
        }.bind(this), 1000);
    }
};

obj.foo()

 

 

 

📌 출처

모던 자바스크립트 Deep Dive(이웅모 저)