ES6 javascript 객체 : 프로토타입(prototype), __proto__

javascript는 프로토타입 기반 언어이다.->이를 기반으로 확장과 재사용성을 높인다.(like 클래스)
프로토 타입의 사전적 의미 = '원형'
객체의 프로토타입(원형)을 가지고 새로운 객체를 생성해가는 프로그래밍 방식

 

생성된 객체는 자기자신의 프로토타입을 갖는다. -> 자기 자신이 만들어지게 된 원형을 안다.
지금은 javascript에서 클래스를 지원하기 시작했지만,

원래 자바스크립트는 프로토타입 기반의 언어로 객체의 확장과 재사용, 상속을 구현했다.

const animal={ name:'tiger' };
console.log(animal.name); //tiger

animal.birthday='20220101';
console.log(animal.birthday); //20220101
		
//속성이 있는지 없는지 체크하는 hasOwnProperty()메서드 사용 - 'hasOwnProperty()'는 Object(최상위)객체의 메서드
console.log(animal.hasOwnProperty('birthday')); //true
console.log(animal.hasOwnProperty('country'));	//false

console.log(animal)
/*
{name: 'tiger', birthday: '20220101'}
birthday: "20220101"
name: "tiger"
[[Prototype]]: Object
*/

// 빈 객체도 프로토객체(Object)를 가지고 있다.
const aaa={}
console.log(aaa)
/*
{} 
[[Prototype]]: Object
*/

// hasOwnProperty를 animal() 객체에 정의하면, 부모로 올라가지 않고 자기자신의 메서드로서 사용
const animal={
    hasOwnProperty:function(){
        console.log("호랑이띠")
    }
}

animal.hasOwnProperty(); //호랑이띠

 

 

자바스크립트 함수의 내부와 객체간의 관계

 

1. 함수가 만들어지고 수행이 되어지면, 내부에서는 함수 자신과 같은 이름의 객체가 생성

( Fruit 함수 / Fruit 프로토타입 객체 )

-> 프로토타입에 메서드를 추가, 물론 함수에도 추가할 수 있으나 메모리 문제로 프로토타입에 추가

2. Fruit 함수 멤버로 prototype 속성이 생성

- 다른 곳에 생성된 같은 함수 이름의 animal 프로토타입 객체를 가리킴.(참조)

Fruit 함수	Fruit 프로토타입 객체
+prototype --> Fruit 프로토타입 객체(참조)	+ constructor --> Fruit 함수(참조) + grow()

이런 상황일때 "Fruit 프로토타입 객체"는

생성자 함수와 new 연산자를 통해서 만들어내는 모든 객체의 원형이 되는 객체이다. 

function Fruit(){}
let apple=new Fruit();
let banana= new Fruit();

console.log(apple);
console.log(banana);

• 이렇게 new 연산자와 생성자 함수를 이용하여 객체 생성시 각 객체에는--> __proto__속성이 자동으로 생성
• 이 속성(__proto__)은 객체가 만들어질 수 있도록 해 준 원형을 가리킴.--> "Fruit 프로토타입 객체"를 숨은 링크로 가리킨다(참조) 

 

 

 

"Fruit 프로토타입 객체"는 apple, banana와 같은 객체들의 원형이 되는 객체.

--> apple, banana와 같은 객체들은 "Fruit 프로토타입 객체"에 접근이 가능하고,

"Fruit 프로토타입 객체"에 멤버 한 개를 추가하면, 추가된 멤버를 공유하여 사용할 수 있다

//"프로토타입 객체"에 멤버 추가하기
Fruit.prototype.Grow=function(){
    return "성장한다";
}

console.log(apple.Grow());	//성장한다.
console.log(banana.Grow());	//성장한다.

부모(원형)에 있는 Grow() 메서드를 apple, banana 객체 내에서 재정의하면-> 이게 적용된다.

//apple 객체내에 Grow() 메서드 추가
apple.Grow=function(){
    return "사과가 성장한다"
}

