1.자바스크립트 중고급 내용 정리(함수,호이스팅,prototype, 실행컨텍스트 등)

스터디/자바스크립트중고급

1.자바스크립트 중고급 내용 정리(함수,호이스팅,prototype, 실행컨텍스트 등)

고무곰(GomuGom) 2018. 9. 30. 16:26

[ 자바스크립트 중고급 내용 별도 정리(함수,호이스팅,prototype,실행컨텍스트 등. ]

- 해당 내용은 class 상속을 제외한 자바스크립트 중,고급 내용을 정리한 것입니다.

<!DOCTYPE html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script>

/*
        [ 함수(Function) ]

1. 호이스팅(Hoisting)
        : 변수 선언, 함수선언(익명함수는 X) 을 위로 끌어올리는 성질로
        -> 아래의 예에서 a()를 호출시 자바스크립트는 최초 a함수를 위로끌어올려
        호이스팅하기 때문에 수행 가능하지만 b, c는 에러가 발생

-> 아래 예시를 자바스크립트 수행 순서대로 표시해보면...
        function a(){...}
        var b;
        function bb(){...}
        var c;
        // 여기까지해서 변수 선언부와 함수 선언이 호이스팅 됨...

console.log(a());
        console.log(b());
        console.log(c());

b = bb;
        c = function(){...}
        가 되게됨...
    */
    console.log(a()); // 'a'
    //console.log(b()); // 변수 b가 호이스팅되어 위로 올려지고 bb()함수도 호이스팅되지만 b에
                      // 대입되지 않은 시점에 수행함으로 에러
    //console.log(c()); // 변수 c 선언만 호이스팅되고 c에는 undefined가 들어 있음으로 에러

// 선언적 함수
    function a(){
      return 'a';
    }
    // 기명함수 표현식
    var b = function bb(){
      return 'b';
    }

// 익명함수
    var c = function(){
      return 'c';
    }
    ///////////////////////////////////////////////////////////////////////////////////////

/*
    ex) 아래의 예시를 한번 보자.
      팀작업을 하다보면 다른 사람과 동일한 이름으로 함수를 아래쪽에 한번 더 선언하게 될 수 있는데
      (실수로...)
      이 경우는 호이스팅을 같이 생각하면 어떻게 수행될까?
      -> 첫번째 sum함수 선언이 호이스팅되서 올라가고, 두번째 sum 함수 선언이 호이스팅되는데
        이때, 이미 sum함수가 있음으로 마지막에 선언된 sum함수로 덮어써지고 만다...
        따라서, sum(1,2)와 sum(3,4)가 모두 3, 7의 결과가 나온다.
        (우리 예상으론 a+b=3, 7이 나올것 같지만...)

결론)
        -> 호이스팅에 의해 덮어써질 수 있음으로 함수 선언은 선언적 함수 방식보다
           함수 표현식(익명함수로 대입하는 등...)의 방식을 사용해서 정의하는 것이 좋다!
    */
    function sum(a,b){
      return "a + b = " + (a+b);
    }

sum(1,2); // 3

function sum(a,b){
      return (a+b);
    }

sum(3,4); // 7
    //////////////////////////////////////////////////////////////////////////
    /*
    - 실행 컨텍스트란?
        : 함수 등이 실행되는 시점에 실행시 필요한 호이스팅, this 바인딩 등의 작업이 이루어져
          필요한 정보를 불러모은 하나의 집합체가 되는 작업.
    -> 호이스팅, 실행 컨텍스트를 따져서 아래 예시의 호출 순서에 대해 생각해 보자.
    -> 출력값은 어떻게 되는가?
      : 정답) 1 undefined 1 1
    */
    var a = 1;

function outer(){

console.log(a);

function inner(){
        console.log(a);
        var a = 3;
      }

inner();

console.log(a);

}

outer();
    console.log(a);

/*
    수행순서)
    1. var a; // 호이스팅
    2. outer함수 선언 호이스팅
    3. a = 1;이 대입됨
    4. outer()를 수행함과 동시에 outer함수의 실행 컨텍스트 생성
    5. outer함수 내에서
       inner함수 선언 호이스팅
    6. outer함수 내의 console.log(a) 수행 -> 1출력
    7. inner()를 수행하며 inner함수의 실행컨텍스트 생성
       var a; 호이스팅되며
       console.log(a) 수행하며 undefined가 출력됨(아래 var a=3에서 a가 호이스팅되지만 대입은 아직 전이기 때문)
       a = 3대입이 이루어짐
    8. outer함수 내의 inner()아래 console.log(a)가 수행됨 -> 1 출력
    9. 가장 아래의 console.log(a)가 수행되며 -> 1출력
    */
    ////////////////////////////////////////////////////////////////////////////////////////////////////////////

/*
      [ 사용시점에 따라 달라지는 this의 의미(this 바인딩) ]
      - 각 상황별 this가 갖는 의미에 대해 알아보자.
      1. 전역 스코프에서 this의 의미 -> "window 객체"를 가리킴
      2. 함수 내부에서 this의 의미 -> "window 객체"를 가리킴
        -> 이 부분이 메서드 내의 this와 헷갈릴 수 있는데
        -> 함수와 메서드는 다름... 메서드는 -> 우리가 흔히 아는 클래스 내에 있는 메서드를 의미하는 것!
        -> 주의하자!! 함수 내의 this의 의미는 "window 객체!"
      3. 메서드 내부에서 this의 의미 -> 메서드 실행 앞까지(호출주체)가 this
          -> 생성자 함수든 리터럴 선언이든 그 안에 정의된 메서드는
          -> new a().print()일 경우 메서드 .앞까지 new a()가 this를 의미하게 됨!
      4. callback에서 this의 의미 -> 함수 내부에서와 동일.
      5. 생성자 함수에서 this의 의미 -> 인스턴스
    */
    // 1. 함수 내에서 this의 의미 ex)
    function a(){
      console.log("함수 내부에서 this의 의미");
      console.log(this); // window 객체...
    }
    function b(){
      function c(){
        console.log("함수 내의 내부 함수에서 this의 의미");
        console.log(this); // 아무리 내부함수여도 역시 window 객체...
      }
      c();
    }

// 2. 메서드 내에서 this의 의미
    var d = {
      e : function(){
        function f(){
          console.log("메서드 내의 내부함수에서  this의 의미");
          console.log(this);
        }
        f();
      }
    }
    d.e(); // window 객체!
    // 여기서 메서드 내의 내부 함수여서 메서드 실행 앞까지가 this를 의미할 것 같지만
    // -> 역시 함수 내부이기 때문에 this가 가리키는 것은 window객체이게 됨!(함수 내부의 this는 무조건!!! window 객체)
    /*
    var a = {
      b : function(){
        console.log("메서드 안에서의 this의 의미");
        console.log(this);
      }
    }
    a.b(); // b()수행 . 앞까지 즉 a 인스턴스가 this
    */

// 그럼... 메서드 내의 내부함수에서 this가 객체를 가리키게 할 순 없을까?
    var obj2 = {
      a : 20,
      b : function(){
        var self = this; // 여기서 미리 this를 담음
        function cc(){
          console.log(self.a);
        }
      }
    }

// 3. callback 함수 내에서 this의 의미 ex)
        // -> 함수에서와 동일 but 함수 수행시 this 바인딩을 지정할 수 있음(함수도 마찬가지)
    var callbackFunc = function(){
      console.log("callback 함수 내에서 this");
      console.log(this);
    }
    var obj3 = {
      a : 1,
      b : function(callBackFunc){
        callBackFunc();
      }
    }
    obj3.b(callbackFunc); // callback 함수 내에서 this -> window 객체
    /*
    [ 함수 실행시 this 바인딩 시켜 실행하는 몇가지 방법 ]
    1. func.call(this바인딩할녀석, 해당함수 매개변수...)
        -> func.call(obj3, 1,2,3)
    2. func.apply(obj3, [1,2,3])
    3. var d = func.bind(obj3, 1,2,3)
        -> 1,2번은 즉시 호출되어 수행되고 3번은 새로운 함수를 생성하게 됨
        -> 즉시 수행되는게 아님... this 바인딩만 결정해서 다른 함수의 매개변수 등으로 전달하고자 할 때 주로 사용됨.
    */
    var cb = function(){
      console.log("bind를 통해 this를 변경해 호출하자.");
      console.log(this);
    }
    var obj4 = {
      a : 1
    }
    setTimeout(cb.bind(obj4),100);
    // setTimeout의 첫번째 매개변수는 함수를 받는데 apply, call은 즉시 수행함으로 bind를 통해서 더해야함
    // 이때, cb함수 수행시 매개변수는 넘기지 않았고, cb함수 수행시 cb함수 내의 this의 의미만 obj4를 가리키도록 bind했음
    // 따라서 this는 obj4를 가리키게 됨.

// 4. 생성자 함수 내에서 this의 의미 ex)
        // -> 인스턴스
    function constructorObj(){
      this.a = 10; // constructorObj 생성자를 통해 생성된 인스턴스를 가리킴(this)
      this.print = function(){
        console.log("이곳에서의 this는 ? ");
        console.log(this); // 메서드 내에서니까 new constructorObj() 가 됨.
      }
    }
    new constructorObj().print();
    /////////////////////////////////////////////////////////////////////////////////////////////////////////////
    /*
      [ prototype ]
      : 많이 들어밨을테지만... 간단히 알면 엄청 쉽고... 자세히 알면 너무너무 어려운... 우리 prototype님...
      -> 우리가 흔히 제일 많이 아는 사용 이유?)
        : 생성자 함수 등에서 메서드를 선언하고 new를 통해 인스턴스를 생성시 모든 인스턴스에서 중복으로 메서드를 위한
        : 메모리 공간을 할당해 비효율 적이니까 공유될 수 있는 prototype에 선언해 효율적이게 관리하고
        : 또, prototype을 통해 상속을 구현하기 위해서... 정도?
      -> 이정도까진 기본적이니까... 많이들 안다. 하지만 인스턴스.메서드() 를 수행했을 때 어떻게 prototype내의 메서드가
        수행되고 하는 원리에 대해 아는 사람은 그리 많지 않다... 아래부턴 그것에 대해 설명한다.

---------------------------------------------------------------------------------------------------------
      - 생성자 함수를 정의시 자동으로 생성자 함수 내에는 prototype 객체라는 프로퍼티가 생성되게 된다.
      - 이때, 생성자 함수를 new를 통해 인스턴스를 생성하게 되면
          -> 해당 인스턴스에는 __proto__ 라는 변수가 하나 생성되게 되는데 이 __proto__는 바로 생성자의 prototype을
          -> 가리키게 된다.
          -> 이때 중요한건!
                -> 인스턴스는 __proto__를 생략하고 prototype에 바로 접근할 수 있다.(__proto__는 생략이 가능하다.)
                ex) new obj().__proto__.testMethod() == new obj().testMethod()

-> 위의 this바인딩과 연계해 얼마나 잘 이해했나 테스트해보자. 아래 예시를 보라.
    */
    function Person(n,a){ // Person 생성자 함수
      this.name = n;
      this.age = a;
    }

Person.prototype.setOlder = function(){
      this.age += 1; // 메서드 내의 this는? .앞까지 호출대상
    }
    Person.prototype.getAge = function(){
      return this.age;
    }

console.log("prototype EX");
    var youngRong = new Person('영롱',29);// 인스턴스 생성
    youngRong.__proto__.setOlder();
    console.log(youngRong.__proto__.getAge()); // NaN 발생 why?
    // -> 메서드내의 this는 메서드 앞 .까지가 호출대상임
    // 따라서, 여기선 youngRong.__proto__ 객체 즉 prototype객체가 this인데 해당
    // prototype내에 a를 정의한 적이 없음 따라서 undefined랑 1이랑 위에서 연산이 이루어져서 NaN가 나옴.
    console.log(youngRong.getAge()); // 29가 출력됨... youngRong이란 인스턴스를 가리키게 되니까... this가
    // 이처럼 __proto__를 생략하고 prototype에접근할 수 있는 것임...
    ////////////////////////////////////////////////////////////////////////////////////////////////////

/*
      [  자바스크립트 상속을 구현하기 위해 반드시 이해해야하는 prototype 체이닝에 관하여... ]
      - 자 우리는 자바스크립트에서 모든 객체는 Object 객체로부터 파생된다라는걸 알고있을거다.(Object 최상위 객체)
      - 모르면... 난감...
      - 그럼 어떻게 모든 자바스크립트 객체들은 Object 객체를 상속받고 있고 또 Object 내에 정의된 toString(), valueOf()등의
      - 메서드를 사용할 수 있는걸까?
      -> Array도 객체임으로 Object를 똑같이 상속하고 있을 텐데 Array로 예를 들어보자.

Object 생성자  -------> Object prototype
                                          /              - toString()
                                        /                - valueOf()
                                      /                  - isPrototypeOf() .. 등의 메서드
                                    /
                                  /
      Array 생성자  ---------> Array prototype
          |                    /
         new                 /
          |                /
      Array 인스턴스 -- __proto__
      -> Array인스턴스의 __proto__는 Array prototype을 가리키고 있고 Array prototype은 Object의 prototype을 가리키고 있기 때문!
      따라서 __proto__는 생략이가능하기 때문에 배열에서 바로 new Array().toString()처럼 접근할 수 있는 것!
    */
    var arr = [1,2,3];
    console.log("Array Object 관계")
    console.log(arr.toString()); // Object prototype에 선언되있는 toString()을 수행함 -> 1,2,3
    arr.toString = function(){ // 이렇게 정의하면 클래스에 static 메서드로 정의하게 되는 것!
      return this.join('_'); // 메서드 내의 this임으로 .앞까지가 호출대상이 this
    }
    console.log(arr.toString()); // arr에 선언된 toString()이 호출되 -> 1_2_3 출력(직접 정의한 것 호출)
    var arr2 = [3,4,5];
    console.log("this bind 변경");
    console.log(arr.__proto__.toString.call(arr2)); // this 바인딩을 arr이 아니라 arr2로 해서 수행할 수도 있음 -> 3,4,5 출력
    // 그럼 우리가 여기서 알 수 있는건 머임?
    // 우리가 event처리할 때 event의 함수 내에서 this를 써서 이벤트가 발생한 돔객체를 가리키도록 하는데 이게 어떻게 가능할까?
    // -> 그래, addEventListener 내에서 전달된 callback함수 수행시 bind를 이벤트가 발생한 돔을 가리키도록 했기 때문이지...
    // -> 이런 이유도 모르고 그냥 이벤트 처리에서 this를 사용하는 사람들이 정말 많다...

var obj5 = {
      a:1,
      b:{
        c:'c'
      }
    }
    console.log("obj5 : ");
    console.log(obj5.toString()); // Object prototype의 toString을 수행해 결과 -> [ Object Object ]
    // 이처럼 Object의 toString()은 우리가 원하는 결과를 얻을만큼 구체적으로 구현되어 있지 않음...
    // 따라서, 객체들의 toString()을 디버깅 용으로 찍어보기 위해 Object prototype을 재정의해 사용하는 것이 권장됨.

obj5.toString = function(){
      var res = [];
      for(var key in this){ // this는 obj5객체를 가리키게 될 것이고, for in을 통해 각 프로퍼티 key가 var key에 들어오게 될 것임
        res.push(key + ': ' + this[key].toString());
      }
      return '{' + res.join(', ') + '}';
    }

console.log(obj5.toString());
    // {a: 1, b: [object Object], toString: function (){
    //
    //   var res = [];
    //
    //   for(var key in this){ // this는 obj5객체를 가리키게 될 것이고, for in을 통해 각 프로퍼티 key가 var key에 들어오게 될 것임
    //
    //     res.push(key + ': ' + this[key].toString());
    //
    //   }
    //
    //   return '{' + res.join(', ') + '}';
    //
    // }}

// b 프로퍼티는 원하는 결과를 얻기 어렵고 매 클래스마다 저렇게 toString을 재정의하기도 번잡함... 따라서 아래처럼 수정하자.
    // Object prototype의 toString을 재정의
    Object.prototype.toString = function(){
      var res = [];
      for(var key in this){ // prototype체인을 통해 인스턴스에서 메서드 수행시 메서드 앞까지가 this가 됨으로 해당 객체
                            // 가 된다.
        res.push(key + ': ' + this[key].toString());

}
      return "{" + res.join(', ') + "}";
    }
    console.log(obj4.toString());
    ////////////////////////////////////////////////////////////////////////////////////////////////////////////
    
  </script>
</head>

저작자표시 비영리