TIL59. 프로토타입(1)개념
코어자바스크립트 chapter6의 내용 '프로토 타입'의 개념에 대해 알아보자.
prototype
프로토타입 = 자바스크립트
자바스크립트는 프로토타입기반 언어라고 불릴만큼 '프로토타입'은 js에서 핵심개념이다. 클래스기반언어에서는 '상속'을 사용하지만, 프로토타입기반언어에서는 어떤 객체를 원형(prototype)
으로 삼고 이를 복제함으로써 상속과 비슷한 효과를 얻는다.
var instance = new Constructor();
위의 코드를 이해하고, 그림을 보며 문장을 만들 수 있다면 프로토타입의 이해는 끝난 것이다. ^^
=> new
키워드(연산자)로 constructor
를 호출하면, instance
가 만들어지는데, 이 instance의 생략 가능한 프로퍼티인__proto__
는 Constructor의 prototype
을 참조한다.
위 문장을 이해하기 위해서 위에서 언급한 각각의 단어들에 대해서 알아보도록 해보자.
Instance
인스턴스
라는 용어는 "객체(object)"와 유사하다.
의미상으로 "객체"는 좀더 일반적인 의미인 반면에 "인스턴스"라고 표현하면 "현재 생성된 바로 그 객체"라는 인스턴트한 뉘앙스로 좀 더 짙게 표현할 수 있다.
또는 어떤 클래스의 속성을 지니는 실존하는 개체를 일컬어 말한다.
Constructor(생성자)
1. 생성자 없이 만든 객체(노가다)
let cho = {
name:'hye-mi',
first:10,
second:20,
sum:function(){
return this.first+this.second;
}
}
let choi = {
name:'ha-neol',
first:10,
second:15,
sum:function(){
return this.first+this.second;
}
}
let kim = {
name:'bo-hyen',
first:30,
second:10,
sum:function(){
return this.first+this.second;
}
}
console.log("cho.sum()", cho.sum());
console.log("choi.sum()", choi.sum());
console.log("kim.sum()", kim.sum());
=> 객체가 동작하는 방법을 바꾼다면(ex.객체에 third라는 속성을 추가해야 하는 경우) 해당하는 속성들을 일일히 다 바꿔줘야 하는 문제점이 발생한다.
2. 생성자로 만든 객체
function Person(name, first, second, third){
this.name = name;
this.first = first;
this.second = second;
this.third = third;
this.sum = function(){
return this.first + this.second + this.third;
}
}
let cho = new Person('hye-mi',10, 20, 30);
console.log(cho);
// Person {
name: 'hye-mi',
first: 10,
second: 20,
third: 30,
sum: [Function]
}
new연산자를 붙여주어 새로운 인스턴스가 만들어졌다는 것을 알려준다. new를 붙이면, Person함수는 더이상 기존의 일반적인 함수가 아니라, 객체를 생성하는 생성자함수가 된다. (new가 있다면 = 생생자 함수)
prototype의 필요한 이유
위의 코드에서 cho라는 객체를 생성할 때, Person이라는 함수를 생성자로서 동작시켰다. new 키워드로 인스턴스 만들 때 마다 sum함수를 정의해주어 메모리 낭비를 하게된다.
함수를 분리해서 prototype을 사용하게되면, Person이라는 생성자함수가 실행될때마다 나오는 것이 아니라 한번만 실행하게 된다.
function Person(name, first, second, third){
this.name=name;
this.first=first;
this.second=second;
this.third=third;
}
Person.prototype.sum = function(){
return 'prototype : '+ (this.first+this.second+this.third);
}
let cho = new Person('hye-mi', 10, 20, 30);
let choi = new Person('choi', 10, 10, 50);
console.log("cho.sum()", cho.sum());
console.log("choi.sum()", choi.sum());
Prototype과 Proto
proto
프로토를 통해 인스턴스와 객체 간의 상속관계를 자유롭게 설정할 수 있다.
let superObj = {superVal:'super'}
let subObj = {subVal:'sub'}
subObj.__proto__ = superObj;
console.log('subObj.subVal:', subObj.subVal);
//subObj의 'superVal'값을 바꾸는 경우
subObj.superVal = 'sub';
console.log('superObj.superVal:',);
⇒ superObj의 객체의 값을 바꿨을 뿐, __proto__가 가르키는 객체를 바꾼 것이 아니다. 즉, proto를 바꾸는 것이 아니다.
Prototype과 proto
- 생성자 함수로 만든 객체(인스턴스)에서 __proto__는 생성자 함수의 prototype을 참조한다.
- proto 프로퍼티는 생략이 가능하여, 생성자함수의 prototype에 어떤 메서드나 프로퍼티가 있다면 인스턴스에도 마치 자기 것처럼 해당 메서드나 프로퍼티에 접근할 수 있다.
Author And Source
이 문제에 관하여(TIL59. 프로토타입(1)개념), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jo_love/TIL58.-프로토타입1저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)