javascript_in_depth_4

자바스크립트에서의 상속의 활용

상속을 구현하는 몇 가지 방법을 소개한다.

Object.create 함수

기존에 상속 방식의 구조적인 불완전성 이외에도 new 키워드 자체가 "자바스크립트답지 않다"는 의견이 많이 반영되면서 객체를 상속하여 생성할 수 있는 함수를 별도로 제공하게 되었다.
먼저 더글라스 크락포드가 주장했던 Object.create 함수의 형태는 다음과 같다.

Object.create = function (o) {
    function F() {}
    F.prototype = o;
    return new F();
}

Object.create의 내부적인 형태는 기본 함수 F를 선언하고 F의 프로토타입만 인자로 받는 객체로 수정하여 새로운 F 객체를 생성하여 반환한다. 여기서 주의할 점은 Object.create 함수의 인자는 생성자인 함수가 아니라 프로토타입으로 설정할 객체 또는 인스턴스라는 점이다.

Object.create함수를 통해 객체를 생성하면, 개발자가 new 키워드를 사용하지 않고 함수 호출로 객체가 생성되는 것을 확인할 수 있다. new 키워드를 사용할 때와는 달리 전체적으로 소스에 생성자의 개념이 약해지고 객체의 인스턴스와 인스턴스 간의 상속을 강조하는 것이 Object.create 함수의 특징이라고 볼 수 있다.

Object.create 함수의 상속 여부 확인

var person = {
  yell: function() {
    console.log("My name is " + this.name);
  }
};

var unikys = Object.create(person);
unikys.name = "Unikys";
unikys.yell();

// Object.create 함수로 생성한 객체의 상속 확인이 어려운 예
//console.log(unikys instanceof person); // TypeError!

// Object.create 함수로 생성한 객체의 프로토타입 확인
console.log(Object.getPrototypeOf(unikys) === person); // true
console.log(Object.getPrototypeOf(person)); // Object {}

// Object.create 함수의 인자로 일반 객체를 활용한 경우의 상속 확인
console.log(person.isPrototypeOf(unikys)); // true
console.log(Object.prototype.isPrototypeOf(unikys)); // true

Object.create의 객체 초기화

객체를 생성할 때 new 키워드를 사용하면 생성자 안에서 생성되는 객체를 초기화하는 작업을 수행할 수 있는데, Object.create 함수의 구현 방법을 살펴보면 Object.create와 별도로 객체를 초기화하고 있는것을 볼 수 있다. 이러한 과정을 하나의 함수로 묶어서 객체별로 간단한 상속 함수를 만들 수도 있지만, 표준의 Object.create 함수의 2번째 인자를 선택적으로 받아서 객체를 초기화하도록 되어 있다.

// Object.create 함수로 수정 가능한 속성 초기화 예

var unikys = Object.create(Person.prototype, {
    name : {
        value: "Unikys",
        configurable: true,
        enumerable: true,
        writable: true
    }
});

Object.defineProperty

Object.create와 new 키워드 조합

function Person() {
  this.name = "anonymous";
}
function Unikys() {
  this.name = "Unikys";
}

Unikys.prototype = Object.create(Person.prototype, {
  constructor: {
    value: Unikys
  }
});

var unikys = new Unikys();
console.log(unikys instanceof Unikys); // true
console.log(unikys instanceof Person); // true
console.log(unikys.constructor); // function Unikys()

이렇게 Object.create의 2번째 인자로 Unikys.prototype의 생성자 속성을 읽기 전용으로 설정하여 기존에 자바스크립트가 자체적으로 가지고 있었던, 생성자의 연결이 깨지던 현상을 보완하여 new 키워드를 통한 상속을 사용할 수 있다.

class와 extends를 통한 상속

ECMAScript 6에서는 새로운 키워드인 class와 extends를 정의하였다. 기존의 new 키워드를 함수와 함께 사용할 때는 개발자의 실수로 인한 오동작은 일어나도 오류가 발생하지 않아서 오동작의 원인을 찾아내기가 어려웠다. 그래서 객체지향 프로그래밍 처럼 new 키워드의 생성자와 함수 호출 객체를 구분하여 오류가 발생하도록 보완하였다.

class Person {
  constructor() {
    this.name = "anonymous";
  }
}
class Unikys extends Person {
  constructor() {
    super();
    this.name = "Unikys";
  }
}

var unikys = new Unikys();
console.log(unikys instanceof Unikys); // true
console.log(unikys instanceof Person); // true
console.log(unikys.constructor); // class Unikys extend Person

ES6 Class는 단지 prototype 상속의 문법설탕일 뿐인가?

Object.create 함수 크로스 브라우저 호환성 보완

// 크로스 브라우징을 위한 Object.create 함수 정의
(function () {
    if (!Object.create) {
        Object.create = (function() {
            function F() {}
            return function (o) {
                F.prototype = o;
                return new F();
            }
        }());
    }
}());