OOP , prototype

OOP

 

OOP 란 ?

OOP의 기본 컨셉은 프로그램 내에서 표현하고자 하는 실 세계(real world)의 일들을 객체를 사용해서 모델링 하고, 
객체를 사용하지 않으면 불가능 혹은 무지 어려웠을 일들을 쉽게 처리하는 방법을 제공한다는 것입니다. -MDN-

생성자함수 란 ?

 

이 함수는 함수가 가질 것 같은 모든 특징을 가지고 있지만, 아무것도 리턴하지 않고 객체를 만들지도 않습니다.

생성자 함수는 단순히 프로퍼티와 메소드를 정의합니다. 또 이를 정의할 때 this 키워드가 사용합니다.

이것은 객체 인스턴스가 생성될 때마다, 객체의 프로퍼티가 생성자 함수 호출에서 전달된 인자 값과 같다는 것을

의미합니다. new 연산자를 붙여서 호출하면, 해당 함수는 생성자 함수로 동작합니다.

함수가 일반적인 함수 인지 객체를 만들기 위한 목적의 생성자 함수 인지 구분하기 위해,

생성자 함수의 첫 문자는 대문자로 표기하는 것이 관례입니다.

function Person(name) { 
	this.name = name; 
	this.greeting = function() { 
		alert('Hi! I am ' + this.name + '.'); 
	}; 
} 

var person1 = new Person('김코딩'); // person1 --> Person {name: "김코딩", greeting: ƒ} 
var person2 = new Person('박코딩'); // person2 --> Person {name: "박코딩", greeting: ƒ}

( 생성될 때 부여받은 자신의 name 값을 사용합니다. 이는 this를 사용하는 매우 중요한 이유 중 하나입니다. )

 

여기서 보이는 문제는 생성자 함수를 호출할 때마다 매번 greeting() 함수를 다시 정의하는 것이 보입니다.

이를 피하기 위해, 우리는 prototype에 함수를 정의합니다.

function Person(name) { 
	this.name = name; 
}; 

Person.prototype.greeting = function() { 
	alert('Hi! I am ' + this.name + '.'); 
}; 

var person3 = new Person('최코딩'); 
var person4 = new Person('구코딩');

 

프로토타입 객체는 모든 인스턴스에서 공유하기 때문에 정의하는 즉시 별도의 갱신 과정 없이 접근이 가능합니다.

 

참고자료

https://poiemaweb.com/js-object-oriented-programming

Object-Oriented Programming | PoiemaWeb

https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Object_prototypes

Object prototypes

 

---

Prototype

JavaScript는 함수를 기반으로 한 언어입니다. 아래를 보면 객체의 선언은 사실상 함수를 통해서 하게 됩니다.

 

new 생성자 함수는 객체를 뱉어내기 때문에 obj 뿐만 아니라 arr과 func 모두 객체 라는 것을 알아야 합니다.

 

var obj = {}; // == var obj = new Object(); 
var arr = []; // == var arr = new Array(); 
var func = function(a,b){return a + b} // == var func = new Function('a', 'b', 'return a + b');

JavaScript는 흔히 프로토타입 기반 언어(prototype-based language) 라 불립니다.

 

객체는 메소드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체(prototype object) 를 가집니다.

 

프로토타입 객체도 또 다시 상위 프로토타입 객체로부터 메소드와 속성을 상속 받을 수도 있고 그 상위 프로토타입

 

객체도 마찬가지입니다. 이를 프로토타입 체인(prototype chain) 이라 부르며 다른 객체에 정의된 메소드와

 

속성을 한 객체에서 사용할 수 있도록 하는 근간입니다.

 

즉 상속되는 속성과 메소드들은 각 객체가 아니라 객체의 생성자의 prototype 속성에 정의되어 있습니다.

 

인스턴스 생성 , 프로토타입 체인

 

1.해당 함수에 Constructor(생성자) 자격 부여

 

Constructor 자격을 부여 받아야만 new를 통해 객체를 만들 수 있습니다.

이것이 오로지 함수만 new 키워드 를 사용할 수 있는 이유입니다.

 

2.해당 함수의 Prototype Object 생성 및 연결

 

함수를 정의하면 함수만 생성되는 것이 아니라 Prototype Object도 같이 생성됩니다.

그리고 생성된 함수는 위에서 생성자 함수를 통해 생성된 객체로 prototype 이라는 속성을 가지게 되는데

이는 Prototype Object 를 가리킵니다. Prototype Object 는 일반적인 객체와 같으며 디폴트 속성으로

constructor 와 proto 를 가지고 있습니다.

 

 

constructor 는 생성자 함수 자체를 가리키고 있습니다.

proto 는 객체가 생성될 때 조상이었던 함수의 Prototype Object 를 가리킵니다.

 

 

참고자료

https://medium.com/@bluesh55/javascript-prototype-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-f8e67c286b67

[Javascript ] 프로토타입 이해하기

https://medium.com/@han7096/javascript-core-3-%ED%94%84%EB%A1%9C%ED%86%A0%ED%83%80%EC%9E%85-prototype-c2da4c24820e

JAVASCRIPT CORE #3 — 프로토타입(Prototype)과 상속(Inheritance)

https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Object_prototypes

Object prototypes

https://medium.com/dailyjs/instantiation-patterns-in-javascript-8fdcf69e8f9b

Instantiation Patterns in JavaScript