Opentutorials.org

prototype

2019-04-08 00:14:19

수업소개

JavaScript의 prototype이 필요한 이유와 prototype을 통해서 코드의 재사용성과 성능을 향상시키는 방법을 알려드립니다.

강의1

prototype이 필요한 이유를 소개합니다.

강의2

prototype을 이용해서 코드의 재사용성을 높이고, 성능을 향상시키는 방법을 소개합니다.

코드

prototype.js (변경사항)

function Person(name, first, second, third){
    this.name=name;
    this.first=first;
    this.second=second;   
}

Person.prototype.sum = function(){
    return 'prototype : '+(this.first+this.second);
}

var kim = new Person('kim', 10, 20);
kim.sum = function(){
    return 'this : '+(this.first+this.second);
}
var lee = new Person('lee', 10, 10);
console.log("kim.sum()", kim.sum());
console.log("lee.sum()", lee.sum());

참고

[JavaScript] 프로토타입 이해하기 (오승환님)

파시1년 전

230619

답글
최장군1년 전

메모리 낭비를 줄이고, 재사용성을 높인다.

답글
소뿡이2년 전

일반적으로 생성자 함수에서는 함수를 만들지 않는다.
이유는 메모리와 성능절약을 위해서다.
prototype 을 이용하여 함수를 만들게 되면
객체를 생성할 때마다 함수를 만들지 않고, 함수를 불러올 때만 만들게된다.

답글
Kyu Youn Lee2년 전

점점 어려워 지네요.^^

답글
LLLEE2년 전

=> constructor(생성자) 안의 method -> 생산성을 떨어트림.

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!prototype!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
prototype: constructor function으로 생성된 Object에서 참조 가능한 function을 만들게 해준다.

ex)
. . .

Person.prototype.sum = function() {
return this.first + this.second
}

var kim = new Person('kim', 10, 20);
kim.sum = function() { -> kim 객체의 sum만 다르게 쓰기
return this.first + this.second; kim property
}
var lee = new Person('lee', 10, 20);

console.log(kim.sum());
=> kim.sum() 호출 -> kim 객체에 sum이라는 property가 존재 -> sum 실행
console.log(lee.sum());
=> lee.sum() 호출 -> lee 객체에 sum 부재
-> lee의 생성자인 Person의 prototype으로 정의된 sum을 가져옴 -> sum 실행
-----------------------------------------------------------------------------------------------------------
Person() 생성자로 만들어진 객체들이 존재하지 않는 property가 호출되면 생성자의 prototype에서 확인 후 참조한다.
객체 안에 property가 있으면 해당 property를 실행시킨다.
따라서 생성자의 prototype을 확인 하지 않으므로 다르게 쓰고 싶은 코드를 property에 넣어 객체에 할당시킨다.

-> Person()로 생성된 객체들이 sum()을 share한다!
-> 한번만 실행(정의) -> 성능, 메모리 절약 -> 코드 재사용성 증가, 성능 향상

답글
LLLEE2년 전

prototyper: constructor function에서 참조 가능한 function의 원형을 만든다.

. . .
Person.prototype.sum = function() {
return this.first + this.second
}

var kim = new Person('kim', 10, 20);
kim.sum = function() { ----------------------------> kim 객체의 sum만 다르게 쓰기
return this.first + this.second;
}
var lee = new Person('lee', 10, 20);

console.log(kim.sum());
=> kim.sum() 호출 -> kim 객체에 sum이라는 property가 존재 -> sum 실행
console.log(lee.sum());
=> lee.sum() 호출 -> lee 객체에 sum 부재 -> lee의 생성자인 Person의 prototype으로 정의된 sum을 가져옴 -> sum 실행

-------------------------------------------------------------------------------------------------------------
Person() 생성자로 만들어진 객체들이 존재하지 않는 property가 호출되면 생성자의 prototype에서 확인 후 참조한다.
객체 안에 property가 있으면 해당 property를 실행시킨다.
따라서 생성자의 prototype을 확인 하지 않으므로 다르게 쓰고 싶은 코드를 property에 넣어 객체에 할당시킨다.

답글
분위기2년 전

컨스트럭터로 오브젝트를 만들면 그 안에 있는 메소드도 계속 새로 만들어진다. 이 객체가 많아질 수록 컴퓨터 메모리를 낭비하고 성능이 저하된다. 또한, 컨스트럭터로 만들어진 객체 중 일부만 내용을 바꾸고 싶을때 하나하나 객체마다 바꾸어줘야 한다. 재사용하기에 불편하다. 즉, 반복 작업을 줄이기 위해서 나온게 프로토타입이다.

