this 내용 정리

https://www.zerocho.com/category/JavaScript/post/5b0645cc7e3e36001bf676eb

https://www.zerocho.com/category/JavaScript/post/5b0645cc7e3e36001bf676eb

https://www.youtube.com/watch?v=pgo6URFz8tc&list=PLcqDmjxt30Rt9wmSlw1u6sBYr-aZmpNB3&index=6 

 

this

아무것도 없는 this = 기본적으로 window
this는 함수가 호출될 때 정해짐
- 함수를 호출 할 때 함수 앞에 객체가 있으면 this는 객체
- 함수가 화살표 함수면 this는 안 바뀜
- new를 붙일 경우 객체는 자기 자신

this를 바꾸는 것 

(참고 : https://ibrahimovic.tistory.com/29)

javascript : call, apply, bind 차이 - this의 사용

- bind : this 값을 영구적으로 바꿈, 새로운 함수를 만듦
- call : this를 특정값으로 지정 가능, 매개변수를 직접 받음

- apply : call과 동일, 매개변수를 배열로 받음 

 

[예제]

const obj = {
  name: "test",
  sayName() {
    console.log(this.name); //test - 1
    function inner() {
      console.log(this.name); //window.name = undefined - 2
    }
    inner();
  },
};

obj.sayName(); //test
//1
//obj가 붙고 화살표 함수가 붙지 않음
//2
//함수 호출 할 때 this를 바꿔주는 동작이 없음, window

const obj2 = {
  name: "test",
  sayName: () => {
    console.log(this.name);
    function inner() {
      console.log(this.name); //sayName
    }
    inner();
  },
};

const obj3 = {
  name: "test",
  sayName() {
    console.log(this.name); //test
    const inner = () => {
      console.log(this.name); //test -2
    };
    inner();
  },
};

obj.sayName(); //test, test
//2 함수 호출 시 this
//inner() : 함수를 바꿔주는 행동 x
//화살표 함수 : 부모 함수(sayName)의 this를 그대로 가져옴
//함수를 호출하기 전까지는 뭔지 모름