javascript this-Function 호출, Method 호출, 생성자 호출

this는 함수 실행 시 호출 방법에 의해 결정되는 특별한 객체이다.

함수 실행 시 결정되므로, 실행되는 맥락에 따라 this는 다르게 결정된다.

크게 4가지로 설명할 수 있다.

Function 호출, Method 호출, new 키워드를 이용한 생성자 호출, 명백한 바인딩(call, apply, bind) 호출

 

 

1. Function 호출

var name = 'reo';
function foo () {
console.log(this.name); // 'reo'
}
foo();

 

함수 호출 시에 this는 브라우저에서 window 객체를 가리킨다.

하지만 함수 호출 방식에서 애초에 this를 사용하지 않는 것을 권장한다.

경우에 따라 바인딩이 달라지기 때문이다.

(브라우저에서는 window를 node.js에서는 global을 가리킨다.)

 

 

2. Method 호출

var age = 3;
var reo = {
  age: 28,
  foo: function () {
    console.log(this.age);
  }
}
reo.foo();

// 28

 

메서드 호출 시에 this는 부모 객체(실행 시점에 온점 왼쪽에 있는 객체)를 가리킨다.

위의 예에서 this는 전역의 age = 3 이 아닌 reo(부모 객체)의 age = 28을 가리킨다.

 

 

3. new 키워드를 이용한 생성자 호출

function People(name, age) {
  this.name = name;
  this.age = age;

}

const reo = new People('유창', '28')

console.log(reo.name) // 유창
console.log(reo.age)  // 28

 

생성자 호출 시에 this는 새롭게 생성된 인스턴스 객체를 가리킨다.

생성자 호출은 객체. 메서드()와 같이 객체 내에 메서드를 호출하는 방법과 비슷하다.

하지만 객체가 new 키워드를 이용해서 만들어졌다는 것이 다른데

이때의 객체를 인스턴스라고 부른다. 즉 인스턴스. 메서드()의 형태의 호출이다.

 

 

4. 명백한 바인딩(call, apply, bind) 호출

 

javascript this -명백한 바인딩(call, apply, bind) 호출 포스트에서 설명