✨ 함수의 prototype
자바스크립트는 Funciton( )인스턴스에 자동으로 prototype이라는 속성을 만든다.
즉, prototype 속성은 new 키워드와 생성자 함수를 같이 사용해서 만든 객체에 연결된다.
때문에, 만들어진 인스턴드들이 생성자 함수의 prototype 속성을 가지고, 메소드와 속성을 공유하고 상속받아 참조하는 형식으로 일어난다.
✅ 함수는 모두 prototype 객체를 포함
function myFruit(){}
myFruit.prototype;단순히 함수를 만들어주고, prototype을 참조한 결과이다.
여기서 myFruit.prototype.constructor는 myFruit과 같다.
✅생성자 함수를 통해 만든 인스턴스는 생성자 함수의 prototype 속성과 연결
function myFruit(){ }
const orange = new myFruit();생성자 함수를 통해 만든 myFruit의 인스턴스를 orange에 할당시켰기에, orange의 생성자는 myFruit과 동일하고, orange는 myFruit의 자식으로 생성됨을 prototype을 통해 확인하였다.
보통 생성자를 사용할 때는 this를 통해 원하는 값으로 객체를 생성할 수 있다.
function myFruit(name){
this.name = name;
}
const orange = new myFruit("orange");orange의 생성자로 myFruit의 생성자가 참조되었고, name으로 "orange"가 전달되었다.
이를 활용하여 새로운 인스턴스를 생성할 수 도 있다.
const apple = new orange.constructor("apple");
✅ prototype 속성은 Object() 객체
prototype은 Function()인스턴스를 만들 때, 자바스크립트가 인스턴스에 부여하는 이름이 prototype이고 기본은 빈 객체인 속성이다.
👇 예제 코드를 살펴보자.
function myFruit(){ }
myFruit.prototype;[[Prototype]]이 Object를 나타내고 있다.
이를 의도적으로 빈 객체로 할당해보자.
사실 prototype 속성의 값으로는 어떤 복합 객체(예: 배열등..)든 사용할 수 있다. prototype 에 원시값을 설정하려 하면 자바스크립트에서는 해당 코드를 무시하게 된다.
📚 학습할 때, 참고한 자료 📚
