Inheritance Patterns

자바스크립트에서 상속을 구현하는데는 여러가지 방법이 있지만 그 중 두가지를 정리해보려 한다.

1. pseudoclassical style

var Car = function(name) {
	this.name = name;
    	this.position = 0;
}

Car.prototype.move = function() {
	this.position += 1;
}

var avante = new Car("avante")

 

위의 코드를 실행하면 

avante는 name과 position이라는 property에 각각 "avante"와 0이라는 값을 갖는다.

또한 move라는 메소드를 가지고 있다.

이러한 Car 클래스를 상속받은 객체를 만들어보자.

 

var SmallCar = function(name, color) {
	Car.call(this, name);       // or Car.apply(this, arguments);
    	this.color = color;
}

SmallCar.prototype = Object.create(Car.prototype);
SmallCar.prototype.constructor = SmallCar;

SmallCar.prototype.drive = function() {
	console.log(this.name + ' is move');
}

var tico = new SmallCar("tico", "white");

 

pseudoclassical style에서는 위와같이 상속을 구현하여야 한다.

이렇게 선언된 tico라는 객체는 property로는 name, position, color를 갖게되고 각각 "tico", 0, "white"값을 갖는다.

메소드로는 Car에서 상속받은 move()라는 메소드와 새로 선언된 drive()메소드를 갖게된다.

상속받은 메소드를 수정하고싶다면 아래와 같이 구현할 수 있다.

 

var SmallCar = function(name, color) {
	Car.call(this, name);       // or Car.apply(this, arguments);
    	this.color = color;
}

SmallCar.prototype = Object.create(Car.prototype);
SmallCar.prototype.constructor = SmallCar;

SmallCar.prototype.drive = function() {
	console.log(this.name + ' is move');
}

// 부모클래스의 메소드를 가져와 기능을 더 추가하고싶으면 (부모클래스의 메소드는 그대로)
SmallCar.prototype.move = function() {
	Car.prototype.move(); 
    	this.position += 1;
};

// 부모클래스의 메소드를 가져와 아예 수정하고싶으면 (부모클래스의 메소드는 그대로)
SmallCar.prototype.move = function() {
    	this.position += 5;
};

var tico = new SmallCar("tico", "white");

2. ES6 "class" 키워드 사용

위와 같은 원리로 작동하지만, 좀더 사용자가 쉽게 작성하기 위해 새로 구현된 ES6의 기능중 하나가 class 키워드이다.

사용법은 다음과 같다.

 

class Car {
	constructor(name) {
    		this.name = name;
        	this.position = 0;
    	}
    	move() {
    		this.position += 1;
    	}
}

 

class SmallCar extends Car{
	constructor(name, color) {
    		super(name);
        	this.color = color;
    	}
    	drive() {
        	console.log(this.name + ' is move')
    	}
}

var tico = new SmallCar("tico", "white")

 

prototype이나 constructor를 연결해주는 등의 과정을 직접 코딩할 필요가 없어졌기 때문에 훨씬 간결하게 표현할 수 있다.

super(name)는 pseudoclassical style의 Car.call(this, name)과 비슷한 역할을 한다.

부모 클래스의 메소드를 상속받아 수정하고 싶다면 다음과 같이 구현도 가능하다.

 

class SmallCar extends Car{
	constructor(name, color) {
    		super(name);
        	this.color = color;
    	}
        
        // 부모클래스의 메소드를 가져와 기능을 추가하고싶으면 (부모클래스의 메소드는 그대로)
        move() {
        	super.move();
            	this.position += 1;
        }
        
        // 부모클래스의 메소드를 가져와 아예 수정하고 싶으면 (부모클래스의 메소드는 그대로)
        move() {
            	this.position += 1;
        }
        
    	drive() {
        	console.log(this.name + ' is move')
    	}
}

var tico = new SmallCar("tico", "white")

 

위와같이 구현할 경우 tico.move()를 실행시키면 tico.position은 2가된다.

super.move()는 부모클래스(Car)에있는 move()라는 메소드를 실행시켜주는 코드이다.

그렇기 때문에 결국 SmallCar클래스의 move()메소드는 this.position값을 2 늘려주는 역할을 한다.