프로토타입은 원형 혹은 어떤 것의 초기 모델 정도로 생각하면 된다. 자바스크립트는 객체에서 메소드를 사용할 때 순서가 있다. 1번으로 그 자체 메소드를 먼저 확인하고 없으면, 2번으로 프로토타입을 찾아서 실행한다. 이렇게 되면 원하는 오브젝트의 메소드는 수정될 수 있다. 그리고 메소드를 계속 만들지 않아서 컴퓨터 자원 낭비를 줄일 수 있다.

답글
개발맨3년 전

완료

답글
mini3년 전

20211203 감사합니다!

답글
labis983년 전

20210901 항상 좋은 교육 감사합니다.!!!

답글
Kenna3년 전

1. 원형. 생성자함수를 통해 만든 모든 객체가 공통적으로 이용하는 메소드
2. 생성된 객체마다 매번 메소드를 선언해주고 수정해주어야 한다.
3. 생성자함수에 대한 프로토타입 메소드를 선언해 사용하고 필요할 때 개별 객체에 별도의 메소드를 선언한다.

답글
js3년 전

1. Prototype의 의미 : 객체 내 함수(메소드)를 객체 외부로 인출하여 함수 원형을 만듬

2. Prototype 장점 : 객체 외 생성된 함수 원형은 1회만 실행되어 메모리가 절감되며, 이 함수 원형을 사용하는
모든 객체에 일괄 반영됨으로써 수정이 용이함.

답글
자바바3년 전

prototype의미: 생성자 함수에 공통적으로 사용하는 메소드 (속성)을 만들어, 객체 생성시에마다 필요한 연산을 줄일수 있다.
prototype을 적용하지 않을때: 다른 객체가 생성될때 마다 계속적으로 새로 만들어지면서 계속 연산을 하게 되어 있다.컴터의 연산이 많아지고 메모리가 부족해진다.

답글
hyun e3년 전

1. prototype의 의미는 무엇인가? 자동적으로 생성되는 속성 값이다. 즉, 객체들이 모두 그 prototype을 참조한다.
2. prototype을 사용하지 않으면, 우리가 생성한 객체가 constructor를 참조할 때 마다, 우리가 정의한 함수 부분을 반복적으로 출력해야 한다. 객체가 한 두 가지라면 상관이 없겠으나, 수 백 수 천 개라고 가정한다면 상당한 비효율이 발생할 것이다. 트래픽, 성능의 비효율 뿐만 아니라 코드 또한 지저분 해질 수 있다.
3. 따라서 이러한 비효율의 발생을 방지하기 위해, 함수를 지정할 때 prototype이라는 고유의 속성 값을 지정해줌으로서, 객체를 생성할 때 마다 그 객체는 이미 지정된 prototype에 속한 함수 값만 참조하면 되게 되는 것이다. 이러한 과정을 통해서 성능을 절약할 수 있고, 수정 사항이 발생했을 때 즉각적으로 처리하기도 쉬워진다.

답글
유대영3년 전

생성자로 만들어진 객체에는 생성자에 있는 메쏘드가 객체들마다 실행되어
성능이 떨어지고 메모리의 사용도 많아지게 된다
이런 문제점해결을 위해 생성자 밖에서 prototype으로 메소드를 선언해주면
많은 객체가 생성되더라도 메소드는 한번만 생성되므로 성능저하, 메모리 낭비가
개선된다

답글
박병진4년 전

감사합니다. 생활코딩 프로그래머 선생님. 복습을 마치고 다음 단계로 넘어 가겠습니다.

답글
최동희4년 전

prototype은 함수가 선언될 때, 자동으로 선언되는 속성 객체로, 그 함수가 생성자로 이용되어 만들어진 모든 객체는 그 함수의 prototype을 참조한다. 이를 통해 함수가 생성자로 활용될 때마다 반복적으로 선언문이 실행되지는 않지만 그때 생성된 객체에서 공통적으로 활용 가능한 속성을 선언할 수 있다.

답글
현미쓰4년 전

