[javascript] function prototype

공부하면서 정리한 내용입니다
참고한 내용은 맨 아래의 링크를 확인해주세요

---

Javascript는 클래스라는 개념이 없었다. (ES6버전부터 등장)

그래서 기존의 객체를 복사하여 새로운 객체를 생성하는 프로토타입 기반의 언어

함수와 객체의 내부구조

Person 함수의 prototype속성 ↔️  Person prototype 객체(원형)의 constructor속성

각 속성은 함수와 객체를 참조하는 내부구조를 갖는다.

function Person(){}

let joon = new Person();
let jisoo = new Person();

▼new를 적용하지 않을 경우

function A(){}

let a = new A();
let b = A();

console.log(a); // A{} prototype
console.log(b); // undefined

joon객체의 __proto__속성과 jisoo객체의 __proto__속성은 원형을 참조한다. (proto : 비표준)

Person.prototype.getType = function (){  
    return "인간"; 
};

console.log(joon.getType());   // 인간  
console.log(jisoo.getType());  // 인간

▲ 원형 객체를 참조하는 새로운 객체들도 원형에 추가된 멤버를 사용 할 수 있다.

// 새로운 객체에서 멤버변경
joon.new = function(){
		return "동물";
}
console.log(joon.new());   // 동물  
console.log(jisoo.new());  // undefined

// 원형 객체에서 멤버변경
Person.prototype.new = function(){
		return "동물";
}
console.log(joon.new());   // 동물  
console.log(jisoo.new());  // 동물

▲ 추가, 수정, 삭제는 원형의 prototype 속성을 통해 접근해야 한다.

---

Reference

1) 프로토타입의 이해

JavaScript : 프로토타입(prototype) 이해