this

“객체”는 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적인 자료구조이다.

동작을 나타내는 메서드는 자신이 속한 객체의 상태, 즉 프로퍼티를 참조하고 변경할 수 있어야 한다. 이떄 메서드가 자신이 속한 객페의 프로퍼티를 참조 하려면

먼저 자신이 속한 객체를 가르키는 식별자를 참조할 수 있어야 한다.

const circle = {
    radius: 5,
    getDiameter() {
        return 2 * Circle.radius
    }
};

console.log(circle.getDiameter()) // 10

위의 설명을 듣고 코드를 보니 무슨말인지 이해 되시나여?

• 메서드는 기본적으로 객체의 프로퍼티를 변경합니다. 즉, 변수(상태)를 변경시키는 일을 합니다.
• 그런데 객체안의 메서드가 변수의 접근을 하기위해서는 자신을 재귀적으로 참조해야하는 일이 발생합니다.

이럴 때 사용하는 것이 this 키워드 입니다!.

이러한 this가 가르키는 값은 함수 호출 방식에 따라 동적으로 결정됩니다.

호출 방식은 크게 3가지 경우로 나뉩니다.

1. 일반 함수 호출
2. 메서드 호출
3. 생성자 함수 호출

일반 함수호출

기본적으로 일반 함수 호출의 this는 window 즉, 전역객체가 바인딩 됩니다.

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

메서드안의 중첩함수로 선언된 일반함수 역시 this는 전역객체가 반인딩 됩니다.

const obj = {
    value: 100,
    foo() {
        console.log('foo`s this: ', this); //window
        console.log('foo`s this.value: ', this.value); // 100
        function bar() {
            console.log('callback`s this', this) //window
            console.log('callback`s this.value', this.value) //1
        };
    }
}

콜백 함수가 일반함수로 호출 된다면 콜백 함수 내부의 this 역시 전역객체가 바인딩 됩니다.

const obj = {
    value: 100,
    foo() {
        console.log('foo`s this: ', this) //window
        setTimeout(() => {
            console.log('callback`s this', this) //window
            console.log('callback`s this.value', this.value) //1
        }, 100);
   

이처럼 일반 함수로 호출된 모든 함수 내부의 this에는 전역 객체가 반인딩 됩니다.

그런데 쫌 어색하지 않나요???

중첩함수나 콜백함수는 외부 함수를 돕는 헬퍼함수인데, this가 외부함수를 가르키고 있는 것이 합당하지 않을까요?

그런 생각으로 만들어진 메서드가 있습니다. 뒤에 설명할 apply, call, bind입니다.

const obj = {
    value: 100,
    foo() {
        const that = this;
        setTimeout(() => {
            console.log('callback`s this.value', that.value) //100
        }, 100);
    }
}

이런식의 테크닉도 있습니다.

---

메서드의 호출

메서드의 this는 일반적으로 자신을 호출한 객체를 가르킵니다.

const person = {
    name: 'lee',
    getName() {
        return this.name;
    }
};

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

---

생성자 함수 호출

생성자 함수 내부의 this에는 생성자 함수가 생성할 인스턴스가 바인딩 됩니다.

즉, 생성자 함수가 만든 객체를 가르키게 됩니다..

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

const circle1 = new Circle(5);
console.log(circle1.getDiameter()); //10ㅇ

생성자 함수를 new키워드 없이 생성한 함수는 일반함수가 되는데, 그럴경우 전역객체를 가르킵니다.

---

Function.prototype.apply/call/bind 메서드에 의한 갑접 호출

중첩 함수나 콜백 함수가 메서드 내에 있으면 외부함수가 아니라 전역을 가르킨다고 설명 드렸죠?.

또 그게 굉장히 어색한 것이라고도 설명 드렸습니다.

이제 그 어색함을 풀어 보겠습니다.

appply, call

둘의 사용법은 사실상 같다고 생각하셔도 됩니다.

두 메서드는 this로 사용할 객체와 인수 리스트(arguments)를 인수로 전달 받아 함수를 호출합니다.

사용법:

function getThisBinding() {
    return this;
}

const thisArg = {a: 1};
console.log(getThisBinding()) //window
console.log(getThisBinding.apply(thisArg)) // {a: 1}
console.log(getThisBinding.call(thisArg)) // {a: 1}

사용법이 간단하죠?

인수를 넣어 주고 싶을 땐. 아래의 방법으로 사용합니다.

function getThisBinding() {
    return this;
}

const thisArg = {a: 1};
console.log(getThisBinding()) //window
console.log(getThisBinding.apply(thisArg, [1, 2, 3]))
console.log(getThisBinding.call(thisArg, 1, 2, 3))런

as

bind

bind 메서드는 메서드의 this와 메서드 내부의 중첩함수 또는 콜백 함수의 this가 불일치 하는 문제를 해결 하기 위해 유용하게 사용됩니다.

const person = {
    name: 'lee',
    foo(callback) {
        setTimeout(callback, 100);
    }
}
person.foo(function () {
    console.log(`name: ${this.name}.`); // name: .
    // window.name은 브라우저 창을 나타내는 빌트인 프로퍼티이며 기본값은 ''입니다.
});

const person = {
    name: 'lee',
    foo(callback) {
        setTimeout(callback.bind(this), 100);
    }
}
person.foo(function () {
    console.log(`name: ${this.name}.`); // name: lee.
    // window.name은 브라우저 창을 나타내는 빌트인 프로퍼티이며 기본값은 ''입니다.
};

이런 식으로 말이죠!.

다른 객체지향 언어와 달리 js의 this는 상황에 따라 참 동적으로 변해 어려움을 줍니다.

이게 js의 매력인가 싶기도 합니다.

이 정리는 자바스크립트 딥다이브를 배경으로 하고 있습니다. 도움이 많이 되는 책이기에 js를 공부하시는 분들이라면 꼭 보시길~~.

또 this에 대한 재밌는 정리가 있는데 시간이 있으시면 꼮ㄲㄲ 보세여

https://medium.com/@limsungmook/자바스크립트는-왜-프로토타입을-선택했을까-997f985adb42

자바스크립트는 왜 프로토타입을 선택했을까