this

Execution context

Execution context는 함수가 호출 될 때에 생성된다.

여기에 담긴 내용으로는 다음과 같다.

1. scope내의 변수, 함수
2. 호출된 근원
3. 전달인자
4. this

이중에 this에 대해서 알아보기로 하자.

this

this라는 키워드는 모든 함수 scope내에서 자동으로 설정되는 특수한 식별자를 말한다.

타 언어에서 this, self, Me 등등 여러 키워드로 사용되기도 한다.

다만 javascript에서 this는 여러 상황에 따라 가르키는 값이 다르기에 유의해야 한다.

this값의 규칙 (this가 바인딩 되는 규칙)

타 언어를 경험해본적 있다면 this는 보통 class에서 사용되며

이때에 this는 인스턴스를 가르키게 된다.(클래스의 초기화 함수에 많이 사용된다.)

javascript역시 이 경우에도 사용이 가능하지만 이 외의 경우에도 많이 쓰이기에,

사용되는 패턴에 따른 this값의 규칙을 나누어 설명한다.

1. Global
2. Function
3. Method
4. Construction
5. call, apply, bind등 명시적으로 선언해준 경우

1. Global

전역에서 this를 사용한 경우이다.

이때 this는 window를 가르키게 된다.

var name = '황대성'

console.log(this.name) // 황대성
console.log(window.name) // 황대성

2. Function

함수 내에서 this를 사용한 경우이다.

이때 역시 this는 window를 가르키게 된다.

var name = '황대성'

function hi() {
    console.log(this.name)
}
hi() // 황대성

3. Method

만일 함수가 호출된 위치가 어떤 오브젝트의 메서드, 인스턴스의 메서드 인경우
호출된 부모를 가르킨다. (오브젝트에서 메서드가 호출될경우 this는 해당 오브젝트 이다.)

let counter = {
  count: 0,
  up: function () {
    this.count += 1
    console.log(this)
  }
}

counter.up() // {count: 1, up: ƒ}
counter.up() // {count: 2, up: ƒ}

4. Construction

new 키워드와 함께 생성되는 경우 this는 생성될 인스턴스 자신을 의미한다.

타 언어들의 class에서 this또는 self 등 과 동일하다.

class Hi {
    constructor(str) {
        this.name = str
    }
}

let a = new Hi('황대성')

console.log(a.name) // 황대성

function Hello(str) {
    this.name = str
}

let b = new Hello('Dae-seong Hwang')

console.log(b.name) // Dae-seong Hwang

5. call, apply, bind 등 명시적으로 선언해준 경우

함수(메서드 역시 포함)를 호출하는 여러 방법중 하나로

call, apply, bind 등을 사용하여 this의 값을 명시적으로 정해줄 수 있다.

(여기서 bind는 정확히 말하면 호출하는 방법은 아니다. this,전달인자 등이 binding된 함수자체를 돌려준다.)

var name = '황대성'
function hi() {
    console.log(this.name)
}
let [a, b, c]
a = {name: 'Dae-seong Hwang'}
b = {name: 'Java Script'}
c = {name: 'Hello, world!'}

hi() // 황대성
hi.call(a) // Dae-seong Hwang
hi.apply(b) // Java Script
let cNamePrint = hi.bind(c)
cNamePrint() // Hello, world!

참고사항

중요한건 this가 사용된 위치(함수를 선언할때냐 뭐냐 등등)가 아닌

함수가 호출될때의 위치다.

예를들어 함수 하나가 전역에서 만들어 진 것이라도,

호출될때에 어떤 오브젝트의 메서드로 호출되었다면

this는 메서드의 호출규칙에 의해 해당 오브젝트가 될것이다.

function hi() {
    console.log(this)
}

let obj1 = { 
  name: '오브젝트1',
  whatThis: hi
}

let obj2 = { 
    name: '오브젝트2',
    whatThis: obj1.whatThis
}

hi() // window
obj1.whatThis() // {name: "오브젝트1", whatThis: ƒ}
obj2.whatThis() // {name: "오브젝트2", whatThis: ƒ}

위에서 hi함수와 obj1의 whatThis메서드, obj2의 whatThis메서드는 모두 동일한 함수이다.

선언된 위치가 아닌 호출되는 위치가 중요하다는걸 보여주는 단편적인 예시이다.

 

 

또한 function에서의 this가 window인 이유역시

함수가 window의 메서드격 이기 때문이다.

function hi() {
    console.log('hi')
}

hi === window.hi // true