new 생성자 override

function A () {
  this.name = 'A1';
  this.prop = 123;
  return {
    name: 'A2',
    prop: 456
  };
}
let a = new A();

JS에서 생성자 함수를 통해 new 호출할 때, 명시적으로 객체를 반환한다면 해당 객체로 재정의(override)하게 된다. 위 코드의 결과를 결과를 보면 변수 a에 할당된 객체는 A 생성자 함수에서 반환한 {name:"A2", prop: 456} 객체이다.

function B () {
  A.call(this);
  this.name = 'B1';
}
B.prototype = Object.create(A.prototype);
B.prototype.constructor = B;
let b = new B();

만약 위 코드와 같이 생성자 함수 A를 상속하는 생성자 함수 B가 있을때, 변수 b에 할당된 객체는 생성자 함수 A에서 반환된 객체와 관계없이 {name:"B1", prop:123}이다. 생성자 함수 A에서 생성될 때 name:"A2"prop:123가 할당되고, 생성자 함수 B에서 생설될 때 name:"B1"이 재정의 된다.

class A {
  constructor() {
    this.name = 'A1';
    this.prop = 123;
    return {
      name: 'A2',
      prop: 456
    };
  }
}
let a = new A();

ES2015에 도입된 class 키워드를 사용해서 A를 생성하면 위에서 보았던 것과 같이 변수 a에는 반환된 객체인 {name:"A2", prop: 456}가 들어있다.

class B extends A {
  constructor() {
    super();
    this.name = 'B1';
  }
}
let b = new B();

반면 Prototype 상속을 통해 상속하였던 것과 마찬가지로 classextends 키워드를 사용하여 상속하여 반환값을 비교해보면 {name: "B1", prop: 456}Prototype 상속과 다른 값이 할당되어 있는 것을 볼 수 있다. A에서 반환된 객체가 부모가 되고, B에서 할당한 값들이 재정의되는 것에서 차이점이 있다.

ES2015에 도입된 class 키워드가 단순히 문법적 양념(syntac sugar)라고 생각해왔는데, 위와 같이 일부 다르게 동작되는 부분이 있다는걸 알 수 있었다. 새롭게 추가되는 스펙들에 대해서 좀 더 면밀히 알아봐야됨을 느꼈다.

Reference

SmileCat

SmileCat
How do you define yourself?

[Openlayers] Render Event 정리

## 이벤트### [Map](http://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html)| event | module | note || :--: | -- | -- || [postcompose](...… Continue reading