바닐라코딩 프렙 4주차

this

• this 키워드는 항상 함수 내부에서 사용된다
• this는 함수가 어떻게 실행되느냐가 중요하다. 실행이 어떻게 됬냐에 따라서 값이 바뀐다
• 모든 함수엔 this가 내제되어있다
• 함수의 선언이나 할당은 this와 무관하다

이렇게 this에는 몇가지 특성이 있는데 그 중 가장 중요한건 this의 값은 정적으로 정해져있는게 아니라 

함수가 어떻게 실행되느냐에 따라서 달라지는 동적인 값이다. 함수를 호출하는 4가지 방법에 대해 알아보겠다

 

---

1. Regular function call

일반 함수 실행 방식일 경우 this 값은 window(브라우저 환경), global(Node.js 환경)을 가르킨다

 

console.log(this);  //window
console.log(this === window); //true

 

2. Dot Notation

여기서 닷 노테이션은 결국 객체의 메서드로 호출되었을 때의 this 값을 말한다. 점 표기법이든 대괄호 표기법이든

앞에 객체가 명시돼 있는경우는 메서드로 호출한 것이고, 그렇지 않은 경우에는 함수로 호출한 것이다. 메서드로

호출한 경우의 this는 점 표기법 앞의 객체를 가르킨다.

 

var obj = {
	method: function (x) { console.log(this)}
};

obj.method();  // { method: f} 즉 this는 메서드 앞의 obj를 가르킨다

 

여기서 메서드 내부함수에서의 this는 또 다른 값을 가진다. 앞서 말했듯이 결국 함수가 어떻게 실행되었느냐가 관건이다 

 

var obj = {
	outer: function () {
    	console.log(this);              //obj1
        var innerFunc = function () {
        console.log(this);
        }
        innerFunc();                   //window
        
        var obj2 = {
        innerMethod: innderFunc
        };
        obj2.innerMethod();            //obj2
     }
 };
        obj1.outer();

 

별도로 화살표 함수는 실행 컨텍스트를 생성할 때 this 바인딩 자체가 빠져있어서 상위 스코프의 this를 그대로 활용할 수 있다.

화살표 함수는 생성된 시점을 기준으로 상위의 this를 찾아 참조한다.

이 부분이 좀 많이 헷갈렸는데 객체의 메서드가 화살표 함수로 있으면 전역객체를 참조하고 메서드 내부에 화살표함수를

실행해서 this를 출력해보면 메서드가 가르키는 this를 출력했었다(애초에 메서드는 닷 노테이션으로 실행됬으므로 dot 앞이

객체를 가르키는데 그걸 this가 그대로 받은거라고 생각들었다)

 

3. call, apply, bind

call 메서드와 apply 메서드는 둘다 함수를 즉시 실행하고, 첫 번째 인자를 this로 바인딩 하지만 call 메서드는 이후의 인자들을

호출할 함수의 매개변수로 하지만, apply는 두개의 인자만 가지고 두번째 인자에 배열을 넣어줘야 한다

 

기능적으로 어떤 역활을 하는지 이해가 됬었지만 유사배열에 차용하거나 여러 인수를 묶어 하나의 배열로 전달하려 하거나

할때 call과 bind를 사용하는게 너무 헷갈렸다. 첫 번째 인자가 바인딩 되는게 의미가 있는건지 아직 잘 이해가 가지 않지만

기계적으로 어떻게 작동되는지는 습득했다.

 

 

var testArr = [1, 2, 3];
Array.prototype.push.call(tesrArr, 4);
console.log(testArr);  //[1, 2, 3, 4] 
//testArr에 4가 마지막 배열로 추가해준다는건 알겠는데 this를 지정해야하는 자리에 왜 testArr이 들어가는지
//아직 잘 이해가 안간다 Array.prototype.push를 상세히 보려고 했는데 this로 명시되있는 기능들은 보이지 않았다

 

 

var number = [10, 20, 30, 40, 50];
var max = Math.max.apply(null, number);
var min = Math.min.apply(null, number);

var max = Math.max.call(null, ...number); //이렇게 스프레드를 사용하면 콜을 이용할수도 있다

 

 

call과 apply와는 다르게 bind는 함수를 실행하지 않고 반환하기만 한다. 즉 bind 메서드는 함수에 this를 미리 적용하는 것 그리고

부분 적용 함수를 구현하는 두 가지 목적을 지닌다고 했다. bind를 사용할때 인자를 넣어줄 수 있지만 바인드 한 함수를 호출할 때

추가로 인자를 넣어줄수도 있다.

 

4. new keyworkd

 

new키워드 즉 생성자 함수를 이용할 경우 인스턴스가 생성되게 되는데 this의 값은 이 인스턴스를 가르키게 된다.

이 부분은 나중에 프로토타입과 프로토타입 체이닝을 이해하는데 중요한 포인트 같았다.

 

 

function Person (name, age) {
    this.name = name;
    this.age = age;
    }
    
 var onemo = new Person("onemo", 28); // 순서를 보면 생성자 함수 사용시 this 라는 빈 객체가 Person 함수 안에 생성되고 함수를 거쳐 this를 리턴하게 된다

 

---

느낀점

this말고도 이것저것 공부한게 많은 주차였지만 가장 중요하다고 생각했던 this를 다시 한번 정리해 보았다.

이번 주차는 공부하면서 헷갈리는 요소들이 많았는데 다시 한번 처음부터 반복하면서 보다보니

조금씩 발전하고 있는 중이다. 켄님이 말씀해주신 대로 이전에 봤던 것들이 새롭게 이해되기도 하고

아직 이해되지 못하고 고군분투 중인 것들도 있다. 하지만 이런 담금질의 반복을 통해야만 성장할수 있다고 생각한다.

켄님이 결국은 남들과 비교하지말고 자기 페이스를 유지해야 한다고 하셨는데 한번 더 마음에 새기고 있다.

정말 하루하루 쉴틈 없이 바쁜 나날들이지만 감사하고 행복하다. 처음 마음 그대로 겸손하게 그리고 열심히 해야겠다.

내 페이스대로 묵묵히 한 걸음씩.