코어자바스크립트 3장 part1 (this, 함수, 메소드)

this

전역공간에서의 this는 전역객체를 의미

var a = 1;
console.log(a === this.a); //true

주의 : var의 경우는 전역객체의 프로퍼티이나 let , const 는 전역객체의 프로퍼티가 아니다.

let a = 1;
console.log(a === this.a) //false

---

함수 vs 메소드

함수 : 그 자체로 독립적인 기능 수행
메소드 : 자신이 호출한 대상 객체에 관한 동작을 수행

구분 방법 : 함수 앞에 점(.)이 있는지 여부로 구분
예외) 대괄호 표기법

let obj = {
  method : function(x){console.log(this,x);}
};
obj.method(1);		//{method: f} 1
obj['method'](2);	//{method: f} 2

대괄호 표기법에서도 해당 this는 메소드 역할을 수행한다.

this 바인딩은 해당 함수를 호출하는 구문 앞에 점 또는 대괄호 표기가 있는지 없는지의 여부에 따라 달라진다.
1. 함수 : 전역객체 바인딩
2. 메소드 : 해당 객체 바인딩

---

this바인딩이 진행되는 경우

함수 혹은 메소드가 호출 되었을 때(해당 실행 컨텍스트가 실행될 때)

---

this를 우회하는 방법

우회하는 이유 : 호출하는 주체가 없을 때는 자동으로 전역객체를 바인딩하지 않고 호출 당시 주변 환경의 this를 그대로 상속받기 위해서

사용법

1. 변수 활용하기
2. 화살표 함수 활용하기 => this바인딩을 하지 않는다.

---

1.변수 활용하기

1) 변수를 사용하지 않았을때

let obj1 = {
   outer : function(){
       var innerFunc = function(){
           console.log(this);	// Window
       };
       innerFunc();
   }
}

2) 변수를 사용하였을때

let obj = {
   outer : function(){
       let self = this;
       var innerFunc = function(){
           console.log(self);	// {outer: ƒ}
       };
       innerFunc();
   }
}

---

2. 화살표 함수 활용하기

let obj = {
    outer : function(){
        let innerFunc = ()=>{
            console.log(this);	// {outer: ƒ}
        };
        innerFunc();
    }
}

---

콜백함수에서의 this (때마다 다르다)

setTimeout 함수와 forEach 메서드는 콜백 함수를 호출할 때 대상이 될 this를 지정하지 않는다.
addEventListener 메서드는 콜백 함수를 호출할 때 자신의 this를 상속한다.

---

출처

코어자바스크립트