console.log(apple.Grow());	//사과가 성장한다.
console.log(banana.Grow());	//성장한다.

//속성 추가
apple.hasRed=true
console.log(apple.hasRed)	//true
console.log(banana.hasRed)	//undefined

멤버를 추가, 수정, 삭제 -->prototype 속성을 통해서 적용
멤버를 읽는 것 --> 객체명 or 함수의 prototype 속성을 통해서 접근이 가능

console.log(banana.Grow());		//성장한다.
console.log(Fruit.prototype.Grow()); //성장한다.

 

 

객체 생성시 생성자 안에서 메서드를 정의하면, 객체를 생성할때마다 메서드도 새로 생성됨 -> 메모리 낭비

그러므로 프로토타입 객체에 메서드를 선언하는게 좋음.

function Add(x,y){
    this.x=x;
    this.y=y;
    this.plus=()=>{
        return this.x+this.y;
    }
}

let add1=new Add(100,20);
console.log(add1.plus()); //120
console.log(add1) // Add {x: 100, y: 20, plus: ƒ}

let add2=new Add(200,30);
let add3=new Add(300,40);
console.log(add2); // Add {x: 200, y: 30, plus: ƒ}
console.log(add3); // Add {x: 300, y: 40, plus: ƒ}

function Add2(x,y){
    this.x=x;
    this.y=y;
}

Add2.prototype.plus=function(){
    return this.x+this.y;
}

let newadd1=new Add2(100,20);
let newadd2=new Add2(200,30);

console.log(newadd1); // Add2 {x: 100, y: 20} - plus 메서드가 새로 생성되지 않음
console.log(newadd2); // Add2 {x: 200, y: 30}
console.log(newadd1.plus()); // 120
console.log(newadd2.plus()); // 230

 

 

자바스크립트는 객체 지향 언어로 프로토타입 상속에 기반을 둔 OOP언어이다. 최근에야 클래스 문법이 지원되기 시작했다.

 

상속의 필요성 - 1. 재사용성 2. 확장성

 

프로토타입 체인 = '__proto__' : 원형(부모)를 가리킴.

자식 객체가 __proto__가 가리키는 부모객체의 멤버(속성, 메서드)를 사용할 수 있다.

__proto__속성이 가리키는 것을 바꿀 수 있는가? = 원형(부모)를 바꿀 수 있는가? YES

let obj1={
    name:'주우재',
    age : 36,
    sayHi(){
        console.log("hi~ " + this.name);
    }
}

let obj2={
    name:"윤보미"
}

console.log(obj2) //{name: '윤보미'} Prototype은 Object(최상위)객체

obj2.__proto__=obj1; // 원형(부모)바꾸기
console.log(obj2); // {name: '윤보미'} Prototype은 Object(obj1)객체 - 아래 이미지 참고

 

빈 객체를 생성한 후에 __proto__속성에 원하는 객체(부모, 원형이 될)를 할당

let obj3={}; //현재 obj3의 원형(부모)는 Object(최상위)
console.log(obj3); // 우측 이미지 참고

obj3.__proto__=obj2;
console.log(obj3.hasOwnProperty()); // false
//최상위 Object를 프로토타입 체인으로 사용할 수 있다.

 

javascript는 "프로토타입 기반의 객체지향언어"

1. 자신에게 없는 특성(속성, 메서드)을 __proto__가 가리키는 원형(부모)에게 가져온다.
2. 이때, 맨 하위 자식 객체에서부터 순차적으로 연결되어있는 원형을 찾아간다 ="프로토타입 체인"
3. 프로토타입 체인을 사용해서 객체의 특성을 전파 ="프로토타입 상속"

console.log(obj3.name); // 윤보미
console.log(obj3.age); // 36
obj3.sayHi(); //hi~ 윤보미

 

객체의 프로토타입을 출력하는 방법은 2가지가 있다.

'__proto__' vs ' Object.getPrototypeOf() ' 

