[자바스크립트] this

This

• 어떠한 오브젝트를 가리키는 키워드

  (자바에서의 this와 파이썬에서의 self는 인스턴스 자기자신을 가리킴)

• 자바스크립트의 함수는 호출될때 this 를 암묵적으로 전달받음

• 자바스크립트의 this는 일반적인 프로그래밍 언어에서의 this와 조금 다르게 동작함

• 자바스크립트는 함수 호출 방식에 따라 this 바인딩 되는 객체가 달라짐

• 함수를 선언할 때 this에 객체가 결정되는 것이 아니고,
  함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 동적으로 결정됨

---

<전역 문맥에서의 this>

브라우저의 전역 객체인 window를 가리킨다.
(전역 객체는 모든 객체의 유일한 최상위 객체를 의미함)

console.log(this) //window

---

<함수 문맥에서의 this>

함수의 this 키워드는 다른 언어와 조금 가르게 동작

• this의 값은 함수를 호출한 방법에 의해 결정됨
• 함수 내부에서 this의 값은 호출한 방법에 의해 좌우됨

1. 단순호출

• 전역 객체를 가리킴
  (브라우저에서는 window, node.js에서는 global)

const myFunc = function () {
    console.log(this)
}

//브라우저
myFunc() //window

//Node.js
myFunc() //global

2. Method (Function in object, 객체의 메서드로서)

• 메서드로 선언하고 호출하면, 객체의 메서드이므로 해당 객체가 바인딩

const myObj = {
    data: 1,
    myFunc() {
        console.log(this) //myObj
        console.log(this.data) //1
    }
}

myObj.myFunc() //myObj

https://ko.javascript.info/object-methods

3. Nested (Function 키워드)

const myObj = {
    numbers: [1],
    myFunc() {
        console.log(this) // myObj
        this.numbers.forEach(function (number) {
            console.log(number) // 1
            console.log(this) // window
        })
    }
}

const Number = function (number) {
                console.log(number) // 1
                console.log(this) // window
    }

    const myObj = {
        numbers: [1],
        myFunc() {
            console.log(this) // myObj
            this.numbers.forEach(Number)
        }
    }

• forEach의 콜백함수에서의 this가 메서드의 객체를 가리키지 못하고 전역객체 window를 가리킴
  단순 호출 방식으로 사용되었기 때문

화살표 함수

• 이를 해결하기 위해 등장한 함수 표현식이 바로 “화살표 함수”

const myObj = {
    numbers: [1],
    myFunc() {
        console.log(this) // myObj
        this.numbers.forEach((number) => {
            console.log(number) // 1
            console.log(this) // myObj
        })
    }
}

• 일반 function 키워드와 달리 객체를 잘 가리킨다.
• 화살표 함수에서 this는 자신을 감싼 정적 범위
• 자동으로 한단계 상위의 scope의 context를 바인딩