javascript 에서의 this

자바스크립트에서의 this 는 자바에서의 this 와는 다르게 매번 헷갈리는 녀석이다.

 

결론적으로 말하자면 자바스크립트에서의 this는
this를 사용하고 있는 함수가 어떻게 호출된 함수냐에 따라 달라진다.

 

어떻게 호출된 함수냐에 대한 경우는 크게 3가지가 있다.

- 일반 함수 호출

- 메소드 호출

- 생성자 호출

 

1. 일반 함수로서 호출

기본적으로 this 는 전역 객체에 바인딩 된다.

(브라우저에서는 window, Node에서는 global 객체)

 

전역 함수, 내부 함수, 심지어 콜백 함수도 모두 this 는 global 객체를 가리키게 된다.

// 전역 함수
function testFunc1 () {
  console.log(this) // Window
}

const testObj = {
  // 메소드
  foo: function () {
    console.log(this) // testObj
    // 내부 함수
    function bar () {
      console.log(this) // Window
    }
  }
}

function testFunc2 () {
  // 콜백 함수
  setTimeout(function () {
    console.log(this) // Window
  }, 3000)
}

 

2. 메소드로서 호출

메소드라고 보는 기준은 해당 함수가 특정 객체의 프로퍼티 값인 경우이다.

이 경우 메소드 내에서 this 는 해당 메소드를 가지고 있는 객체를 가리키게 된다. (위 예제에 있다)

 

3. 생성자로서 호출

함수를 호출할 때 new 를 붙여서 호출하면 해당 함수는 생성자로서 동작한다.

참고로 일반 함수에도 new 를 붙이면 생성자처럼 동작하니, 생성자로서 만든 함수라면 혼란 방지를 위해 함수명을 첫문자를 대문자로 하자.

 

생성자 함수의 동작 방식을 간단하게 요약하면 다음과 같다.

1. 빈 객체를 생성하고, 생성자 함수 내의 this는 이 빈 객체를 가리키게 된다.

2. this 를 통해 생성한 프로퍼티와 메소드들은 위에서 생성된 객체에 추가된다.

3. 명시적으로 반환문을 작성하지 않는다면, this에 바인딩 된 객체가 반환된다. (this를 명시적으로 반환해줘도 결과는 같다.)

(단, this를 반환하지 않으면 생성자로서 기능을 못하니, 그냥 반환문을 쓰지 않는게 좋다)

 

아래 예제를 참고하자

function User (name, id) {
  this.name = name
  this.id = id
}

// 생성자로서 호출
const user1 = new User('Jay', 'jay01')
console.log(user1) // User

// 일반 함수로서 호출
const user2 = User('Mac', 'mac01')
console.log(user2) // undefined
console.log(window.name) // 'Mac'

 

마지막으로 자바스크립트에서는 this 가 가리키는 객체를 임의로 바꿀 수가 있다.

apply/call/bind 키워드를 사용하고, 해당 함수 내에서 this가 가리키게 될 객체를 파라미터로 넘겨주면 된다.

// User 함수의 this가 otherObj 라는 객체를 가리키게 되면서 호출됨.
User.apply(otherObj, ['Jay', 'jay02'])
User.call(otherObj, 'Jay', 'jay02')

// User 함수 내부의 this가 otherObj 를 가리키는 새로운 함수를 리턴함.
const newUser = User.bind(otherObj)

apply, call 은 해당 함수를 호출하되, 내부의 this 가 다른 객체를 가리키게 되면서 호출되는 키워드 이다.

둘의 차이점은 파라미터를 넘기는 모양의 차이이다.

bind의 경우는 원래의 함수의 this 가 다른 객체를 가리키게 되는 신규 함수를 리턴해준다.