this 바인딩

this 바인딩은 '함수 호출 방식'에 의해 동적으로 결정이 된다. 

 

 

** 렉시컬 스코프와 this바인딩은 결정 시기가 다르다 

함수의 상위 스코프를 결정하는 방식인 '렉시컬 스코프'는 함수 정의가 평가되어, 
'함수 객체가 생성되는 시점'에 상위 스코프를 결정한다. 
하지만 this바인딩은 함수 '호출' 시점에 결정된다. 

 

 

 

1. 일반 함수 호출

// 1. 일반 함수 호출
function foo(){
    console.log("this",this)
    function bar(){
        console.log("this",this)
    }
    bar();
}
foo();

 

-> 일반 함수로 호출하면 함수 내부의 this는 전역 객체 (window) 바인딩이 된다.

but, 일반 함수에서는 this를 쓸 일 x (this는 객체의 프로퍼티나 메소드를 참조하기 위한 자기 참조변수이므로)

 

* 따라서, use strict 를 쓰면 undefined가 나온다.

 

 

 

2. 메소드 호출

const obj = {
  value: 100,
  foo() {
    // foo에서의 this는 메소드의 this -> 메소드를 호출한 객체를 가리킴
    // this는 "obj"
    console.log(this);

    // 메소드 안에 정의된 '일반 함수'

    function bar() {
      // 메소드 안에 중첩된 '일반함수'의 this는 window
      console.log(this);
    }
    // 메소드 내에 정의한 중첩함수도 일반 함수로 호출되면 중첩 함수 내부의 this에는 전역 객체가 바인딩된다.
    bar();
  },
};

obj.foo();

 

 

 

3. 생성자 함수 호출

function Person(name) {
  // 생성자 함수에서 this는 생성자 함수가 생성할 인스턴스를 가리킨다.
  // this = person1
  this.name = name;
}


const person1 = new Person("알로하");

 

4. Function.prototype.apply/call/bind 메소드에 의한 간접 호출

function greeting(name) {
  console.log(`Hello, ${name}! My name is ${this.name}.`);
}

const person = {
  name: 'John',
};

greeting.apply(person, ['Alice']);