상속 패턴

const food = {
	init: function(type) {
    	this.type = type
    },
    eat: function() {
    	console.log('you ate the' + this.type)
    }
}


/ food를 prototype으로 갖는 새로운 Object 생성 

const waffle = Object.create(food)
const carrot = Object.create(food)

food.eat = function() {
	console.log('you totally ate the ' + this.type.toUpperCase())
}

waffle.init('waffle')
waffle.eat()

carrot.init('carrot')
carrot.eat()

/ 메소드 호출시 waffle에 존재하는게 아님
/ (해당 object의 프로퍼티가 없을경우) 
/ prototype의 Object를 참고해서 메소드가 존재한다면 그것을 사용 
/ 이것이 waffle과 carrot의 prototye이 food 라는것! 


프로토타입 확인

console.log(food.isPrototypeof(waffle)) // true
console.log(food.isPrototypeof(123323)) // false
console.log(food.isPrototypeof(carrot)) // true

 

const food = {
	init: function(type) {
    	this.type = type
    },
    eat: function() {
    	console.log('you ate the' + this.type)
    }
}


/ food를 prototype으로 갖는 새로운 Object 생성 

const waffle = Object.create(food)
const carrot = Object.create(food)

//waffle.init('waffle')
waffle.eat() // you ate the undefined
food.type = 'fdafasf'
waffle.eat() // you ate the fdafasf

/ init 함수가 실행되지 않아 type이 존재하지않지만
/ food prototype을 참고해 fdafasf 리턴

 

1. Functional

var Car = function() {
    var someInstance = {};
    someInstance.position = 0;
    someInstance.move = function() {
    	this.position += 1;
    }
    return someInstance;
};

var car1 = Car();
var car2 = Car();
car1.move();

 

2. Functional Shared

var extend = function(to, from) {
    for(var key in from) {
     to[key] = from[key];
    }
};

var someMethods = {};
someMethod.move = function() {
	this.position += 1;
};

var Car = function(position) {
	var someInsatance = {
    	position: position,
        };
    extend(someInstance, someMethods);
    return someInstance;
    };
    
var car1 = Car(5);
var car2 = Car(10);

 

3. Prototypal

var someMethods = {};
someMethods.move = function(){
	this.position += 1;
};

var Car = function(position) {
    var someInstance = Object.create(someMethod);
    someInstance.position = position;
    return someInstance;
};

var car1 = Car(5);
var car2 = Car(10);

 

4. Pseudoclassical

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

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

var car1 = new Car(5);
var car2 = new Car(10);

 

상속패턴 타입 4

 

중복 로직 & 캡슐화 실패

var AnswerPrototype = {
	get: function fn1() {
    	return this.val;
    }
 };
 
 var lifeAnswer = Object.create(AnswerPrototype);
 lifeAnswer.val = 42; // duplicate logic & violate encapsulation
 lifeAnswer.get();
 
 var dessertAnswer = Object.create(AnswerPrototype);
 dessertAnswer.val = 3.14159; // duplicate logic & violate encapsulation
 dessertAnswer.get();
 
 var FirmAnswerPrototype = Object.create(AnswerPrototype);
 FirmAnswerPrototype.get = function fn2() {
 	return AnswerPrototype.get.call(this) + '!!';
}

var luckyAnswer = Object.create(FirmAnswerPrototype);
luckyAnswer.val = 7; // duplicate logic & violate encapsulation
luckyAnswer.get(); // '7!!'

var magicAnswer = Object.create(FirmAnswerPrototype);
magicAnswer.val = 3; // duplicate logic & violate encapsulation
magicAnswer.get(); // '3!!'

 

대안 1. Use Constructor

var AnswerPrototype = {
    constructor: function fn0(value) {
    	this._val = value;
    }, 
    get: function fn1() {
    	return this._val;
        }
};

var lifeAnswer = Object.create(AnswerPrototype);
lifeAnswer.constructor(42);
lifeAnswer.get(); // 42

var dessertAnswer = Object.create(AnswerPrototype);
dessertAnswer.constructor(3.14159);
dessertAnswer.get(); // 3.14159

var FirmAnswerPrototype = Object.create(AnswerPrototype);
FirmAnswerPrototype.get = function fn2() {
	return AnswerPrototype.get.call(this) + '!!';
};

var luckyAnswer = Object.create(FirmAnswerPrototype);
luckyAnswer.constructor(7);
luckyAnswer.get(); // '7!!'

var magicAnswer = Object.create(FirmAnswerPrototype);
magicAnswer.constructor(3);

/ magicAnswer가 constructor property 찾기시작 
/ magicAnswer에서 찾을수 없음
/ prototype 탐색(FirmAnswerPrototype)
/ 다시 탐색(AnswerPrototype)
/ constructor 찾음
/ run fn0 > this._val = value

 

대안 2. prototypal model

var AnswerPrototype = { // constructor > 첫글자를 대문자로
	constructor: function fn0(value) {
    	this._val = value;
    },
    get: function fn1() {
    	return this._val;
    }
};

var lifeAnswer = Object.create(AnswerPrototype);
lifeAnswer.constructor(42);
lifeAnswer.get(); // 42

var dessertAnswer = Object.create(AnswerPrototype);
dessertAnswer.constructor(3.14159);
dessertAnswer.get(); // 3.14159

 

대안 3. classical model(recommended)

function Answer(value) {
	this._val = value;
}

Answer.prototype.get = function fn1(){
	return this._val;
};

var lifeAnswer = new Answer(42);
lifeAnswer.get(); // 42

var dessertAnswer = new Answer(3.14159);
dessertAnswer.get(); // 3.14159

function FirmAnswer(value) {
	Answer.call(this, value);
}

FirmAnswer.prototype = Object.create(Answer.prototype)
FirmAnswer.prototype.constructor = FirmAnswer;
FirmAnswer.prototype.get = function fn2() {
	return Answer.prototype.get.call(this) + '!!';
};

var luckyAnswer = new FirmAnswer(7);
luckyAnswer.get(); // '7!!'

var magicAnswer = new FirmAnswer(3);
magicAnswer.get(); // '3!!'

 

Prototypal vs Classical

 

Classical vs ES6