Chapter 6: Behavior Delegation - hochan222/Everything-in-JavaScript GitHub Wiki

5장에 대한 정리로서 Prototype 메커니즘은 다른 객체를 참조하는 하나의 객체에 존재하는 내부 링크이다. 일련의 객체간 연결은 프로토타입 체인을 형성한다.

Towards Delegation-Oriented Design

Class Theory

소프트웨어에서 모델링해야하는 유사한 작업[Task]( "XYZ", "ABC"등)이 여러 개 있다고 가정 해보자.
클래스를 사용하여 시나리오를 설계하는 방법은 다음과 같다.
Task와 같은 일반 상위(기본) 클래스를 정의하고 모든 "유사" 작업에 대한 공유 동작을 정의한다.
그런 다음 자식 클래스 XYZ 및 ABC를 정의한다.
두 클래스는 모두 Task에서 상속되고 각 클래스는 각각의 작업을 처리하는 특수 동작을 추가한다.
중요하게도 클래스 디자인 패턴은 상속을 최대한 활용하기 위해 메서드 재정의 (및 다형성)를 사용하도록 장려한다.
마지막으로 하나 이상의 XYZ 자식 클래스 복사본을 인스턴스화하고 해당 인스턴스를 사용하여 "XYZ"작업을 수행한다.

class Task {
	id;

	// constructor `Task()`
	Task(ID) { id = ID; }
	outputTask() { output( id ); }
}

class XYZ inherits Task {
	label;

	// constructor `XYZ()`
	XYZ(ID,Label) { super( ID ); label = Label; }
	outputTask() { super(); output( label ); }
}

class ABC inherits Task {
	// ...
}

인스턴스에는 일반 작업 정의 동작과 특정 XYZ 정의 동작의 복사본이 모두 있다.
생성 후에는 각 인스턴스가 의도 한 작업을 수행하는 데 필요한 모든 동작의 복사본을 가지고 있으므로 일반적으로 이러한 인스턴스와 만 상호 작용한다(클래스가 아니라).

Delegation Theory

먼저 Task라는 객체를 정의하고 다양한 작업이 사용할 수있는 유틸리티 메서드를 포함하는 구체적인 동작을 갖게된다.
그런 다음 각 작업 ( "XYZ", "ABC")에 대해 해당 작업 별 데이터 / 동작을 저장할 개체를 정의한다.
작업 별 개체를 작업 유틸리티 개체에 연결하여 필요할 때 위임 할 수 있다.
기본적으로 "XYZ"작업을 수행하려면 두 형제 / 동료 개체 (XYZ 및 작업)의 동작이 필요하다고 생각한다.
그러나 클래스 복사본을 통해 함께 구성 할 필요없이 별도의 개체에 보관할 수 있으며 필요할 때 XYZ 개체가 Task에 위임 할 수 있다.

var Task = {
	setID: function(ID) { this.id = ID; },
	outputID: function() { console.log( this.id ); }
};

// make `XYZ` delegate to `Task`
var XYZ = Object.create( Task );

XYZ.prepareTask = function(ID,Label) {
	this.setID( ID );
	this.label = Label;
};

XYZ.outputTaskDetails = function() {
	this.outputID();
	console.log( this.label );
};

// ABC = Object.create( Task );
// ABC ... = ...

이 코드에서 Task와 XYZ는 클래스 (또는 함수)가 아니라 객체 일뿐이다.
XYZ는 Object.create (..)를 통해 Task 객체에 대한 Prototype 대리자로 설정된다.
클래스 지향 (일명 OO-객체 지향)과 비교할 때이 코드 스타일을 "OLOO"(다른 객체에 연결된 객체)라고 부른다.
JavaScript에서 Prototype 메커니즘은 개체를 다른 개체에 연결한다.

Behavior Delegation: 객체 (XYZ)에서 찾을 수없는 경우 일부 객체 (XYZ)가 속성 또는 메서드 참조에 대한 위임 (태스크)을 제공하도록한다.

이것은 부모와 자식 클래스, 상속, 다형성 등의 개념과는 매우 다른 매우 강력한 디자인 패턴이다.
부모가 자식으로 흘러가는 상태에서 객체를 수직으로 구성하는 대신 객체를 나란히 있다고 생각할 수 있다.

Mutual Delegation (Disallowed)

둘 이상의 개체가 서로에게 (양방향으로) 위임되는 주기를 만들 수 없다.
B를 A에 연결 한 다음 A를 B에 연결하려고하면 오류가 발생한다.

엔진 구현자가 객체에서 속성을 조회 할 때마다 해당 가드 검사의 성능 적중을 필요로하는 것보다 설정 시간에 한 번 무한 순환 참조를 확인 (및 거부)하는 것이 더 성능이 좋다는 것을 관찰했기 때문에 허용되지 않는다.

