제로초님의 강의 요약하고 살붙이기 - part1. this 개념 deep 정리!

SaraRyu·2022년 4월 4일
0

JS-강의정리

목록 보기
1/1

함수의 호출과 정의
this는 함수가 호출될때 판단한다.
함수가 호출되는데 함수 앞의 객체가 붙으면
화살표 함수인지 아닌지도 this가 어떤 것인지 결정하는데 큰 역할을 한다
화살표함수는 부모의 this를 가져온다
함수를 호출할때 this를 바꿔주는 동작을 했으면 this는 자기자신이 되고, 그렇지 않으면 window가 된다

const obj = { 
		name:"hehe", 
        sayName(){
        	console.log(this.name);
		}
   	}
    //this가 자기자신이 되는 경우
    obj.sayName()
    new Human

bind,call,apply로 함수의 this를 바꿔 줄 수 있다.

scope는 호출이 아니라 선언을 떠올려야 한다

const obj = {
	name:'hehehe',
    sayName() {
    	console.log(this.name);
    function inner() {
    	console.log(this.name)
        }
        inner();
      }
    }
    //함수inner에 스코프체인은 inner->sayName->anonymous이다

//총복습!

const obj = {
	name: 'gee',
    sayName(){
    	console.log(this.name)
        const inner = () => {
        	console.log(this.name)
           }
           inner()
         }
      }
   obj.sayName()

1.anonymouse함수부터 호출스택에 쌓이고, 여기서의 this는 window이다
2.선언부분을 다 접는다
3.obj.sayName()호출스택에 쌓는다 - 호출할 때 this를 알 수 있다 - 화살표 함수인지 아닌지부터 판단한다(화살표함수이면 this는 무조건 부모의 this를 받아온다) - 여기서의 this는 obj를 가리킨다
4.sayName안에console.log를 호출스택에 쌓는다 여기서의 this도 obj이다.
5.inner()호출스택에 쌓는다 -inner가 화살표함수이므로 부모의 this를 따른다
※만약 여기서 inner함수가 화살표함수가 아니라 일반 함수였다면, 이 안의 this는 window이다.
6.inner안의 console.log를 호출스택에 쌓는다

함수를 위에서부터 차례로 실행하고, 실행이 완료된 함수는 목록에서 제거된다. 0->1->2->->3->로그출력

profile
누군가에게 도움이 되는 것을 개발하게 될 Sara

0개의 댓글