this의 용법

this

• 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수

• 함수를 호출 할 때, 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정

함수 호출 방식

1. 일반 함수로 실행

• 전역객체를 참조
• browser-side에서는 window, server-side에서는 global

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

func(); // window

2. 메서드로 실행

• 객체안에 선언된 함수
• 내부함수는 일반 함수, 메소드, 콜백함수 어디에서 선언되었든 관게없이 this는 전역객체를 바인딩

const value = 1;

const obj = {
  value: 100,
  foo: function() {
    console.log("foo's this: ",  this);  // obj
    console.log("foo's this.value: ",  this.value); // 100
    function bar() {
      console.log("bar's this: ",  this); // window
      console.log("bar's this.value: ", this.value); // 1
    }
    bar();
  }
};

obj.foo();

3.apply/call/bind

• this를 명시적으로 원하는 객체로 지정할 수 있도록 도와주는 메서드
• this 값 혼란 줄여줌

4. new 연산자 - 생성자 함수

• this의 값은 새로 생성된 인스턴스를 가리킴
• return 문을 생성하면 this가 무시됨

function Person(name,age) {
  this.name = name,
  this.age = age,
}
  
function PersonReturn(name, age) {
  this.name = name,
  this.age = age,
  
  return {
    name: "샐리",
    age: 5
  }
}
  
const 브라운 = new Person("브라운", 10); // (1)
const 코니 = new Person("코니", 8); // (2)
  
const 샐리 = new PersonReturn("레너드", 7);
console.log(샐리.name); // 샐리