Debugged

function Foo() {}

var a1 = new Foo();

a1; // Foo {}

크롬에서는 다음과 같이 나오는 반면 firefox에서는 Object {} 로 나온다.

Chrome은 본질적으로 "{}는 이름이 'Foo'인 함수로 구성된 빈 개체입니다."라고 말하고, 파이어 폭스는 "{}는 Object의 일반적인 구성의 빈 객체입니다"라고 말한다. 미묘한 차이점은 Chrome이 내부 속성으로 구성을 수행 한 실제 기능의 이름을 적극적으로 추적하는 반면 다른 브라우저는 해당 추가 정보를 추적하지 않는다.

function Foo() {}

var a1 = new Foo();

a1.constructor; // Foo(){}
a1.constructor.name; // "Foo"

그렇다면 크롬은 단순히 constructor.name을 추적하는가? 맞다, 아니다 둘다 정답이 될 수 있다.

function Foo() {}

var a1 = new Foo();

Foo.prototype.constructor = function Gotcha(){};

a1.constructor; // Gotcha(){}
a1.constructor.name; // "Gotcha"

a1; // Foo {}

a1.constructor.name을 합법적으로 다른 이름으로 변경해도 여전히 Foo이다.

OLOO-style로 다시보자.

var Foo = {};

var a1 = Object.create( Foo );

a1; // Object {}

Object.defineProperty( Foo, "constructor", {
	enumerable: false,
	value: function Gotcha(){}
});

a1; // Gotcha {}

여기서 Chrome 콘솔은 .constructor.name을 찾아서 사용했습니다. 실제로 이 책을 쓰는 동안이 정확한 동작은 Chrome에서 버그로 확인되었다.

Mental Models Compared

OO 스타일

function Foo(who) {
	this.me = who;
}
Foo.prototype.identify = function() {
	return "I am " + this.me;
};

function Bar(who) {
	Foo.call( this, who );
}
Bar.prototype = Object.create( Foo.prototype );

Bar.prototype.speak = function() {
	alert( "Hello, " + this.identify() + "." );
};

var b1 = new Bar( "b1" );
var b2 = new Bar( "b2" );

b1.speak();
b2.speak();

OLOO style

var Foo = {
	init: function(who) {
		this.me = who;
	},
	identify: function() {
		return "I am " + this.me;
	}
};

var Bar = Object.create( Foo );

Bar.speak = function() {
	alert( "Hello, " + this.identify() + "." );
};

var b1 = Object.create( Bar );
b1.init( "b1" );
var b2 = Object.create( Bar );
b2.init( "b2" );

b1.speak();
b2.speak();

Classes vs. Objects

실전이다. 먼저 프론트 엔드 웹 개발의 일반적인 시나리오 인 UI 위젯 (버튼, 드롭 다운 등) 생성을 살펴보자.

Widget "Classes"

// Parent class
function Widget(width,height) {
	this.width = width || 50;
	this.height = height || 50;
	this.$elem = null;
}

Widget.prototype.render = function($where){
	if (this.$elem) {
		this.$elem.css( {
			width: this.width + "px",
			height: this.height + "px"
		} ).appendTo( $where );
	}
};

// Child class
function Button(width,height,label) {
	// "super" constructor call
	Widget.call( this, width, height );
	this.label = label || "Default";

	this.$elem = $( "<button>" ).text( this.label );
}

// make `Button` "inherit" from `Widget`
Button.prototype = Object.create( Widget.prototype );

// override base "inherited" `render(..)`
Button.prototype.render = function($where) {
	// "super" call
	Widget.prototype.render.call( this, $where );
	this.$elem.click( this.onClick.bind( this ) );
};

Button.prototype.onClick = function(evt) {
	console.log( "Button '" + this.label + "' clicked!" );
};

$( document ).ready( function(){
	var $body = $( document.body );
	var btn1 = new Button( 125, 30, "Hello" );
	var btn2 = new Button( 150, 40, "World" );

	btn1.render( $body );
	btn2.render( $body );
} );

ES6 class sugar

class Widget {
	constructor(width,height) {
		this.width = width || 50;
		this.height = height || 50;
		this.$elem = null;
	}
	render($where){
		if (this.$elem) {
			this.$elem.css( {
				width: this.width + "px",
				height: this.height + "px"
			} ).appendTo( $where );
		}
	}
}

class Button extends Widget {
	constructor(width,height,label) {
		super( width, height );
		this.label = label || "Default";
		this.$elem = $( "<button>" ).text( this.label );
	}
	render($where) {
		super.render( $where );
		this.$elem.click( this.onClick.bind( this ) );
	}
	onClick(evt) {
		console.log( "Button '" + this.label + "' clicked!" );
	}
}

