ES6 object initializer

21 Apr 2016

1. 글에 대해

  • 모든 결과는 Chrome 브라우저를 통해 테스트된 결과입니다.

2. object initializer

  • 객체 초기화(or 생성)를 위한 표현법(or 식)으로 아래와 같은 것들이 존재한다.

3. ES5 & Object Initializer

// 'use strict';
{
    var o = {x: 1, y: 2, z: function(){}};

    var x = o.x, y = o.y, z = o.z;

    console.log(x, y, z); // 1 2 function(){}

    // 변수 선언(및 할당)과 동시에, 객체 property 값을 초기화할 수 있다.
    var o2 = {x: _x = 3, y: _y = 4};
    // 단 "Strict Mode" 에서는 아래와 같은 예외가 발생하게된다.(주의!!)
    // Uncaught ReferenceError: _x is not defined
    console.log(o2.x, o2.y); // 3 4

    // ES5 에서는 Object.defineProperty 를 통해서만, 접근자를 생성할 수 있다.
    var o4 = {};

    // id 접근자를 생성한다.
    Object.defineProperty(o4, 'id', {
        value: '',
        // 접근자 property 에 수정 권한을 준다.(기본 값: false)
        writable: true,
        get function(){
            return id;
        },
        set function(v){
            id = v;
        }
    });

    console.log(o4.id); // ''

    o4.id = 'yanione';
    console.log(o4.id); // yanione

    console.log(o4);
}

4. ES6 & Object Initializer

  • 기본적인 사용 방법

      {
      // 선언된 변수명과 동일한 객체 property 명을 사용할 경우, 아래와 같이 표현할 수 있다.
      let x = 1, y = 2, z = function(){}, __proto__ = null;

      // property 할당 문법이 보다 간결해졌다.
      let o = {x, y, z, __proto__};

      console.log(o.x, o.y, o.z); // 1 2 function(){}
      console.log(o.__proto__); // null

      // ES6 에서는 객체 초기화 시, 접근자를 생성할 수 있다.
      let o3 = {
          // 접근자 사용을위해, 접근자 property(__id__) 를 선언한다.
          // 접근자 property
          __id__: '',
          // getter
          get id(){
              return this.__id__;
          },
          // setter
          set id(v){
              this.__id__ = v;
          }
      };

      console.log(o3.id); // ''
      console.log(o3.__id__); // ''

      o3.id = 'yanione';

      console.log(o3.id); // yanione
      console.log(o3.__id__); // yanione

      console.log(o3);

      let o4 = {
          // 메서드를 생성한다.
          method(){
              return 1;
          },
          // 문자열을 통해, property 명 조합할 수 있다.
          ['me'+ 'thod1'](){
              return 2;
          },
          // generator 를 생성할 수 있다.
          * generator(length = 10){

              // 일반적인 동기화 구문
              for (var i = 0; i < length; i++){
                  yield i;
              }
          },
          // 전달된 generator 를 비동기로 호출하는 함수
          asyncAction(generator, cb = function(){}, time = 1000){

              if (!generator) return;

              let v = generator.next();

              if (!v.done){
                  window.setTimeout(() => {
                      this.asyncAction(generator, cb, time);
                      cb.call(this, v.value);
                  }, time);
              }
          }
      };

      console.log(o4.method()); // 1
      console.log(o4.method1()); // 2

      let __generator__ = o4.generator();

      // 동기화 구문을 포함한 generator 를 (재귀 호출을 위한)setTimeout 함수를 통해, 비동기로 호출한다.
      // 전달된 callback 함수를 1초 마다 호출하게된다.
      o4.asyncAction(__generator__, function(v){
          console.log(this); // o object
          console.log(v); // 0 ~ 9
      });
  }

  • super 키워드를 통해, 상속받은 객체 메서드를 호출할 수 있다.

      {

      let o1 = {
          method1(){
              // super 키워드를 통해, 상속받은 객체 메서드를 호출할 수 있다.
              super.method2();
          }
      };

      let o2 = {
          method2(){
              console.log('method2');
          }
      };

      Object.setPrototypeOf(o1, o2);

      o1.method1();

  }

  • ES5 의 __proto__ 내부 속성을 통해, super 키워드를 구현할 수 있다.

      {
      let o1 = {
          method1(){
              // getPrototypeOf 메서드는 chrome 5, IE 9 이상에서 지원한다(대부분의 브라우저에서 지원한다고 볼 수 있다)
              // getPrototypeOf 메서드를 통해, super 키워드를 구현할 수 있다.
              // Object.getPrototypeOf(this).method2() === this.__proto__.method2()
              Object.getPrototypeOf(this).method2();
          }
      };

      let o2 = {
          method2(){
              console.log('method2');
          }
      };

      // setPrototypeOf 메서드는 chrome 34, IE 11 이상에서만 지원한다.
      // Object.setPrototypeOf(o1, o2) === o1.__proto__ = o2;
      Object.setPrototypeOf(o1, o2);

      o1.method1();

  }

관련 URL

Related Posts

comments powered by Disqus