JavaScript 객체 지향 프로그래밍

생성자를 통한 상속

수업소개

이 수업은 불필요하게 어렵습니다. 동일한 역할을 하면서도 훨씬 이해하기 쉬운 class 상속 수업을 보실 것을 권해봅니다. 물론 보셔도 됩니다. ㅎㅎ 

 

 

 

강의1

 

 

 

강의2

 

 

 

코드

constructor-inheritance.js (변경사항)

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

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

PersonPlus.prototype.avg = function(){
    return (this.first+this.second+this.thrid)/3;
}
var kim = new PersonPlus('kim', 10, 20, 30);
console.log("kim.sum()", kim.sum());
console.log("kim.avg()", kim.avg());

 

 

 

강의3

 

 

 

코드

constructor-inheritance.js (변경사항)

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

function PersonPlus(name, first, second, third){
    Person.call(this, name,first,second);
    this.third = third;
}
// PersonPlus.prototype.__proto__ = Person.prototype;
PersonPlus.prototype = Object.create(Person.prototype)

PersonPlus.prototype.avg = function(){
    return (this.first+this.second+this.third)/3;
}
var kim = new PersonPlus('kim', 10, 20, 30);
console.log("kim.sum()", kim.sum());
console.log("kim.avg()", kim.avg());

 

 

 

강의4

constructor 속성의 의미와 용도를 살펴봅니다. 

 

 

 

강의5

 

 

 

코드

constructor-inheritance.js (변경사항)

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

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

// PersonPlus.prototype.__proto__ = Person.prototype;
PersonPlus.prototype = Object.create(Person.prototype);
PersonPlus.prototype.constructor = PersonPlus;
PersonPlus.prototype.avg = function(){
    return (this.first+this.second+this.third)/3;
}

var kim = new PersonPlus('kim', 10, 20, 30);
console.log("kim.sum()", kim.sum());
console.log("kim.avg()", kim.avg());
console.log('kim.constructor', kim.constructor);

 

댓글

댓글 본문
  1. class때문에 헤메이던 날들
    남에 코드를 베끼면서 신나게 웹문서를 만들고 있었는데
    어느날 class를 마구 마구 쓰는 개발자들을 보면서
    나두 써봐야지 그러고 썼더니 첫번째 줄부터 error 뿌악
    class를 babel로 번역했더니 뭐라 뭐라 더 모르는 외계어로 뿜어내는 컴퓨터
    에잇 이게뭐야 이게뭐야 난 못해 난 못해
    그런데 혹시 하고 생활코딩 찾아봤더니
    있네 있어 여기 있네
    그러니까 prototype __proto__이런것이 어느공장 출신인지 내장되어 있다는 말이져?
    babel을 안쓰고 class로 만든 코딩을 스스로 번역 할 수도 있겠다는 희망이 생겨요
    감사합니다.
  2. 감사합니다.
  3. seolseol2
    PersonPlus를 통해 만들어진 kim의 sum을 Person의 prototype의 sum과 연결한 다음
    확장시키는 내용도 있었으면 좋겠습니다..!
    return super.sum()+this.third; 과 대칭될 수 있는 코드요!

    >
    PersonPlus.prototype.sum = function () {
    return Person.prototype.sum.call(this)+this.third;
    };


    이 코드가 맞을까요?
  4. hyuna lee
    감사합니다!! 두번보니 좀더 이해가 명쾌해지네요.
  5. 화난 코끼리
    아...ㅜㅜ.. 드디어 이해한것 같아요.
    감사합니다! 이고잉님~. 생활 코딩님들~^^.
  6. 폭스킴
    잘 동작하네요! 재밌게 잘 보고 있어요~ 감사합니다~
    대화보기
    • egoing
      다시 수정했습니다!
      대화보기
      • 폭스킴
        강의 1,2가 나오지 않습니다. 3.4.5는 동작하네요!
        대화보기
        • egoing
          지금은 어떤가요? 내용을 개선해서 다시 올렸거든요..
          대화보기
          • 폭스킴
            유튜브에선 동영상이 나오는데 이 페이지에서는 동영상 재생이 안되네요~ 다른 페이지는 정상작동하는거 보니까 이 페이지만 문제가 있는 거 같습니다~
          버전 관리
          egoing
          현재 버전
          선택 버전
          graphittie 자세히 보기