$( document ).ready( function(){
	var $body = $( document.body );
	var btn1 = new Button( 125, 30, "Hello" );
	var btn2 = new Button( 150, 40, "World" );

	btn1.render( $body );
	btn2.render( $body );
} );

Delegating Widget Objects

var Widget = {
	init: function(width,height){
		this.width = width || 50;
		this.height = height || 50;
		this.$elem = null;
	},
	insert: function($where){
		if (this.$elem) {
			this.$elem.css( {
				width: this.width + "px",
				height: this.height + "px"
			} ).appendTo( $where );
		}
	}
};

var Button = Object.create( Widget );

Button.setup = function(width,height,label){
	// delegated call
	this.init( width, height );
	this.label = label || "Default";

	this.$elem = $( "<button>" ).text( this.label );
};
Button.build = function($where) {
	// delegated call
	this.insert( $where );
	this.$elem.click( this.onClick.bind( this ) );
};
Button.onClick = function(evt) {
	console.log( "Button '" + this.label + "' clicked!" );
};

$( document ).ready( function(){
	var $body = $( document.body );

	var btn1 = Object.create( Button );
	btn1.setup( 125, 30, "Hello" );

	var btn2 = Object.create( Button );
	btn2.setup( 150, 40, "World" );

	btn1.build( $body );
	btn2.build( $body );
} );

OLOO 스타일의 접근 방식에서는 위젯을 부모로, 버튼을 자식으로 생각하지 않는다. 오히려 위젯은 객체 일 뿐이며 특정 유형의 위젯이 위임 할 수있는 일종의 유틸리티 컬렉션이며 Button은 독립형 객체이다.

OLOO는 생성과 초기화가 반드시 동일한 작업으로 통합되지 않는 분리 원칙을 더 잘 지원한다.

Simpler Design

De-class-ified

var LoginController = {
	errors: [],
	getUser: function() {
		return document.getElementById( "login_username" ).value;
	},
	getPassword: function() {
		return document.getElementById( "login_password" ).value;
	},
	validateEntry: function(user,pw) {
		user = user || this.getUser();
		pw = pw || this.getPassword();

		if (!(user && pw)) {
			return this.failure( "Please enter a username & password!" );
		}
		else if (pw.length < 5) {
			return this.failure( "Password must be 5+ characters!" );
		}

		// got here? validated!
		return true;
	},
	showDialog: function(title,msg) {
		// display success message to user in dialog
	},
	failure: function(err) {
		this.errors.push( err );
		this.showDialog( "Error", "Login invalid: " + err );
	}
};

OLOO 스타일 코드의 힘과 행동 위임 디자인 패턴의 힘은 우리를 동일한 기능을 갖지만 (상당히) 더 단순한 설계로 이끈다.

Nicer Syntax

ES6부터는 객체내에서 약식 메서드 선언이 가능하다.

var LoginController = {
	errors: [],
	getUser() { // Look ma, no `function`!
		// ...
	},
	getPassword() {
		// ...
	}
	// ...
};

Unlexical

var Foo = {
	bar: function(x) {
		if (x < 10) {
			return Foo.bar( x * 2 );
		}
		return x;
	},
	baz: function baz(x) {
		if (x < 10) {
			return baz( x * 2 );
		}
		return x;
	}
};

익명 함수를 만들지말자.

Introspection

var Foo = { /* .. */ };

var Bar = Object.create( Foo );
Bar...

var b1 = Object.create( Bar );

// relating `Foo` and `Bar` to each other
Foo.isPrototypeOf( Bar ); // true
Object.getPrototypeOf( Bar ) === Foo; // true

// relating `b1` to both `Foo` and `Bar`
Foo.isPrototypeOf( b1 ); // true
Bar.isPrototypeOf( b1 ); // true
Object.getPrototypeOf( b1 ) === Bar; // true

Review (TL;DR)

클래스와 상속은 소프트웨어 아키텍처에서 선택하거나 선택하지 않을 수있는 디자인 패턴이다. 우리는 실제로 매우 강력한 패턴에 대해 덜 일반적으로 언급되는 또 다른 방법 인 행동 위임이 있다.

동작 위임은 개체를 부모 및 자식 클래스 관계가 아닌 서로간에 위임하는 서로의 피어로 제안한다. JavaScript의 Prototype 메커니즘은 매우 설계된 특성상 동작 위임 메커니즘이다. OLOO (objects-linked-to-other-objects)는 클래스의 추상화없이 직접 객체를 생성하고 관련시키는 코드 스타일이다. OLOO는 Prototype 기반 행동 위임을 아주 자연스럽게 구현할 수 있다.