JavaScript 객체 지향 프로그래밍

prototype

수업소개

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. goTotheHome
    1. 프로토 타입의 의미:
    객체의 공통 함수를 만들으므로써 같은 객체들이 공통으로 사용 할 수 있는 것
  2. 1. 프로토타입의 의미??

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

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

    생성자 함수 안에서 직접 정의하게되면, new 키워드로 객체를 만들 때 마다 함수를 정의해주어 메모리 낭비를 하게된다. 그래서 생성자함수명.protopyte.함수명 = function(){} 로 한 번만 정의해주고, 생성자함수를 통해 생성된 객체들이 모두 사용 할 수 있게된다. 수정시에도 해당 프로토타입 함수만 수정하면 되므로 유지보수에도 효율적이다.
    그리고 만약에 객체가 개별적으로 동일한 이름의 함수를 정의해서 사용한다면 해당 객체가 가진 함수를 먼저 확인하고 실행하기때문에 protopyte으로 만든 함수와 함수를 사요하는 다른 객체에 영향을 주지않는다.
  3. 감사합니다.
  4. 프로토 타입이란 간단히 말하자만 공통적인 부분이라 말할수 있습니다. 기존에 프로토타입을 사용하지 않았던 생성자 객체들은 각각 생성되어 각자 속성과 메소드를 가지고있어서 해당 부분을 수정시에는 직접 각 객체에 다가가 적용해줘야했습니다. 하지만 이러한 불편한 부분들을 프로토타입으로 공통적인 부분을 지정해주어 해당 내용을 수정을 해주면 생성자로 만든 모든 객체에 적용되어 활용적인 면을 더욱더 좋게 만들었습니다.
  5. dkidldfdy@naver.com
    1
  6. prototype은 단어적 의미로 원형이라는 뜻인데, 생성자 함수에 밖에서 함수를 정의해주지만
    생성자 함수로 만든 모든 객체에 사용할 수 있다.

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

    그래서 생성자함수이름.prototype.함수이름 = function (){} 으로 한 번만 정의해주면
    생성자함수로 만든 모든 객체에서 접근가능하고 1억개의 객체가 있다고 해도 메모리손실이 발생하지 않음
    그리고 1억개의 객체가 있을때 하나의 객체에 같은이름의 함수를 다른내용으로 정의해도
    그 수정한 객체에만 영향있을뿐 다른 객체에는 영향이 가지 않는다.
    왜냐하면 객체.함수() 를 실행할때에는 그 객체 자신 안에 함수가 있는지 '먼저' 확인하고 실행하기 때문이다.
  7. beanbean
    프로토타입은 함수를 실행할때 직접적으로 선언된 함수가 없다면 프로토타입 이라고 생성된 함수를 찾게된다. 직접적으로 선언된 함수가 있다면 그걸 사용하고 끝낸다.
    프로토타입을 사용하지 않을경우 생성자 내부에서 함수가 실행될때 불필요한 메모리공간을 사용하게되어 성능에 이슈가 될수 있으며, 수정사항이 발생될때 각각의 생성자함수의 함수를 수정해야주어야 하므로 코드유지관리에서 문제가 된다.

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

    그에 반해 생성자 함수의 프로토타입 객체에 선언된 메서드나 프로퍼티는 별도의 공간에 존재함으로써, 그 생성자를 이용해서 생성된 객체들이 모두 접근해서 공유할 수 있다. 또 객체마다 개별적으로 가지고 있는 것들이 아니기 때문에 메모리 낭비도 없고, 한 번에 수정으로 모든 객체에 적용이 가능하다.
  9. 변찬우
    질문1. 생성자 함수에 새로운 속성을 정의할 수 있도록 해주는 예약어? 라고 생각합니다.

    질문2. 1) 성능 저하 : 생성자 함수 내부에서 정의된 함수는 사용 여부를 떠나, 해당 객체가 생성될 때마다 생성되기 때문에 성능을 저하시키는 원인이 될 수 있다. 2) 비효율적인 유지보수 : 생성자 함수 내부에서 정의된 함수를 수정해야 하는 경우, 보안 이슈를 무릅쓰고 직접 접근해서 수정을 하거나, 생성자 함수로 생성된 객체 각각 재선언을 해줘야 하는 불편함이 있을 수 있다.
  10. 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);
    }
    재정의도 가능하다
  11. beam1100@naver.com
    ```
    //매서드를 이용한 계산기
    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를 붙이면 일반적인 함수가 아니라 생성자 함수가 됨.
    ```
  12. hyuna lee
    생성자 함수안의 메소드를 따로 prototype으로 분리해두면 생성자 함수로 객체를 생성할때마다 함수를 만들지 않아서 메모리 낭비가 없고, 프로토타입의 메소드를 필요할 때마다 공유해서 쓸수 있고, 메소드의 내용을 변경하기도 쉽다는 것? ㅠㅠ 머리론 알겠는데 말로 표현하지 못하는것은 모르는 것이다 라는 말이 있는데...아직 모르나봐요.
    예전에 이고잉님 자바스크립트 강좌 다 들었는데...복습해야겠어요.
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기