JavaScript에서 생성되는 모든 함수에는 자바스크립트 엔진이 자동으로 prototype 속성을 추가합니다. 이 프로토타입 속성은 하나의 객체(object)이며, 기본적으로 constructor 속성을 포함하고 있습니다.
함수 프로토타입에 접근하는 방법
함수의 프로토타입은 다음과 같은 방식으로 접근할 수 있습니다.
functionName.prototype
함수 프로토타입의 역할
함수 생성자(function constructor)를 사용해 객체를 만들 때, 이 prototype 속성을 활용하면 해당 생성자로부터 생성된 여러 객체들이 메서드나 속성을 공유하도록 만들 수 있습니다. 덕분에 각 객체마다 동일한 메서드를 복제하지 않아도 되어 메모리를 효율적으로 사용할 수 있습니다.
다음은 JavaScript에서 함수 프로토타입을 사용하는 예제 코드입니다.
예제 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 20px;
font-weight: 500;
color: blueviolet;
}
</style>
</head>
<body>
<h1>JavaScript 함수 프로토타입</h1>
<div class="result"></div>
<br />
<button class="Btn">클릭하세요</button>
<h3>위 버튼을 클릭하면 person1과 person2 객체의 welcome 메서드가 호출됩니다</h3>
<script>
let resEle = document.querySelector(".result");
let BtnEle = document.querySelector(".Btn");
function personConstructor(fName, lName) {
this.fName = fName;
this.lName = lName;
}
personConstructor.prototype.welcome = function () {
return "Welcome " + this.fName + " " + this.lName;
};
let person1 = new personConstructor("Rohan", "Sharma");
let person2 = new personConstructor("Shawn", "Smith");
BtnEle.addEventListener("click", () => {
resEle.innerHTML = "person1.welcome() = " + person1.welcome() + "<br>";
resEle.innerHTML += "person2.welcome() = " + person2.welcome() + "<br>";
});
</script>
</body>
</html>실행 결과
위 코드를 실행하면 화면에 '클릭하세요' 버튼이 표시됩니다.
버튼을 클릭하면 다음과 같이 두 객체의 결과가 출력됩니다.
- person1.welcome() → Welcome Rohan Sharma
- person2.welcome() → Welcome Shawn Smith
핵심 정리
- JavaScript의 모든 함수는 엔진에 의해
prototype속성을 기본으로 가집니다. - prototype은
constructor속성을 포함하는 객체입니다. - 생성자 함수로 만든 객체들은 프로토타입에 정의된 메서드와 속성을 공유합니다.
- 프로토타입에 메서드를 정의하면 인스턴스마다 중복 생성되지 않아 메모리 사용이 효율적입니다.