Chapter 4: Mixing (Up) "Class" Objects - hochan222/Everything-in-JavaScript GitHub Wiki

앞의 단원 object를 접하면 객체지향프로그래밍(object oriented (OO) programming)을 떠올리는건 자연스런 일이다. class의 인스턴스화(instantiation), 상속(inheritance), 다형성(polymorphism)을 보기전에 먼저 디자인 패턴으로써의 "class orientation"을 보자.

Class Theory

클라스 상속은 소프트웨어에서 실제 문제들을 모델링하는 아키텍쳐이다. 객체지향 프로그래밍의 기본 동작은 데이터가 작동하는 관련 동작을 본질적으로 가지고 있다. 우리는 이것을 자료 구조라고도 부른다. 클래스는 특정 데이터 구조를 분류하는 방법을 의미한다. 예를들어 자동차는 차량이라는 일반적인 class의 특정 구현으로 설명할 수 있다. Vehicle Class(비행기, 자동차 탈것등등)와 Car Class(엔진, 의자 등등)를 정의하여 소프트웨어에서 클래스와이 관계를 모델링할 수 있다.

본질을 반복해서 다시 정의하는 것은 소프트웨어에서 의미가 없다. 따라서 우리는 상속을 사용한다. Class는 이것들을 집합적으로 정의하지만 인스턴스화는 개별 고유의 것으로 정의한다.

Class의 또 다른 특성은 다형성으로 부모 Class의 일반적 동작을 자식 Class에서 재정의해서 제공 할 수 있다.

"Class" Design Pattern

"Iterator", "Observer", "Factory", "Singleton"을 "OO Design Patterns"으로 토론하는 거슬 주로 보았기에 OO class들을 디자인 패턴으로 생각하지 않았을 것이다. 하지만 class는 모든 것을 포함 할 수 있는 낮은 수준의 디자인 패턴이다.

JavaScript "Classes"

Javascript가 class 문법을 실제적으로 갖고있는가? 아니다.

JS는 클래스와 유사한 구문을 제공하여 Class를 디자인하려는 욕구를 충족시켜준다. 한마디로 JS에서 클라스는 가짜다.

Class Mechanics

많은 클라스 지향 언어에서 자료구조인 스택을 클라스로 제공하고 있다. 그러나 언어에서 실제로 스택에서 직접 작업하지 않는다. 스택 클라스는 추상적인 설명에 불과하고 구체적인 데이터 구조를 갖으려면 인스턴스화 해야한다.

Building

우리는 실제로 상호작용 할 수 있는 객체를 만들기위해 클라스를 빌드(인스턴스화)하며 인스턴스(객체)를 얻는다. 또한, 필요에따라 이를 통해 메소드와 공개 데이터 속성에 접근 할 수 있다.

Constructor

클래스의 인스턴스는 생성자라고 하는 클라스와 동일한 이름의 클라스의 특수 메소드와 함께 구성된다. 이 메서드의 명시적 작업은 인스턴스의 필요한 정보(상태)를 초기화 하는것이다.

다음 의사코드를 보자.

class CoolGuy {
	specialTrick = nothing

	CoolGuy( trick ) {
		specialTrick = trick
	}

	showOff() {
		output( "Here's my trick: ", specialTrick )
	}
}

Joe = new CoolGuy( "jumping rope" )

Joe.showOff() // Here's my trick: jumping rope

Class Inheritance

상속 의사코드

class Vehicle {
	engines = 1

	ignition() {
		output( "Turning on my engine." )
	}

	drive() {
		ignition()
		output( "Steering and moving forward!" )
	}
}

class Car inherits Vehicle {
	wheels = 4

	drive() {
		inherited:drive()
		output( "Rolling on all ", wheels, " wheels!" )
	}
}

class SpeedBoat inherits Vehicle {
	engines = 2

	ignition() {
		output( "Turning on my ", engines, " engines." )
	}

	pilot() {
		inherited:drive()
		output( "Speeding through the water with ease!" )
	}
}

Polymorphism

JS에서 자식과 부모 사이의 관계는 각 생성자의 두 prototype 객체 사이에만 존재하기 때문에 생성자 자체는 직접 관련이 없다.