prototype 사전적 의미로는 '원형', constructor 함수에 미리 함수를 정의하면, 객체를 생성할 때마다 함수가 생성되기 때문에 프로그램의 성능 저하와 메모리 사용의 문제가 생긴다. 이를 해결하기 위해 모든 생성자들이 공통적으로 공유하는 생성자 함수의 원형을 prototype 으로 정의할 수 있다. prototype은 객체가 만들어질 때마다 실행되는 것이 아니라, 한번만 실행되기 때문에 성능과 메모리 상의 문제를 해결할 수 있을 뿐 아니라, 특정 생성자만 따로 컨트롤할 수 있다. 특정 생성자를 컨트롤 할 때, 그 생성자 내에 미리 정의된 함수가 있으면 그 함수를 실행시키고, 그렇지 않으면 prototype 함수를 실행시킨다.

답글
ㅇㅇ4년 전

prototype 을 이용하면 new 를 이용해 새로운 객체를 찍어낼 때 마다 같은 동작을 하는 객체의 속성 값 (여기서는 함수) 를 생성하는 것이 비효율적으로 반복되는 것을 막을 수 있다.

답글 수정 삭제
마그마4년 전

1. 프로토타입 의미
객체들이 공통으로 사용하는 속성값

2. 프로토타입 없을 때의 비효율적인 점
객체를 생성할 때 마다 같은 동작을 하는 메소드가 메모리에 계속 생긴다. => 성능 저하, 메모리 낭비

3. 프로토타입을 사용하면 좋은 점
객체들이 공통으로 사용하는 속성값을 정의해서 객체 생성마다 같은 속성값을 만드는 과정을 생략해, 성능 향상과 메모리를 효율적으로 이용할 수 있게 해준다.

답글 수정 삭제
마그마4년 전

첫번째 영상 3:46

Person을 사용하는 모든 객체의 sum()을 바꾸고 싶으면 function Person()에 있는 sum을 고쳐주면 되지않나요?

답글 수정 삭제
goTotheHome5년 전

1. 프로토 타입의 의미:
객체의 공통 함수를 만들으므로써 같은 객체들이 공통으로 사용 할 수 있는 것

답글 수정 삭제
king5년 전

1. 프로토타입의 의미??

사전적으로 원형이라는 의미를 가지며, 생성자 함수의 외부에 지정하지만 생성자 함수로 만든 모든 객체가 접근 가능하다.

2. 프로토타입을 사용하지않고 생성자 함수 안에서 메소드나 속성을 직접 정의 하게 되면 어떤 비효율이 발생할까?
그러면 프로토타입을 통해 어떻게 극복 했는지??

생성자 함수 안에서 직접 정의하게되면, new 키워드로 객체를 만들 때 마다 함수를 정의해주어 메모리 낭비를 하게된다. 그래서 생성자함수명.protopyte.함수명 = function(){} 로 한 번만 정의해주고, 생성자함수를 통해 생성된 객체들이 모두 사용 할 수 있게된다. 수정시에도 해당 프로토타입 함수만 수정하면 되므로 유지보수에도 효율적이다.
그리고 만약에 객체가 개별적으로 동일한 이름의 함수를 정의해서 사용한다면 해당 객체가 가진 함수를 먼저 확인하고 실행하기때문에 protopyte으로 만든 함수와 함수를 사요하는 다른 객체에 영향을 주지않는다.

답글 수정 삭제
Giri5년 전

감사합니다.

답글
plora5년 전

프로토 타입이란 간단히 말하자만 공통적인 부분이라 말할수 있습니다. 기존에 프로토타입을 사용하지 않았던 생성자 객체들은 각각 생성되어 각자 속성과 메소드를 가지고있어서 해당 부분을 수정시에는 직접 각 객체에 다가가 적용해줘야했습니다. 하지만 이러한 불편한 부분들을 프로토타입으로 공통적인 부분을 지정해주어 해당 내용을 수정을 해주면 생성자로 만든 모든 객체에 적용되어 활용적인 면을 더욱더 좋게 만들었습니다.

답글 수정 삭제
dkidldfdy@naver.com5년 전

1

답글 수정 삭제
bread5년 전

prototype은 단어적 의미로 원형이라는 뜻인데, 생성자 함수에 밖에서 함수를 정의해주지만
생성자 함수로 만든 모든 객체에 사용할 수 있다.

prototype이 없다면 생성자 함수 안에 함수를 정의해야 하는데 새로운 객체를 생성할 때마다
함수를 정의해야 하므로 메모리가 낭비된다.(1억개가 있다고 하면 너무 비효율)