둘 다 왠만하면 똑같지만, 간혹 '__proto__' 는 지원하지 않는 브라우저가 존재한다고 한다.

 

function A(){}
let obj=new A();

console.log(obj.__proto__); // {constructor: ƒ}
console.log(obj)
console.log(Object.getPrototypeOf(obj)); //{constructor: ƒ}



function B(){}
let obj2=new B();

console.log(obj2.__proto__===Object.getPrototypeOf(obj2)) //true

 

생성자 함수와 내부에서 처리되는 동작들

function Add(a,b){
    this.a=a;
    this.b=b;
}

Add.prototype.plus=function(){
    return this.a+this.b
}

const newobj = {}; // 현재 proto는 Object(최상위)
newobj.__proto__= Add.prototype;   //newobj의 proto를 Add의 프로토타입 객체로 바꿈.
console.log(newobj) // Add{}

Add.apply(newobj, [111,222]) //인자값들을 하나로 묶어서 적용
console.log(newobj) // Add {a: 111, b: 222}
console.log(newobj.plus()); // 333

function Animal(name, age){
    this.name=name;   
    this.age=age;
}
Animal.prototype.aaa=function(){
    console.log('aaa');
}

function Animal2(name, age){
    this.name=name;   
    this.age=age;
}
Animal2.prototype.bbb=function(){
    console.log('bbb');
}

let obj1=new Animal('tiger',20);
obj1.aaa();	// aaa

obj1.__proto__=Animal2.prototype;
obj1.bbb(); // bbb

인스턴스가 어떤 생성자 함수로 생성된 것인지 찾기!

1. 프로토 타입 객체를 찾고, 2. 그 프로토타입 객체 안의 'constructor'값을 확인

function A(){}
const testObj=new A();

console.log(testObj.constructor); // ƒ A(){}
console.log(A.prototype.__proto__)  // Object(최상위)
console.log(A.prototype) // constructor: ƒ A()

testObj 인스턴스가 A로 생성된 것인지 판별 - instanceof 연산자, isPrototypeOf 연산자

console.log(testObj instanceof A) //true

 

 

 

 

연습문제

const housing={
    toilet:1,
    turnon() {
		console.log( "turn on.." );
	}
}

const apt = {
	color: "red",
	rooms: 4
};

const villa = {
	color: "black",
	rooms: 3
};

const oneroom = {
	color: "blue",
	rooms: 1
};

apt.__proto__=housing
villa.__proto__=housing
oneroom.__proto__=housing 

console.log(apt)
console.log(villa)
console.log(oneroom)

const ipark={
    name:'아이파크',
    rooms:5
}
ipark.__proto__=apt

console.log(ipark.name); //아이파크
console.log(ipark.rooms); //5
console.log(ipark.color); //red
console.log(ipark.toilet); //1
ipark.turnon(); // turn on..

앞선 예제를 생성자 함수와 new연산자를 사용하는 예제로 작성해보자!

const Housing=function(name, color, rooms){
    this.name=name;
    this.color=color;
    this.rooms=rooms;
}

Housing.prototype.toilet=1;
Housing.prototype.turnon=function(){
    console.log("turn on..")
}

const apt=new Housing('apt', 'red','4')
console.log(apt.name); //apt
console.log(apt.color); //red
console.log(apt.rooms); //4
console.log(apt.toilet); //1
apt.turnon(); //turn on..

const oneroom = new Housing('oneroom','white','1')
console.log(oneroom.name) //oneroom
console.log(oneroom.color) //white
console.log(oneroom.rooms) //1
console.log(oneroom.toilet) //1
oneroom.turnon(); //turn on..


const ipark=new Housing ('아이파크','blue','5');
console.log(ipark.name) //아이파크
console.log(ipark.color) //blue
console.log(ipark.rooms) //5
console.log(ipark.toilet) //1
ipark.turnon(); 

ipark.name="레미안"
console.log(ipark.name); //레미안
// 외부에서 손쉽게 수정이 가능함. -> 수정이 안되게끔 하려면..?!