클래스가 상속 될 때 클래스 자체(클래스에서 생성 된 객체 인스턴스가 아니다.)가 상속 된 클래스를 상대적으로 참조할 수있는 방법이 있으며 이 상대 참조를 일반적으로 super라고 한다.

다형성은 부모와 자식이 연결돼있는게 아니고 자식 클래스에서 부모 클래스로부터 복사본을 가져온다. 클래스 상속은 복사본을 의미한다.

Multiple Inheritance

Javascript는 "다중 상속"을 위한 기본 메커니즘을 제공하지 않는다.

Mixins

JavaScript의 객체 메커니즘은 "상속"또는 "인스턴스화"할 때 자동으로 복사 동작을 수행하지 않는다. 자바 스크립트에는 객체를 인스턴스화하는 클래스가 없다. 개체는 다른 개체에 복사되지 않고 서로 연결된다.

다른 언어에서 클래스 동작은 복사를 의미한다. 따라서, JS 개발자가 JavaScript에서 클래스의 누락 된 복사 동작을 mixins을 통해 유사 동작을 구현한다.

명시적, 암시적 mixin을 살펴보자.

Explicit Mixins

자바스크립트는 복사를 하지 않음으로 같은 동작으로 extend()라고 불리고있는 mixin을 만들어보자.

// vastly simplified `mixin(..)` example:
function mixin( sourceObj, targetObj ) {
	for (var key in sourceObj) {
		// only copy if not already present
		if (!(key in targetObj)) {
			targetObj[key] = sourceObj[key];
		}
	}

	return targetObj;
}

var Vehicle = {
	engines: 1,

	ignition: function() {
		console.log( "Turning on my engine." );
	},

	drive: function() {
		this.ignition();
		console.log( "Steering and moving forward!" );
	}
};

var Car = mixin( Vehicle, {
	wheels: 4,

	drive: function() {
		Vehicle.drive.call( this );
		console.log( "Rolling on all " + this.wheels + " wheels!" );
	}
} );

기술적으로 함수는 실제로 복사가 되지않고 참조가 복사된다.

"Polymorphism" Revisited

JavaScript에는 상대 다형성을 위한 기능이 없다. 따라서 Car와 Vehicle 모두 같은 이름의 함수를 가지고 있기 때문에 하나 또는 다른 호출을 구별하기 위해 절대 참조를 만들어야한다.

Parasitic Inheritance

이 방법은 어떤 면에서는 명시적이고 어떤 면에서는 암시적이다. Douglas Crockford에 의해 대중화됐다.

// "Traditional JS Class" `Vehicle`
function Vehicle() {
	this.engines = 1;
}
Vehicle.prototype.ignition = function() {
	console.log( "Turning on my engine." );
};
Vehicle.prototype.drive = function() {
	this.ignition();
	console.log( "Steering and moving forward!" );
};

// "Parasitic Class" `Car`
function Car() {
	// first, `car` is a `Vehicle`
	var car = new Vehicle();

	// now, let's modify our `car` to specialize it
	car.wheels = 4;

	// save a privileged reference to `Vehicle::drive()`
	var vehDrive = car.drive;

	// override `Vehicle::drive()`
	car.drive = function() {
		vehDrive.call( this );
		console.log( "Rolling on all " + this.wheels + " wheels!" );
	};

	return car;
}

var myCar = new Car();

myCar.drive();
// Turning on my engine.
// Steering and moving forward!
// Rolling on all 4 wheels!

Implicit Mixins

var Something = {
	cool: function() {
		this.greeting = "Hello World";
		this.count = this.count ? this.count + 1 : 1;
	}
};

Something.cool();
Something.greeting; // "Hello World"
Something.count; // 1

var Another = {
	cool: function() {
		// implicit mixin of `Something` to `Another`
		Something.cool.call( this );
	}
};

Another.cool();
Another.greeting; // "Hello World"
Another.count; // 1 (not shared state with `Something`

Review (TL;DR)

클라스는 디자인 패턴이다.

클라스는 복사를 의미한다.

전통적인 클래스가 인스턴스화되면 클래스에서 인스턴스로 동작의 복사본이 발생하고, 클래스가 상속되면 부모에서 자식으로의 동작 복사본도 발생한다.

다형성도 복사동작의 결과이다.

자바스크립트는 객체사이에서 자동적으로 복사본을 생성하지 않는다.