그래서 생성자함수이름.prototype.함수이름 = function (){} 으로 한 번만 정의해주면
생성자함수로 만든 모든 객체에서 접근가능하고 1억개의 객체가 있다고 해도 메모리손실이 발생하지 않음
그리고 1억개의 객체가 있을때 하나의 객체에 같은이름의 함수를 다른내용으로 정의해도
그 수정한 객체에만 영향있을뿐 다른 객체에는 영향이 가지 않는다.
왜냐하면 객체.함수() 를 실행할때에는 그 객체 자신 안에 함수가 있는지 '먼저' 확인하고 실행하기 때문이다.

답글 수정 삭제
beanbean5년 전

프로토타입은 함수를 실행할때 직접적으로 선언된 함수가 없다면 프로토타입 이라고 생성된 함수를 찾게된다. 직접적으로 선언된 함수가 있다면 그걸 사용하고 끝낸다.
프로토타입을 사용하지 않을경우 생성자 내부에서 함수가 실행될때 불필요한 메모리공간을 사용하게되어 성능에 이슈가 될수 있으며, 수정사항이 발생될때 각각의 생성자함수의 함수를 수정해야주어야 하므로 코드유지관리에서 문제가 된다.

라고. 이해했습니다~ ^^;;;

답글 수정 삭제
Young Kwang Cho5년 전

생성자 함수내에 있던 프로퍼티나 메서드는 복사해서 만들어지기 때문에 생성자를 이용해서 만들어진 객체마다 개별적으로 존재하는 프로퍼티며 메서드이다. 그래서 객체 수가 많아지면 메모리 낭비도 심하며, 한 번에 수정을 할 수 없다.

그에 반해 생성자 함수의 프로토타입 객체에 선언된 메서드나 프로퍼티는 별도의 공간에 존재함으로써, 그 생성자를 이용해서 생성된 객체들이 모두 접근해서 공유할 수 있다. 또 객체마다 개별적으로 가지고 있는 것들이 아니기 때문에 메모리 낭비도 없고, 한 번에 수정으로 모든 객체에 적용이 가능하다.

답글
변찬우5년 전

질문1. 생성자 함수에 새로운 속성을 정의할 수 있도록 해주는 예약어? 라고 생각합니다.

질문2. 1) 성능 저하 : 생성자 함수 내부에서 정의된 함수는 사용 여부를 떠나, 해당 객체가 생성될 때마다 생성되기 때문에 성능을 저하시키는 원인이 될 수 있다. 2) 비효율적인 유지보수 : 생성자 함수 내부에서 정의된 함수를 수정해야 하는 경우, 보안 이슈를 무릅쓰고 직접 접근해서 수정을 하거나, 생성자 함수로 생성된 객체 각각 재선언을 해줘야 하는 불편함이 있을 수 있다.

답글
feel5년 전

var Person = {
name : 12,
age : function() {
return 12;
}
}
일회성

function Person() {
this.name = 12;
this.age = function() {
return 13;
};
}
new Person()으로 재사용가능
!! 생성자 객체 안의 함수는 내부에서 사용시에만 정의하고 공용으로 사용될것들은 prototype으로 정의하자

Person.prototype.sum = function() {
return 'prototype : ' + (this.first + this.second);
}
성능과 메모리 절약뿐 아니라 유지보수가 싶다

kim.sum = function() {
return 'this : ' + (this.first + this.second);
}
재정의도 가능하다

답글
beam1100@naver.com5년 전

```
//매서드를 이용한 계산기
var cal_ = {
first:10,
second:20,
third:30,
sum:function(){
return this.first+this.second+this.third
}
}

//생성자 함수를 이용한 계산기
function cal(f, s, t){
this.first=f;
this.second=s;
this.third=t;
this.sum=function(){
return this.first+this.second+this.third
}
}

console.log(cal_.sum())

console.log(new cal(1,45,2).sum())
//new를 붙이면 일반적인 함수가 아니라 생성자 함수가 됨.
```

답글 수정 삭제
hyuna lee5년 전

생성자 함수안의 메소드를 따로 prototype으로 분리해두면 생성자 함수로 객체를 생성할때마다 함수를 만들지 않아서 메모리 낭비가 없고, 프로토타입의 메소드를 필요할 때마다 공유해서 쓸수 있고, 메소드의 내용을 변경하기도 쉽다는 것? ㅠㅠ 머리론 알겠는데 말로 표현하지 못하는것은 모르는 것이다 라는 말이 있는데...아직 모르나봐요.
예전에 이고잉님 자바스크립트 강좌 다 들었는데...복습해야겠어요.

답글