JavaScript 객체 지향 프로그래밍

객체 공장

수업소개

객체를 수동으로 만드는 가내수공업에서 벗어나서 객체를 자동으로 찍어내는 공장인 constructor을 만들어봅시다. 

 

 

 

강의1

가내수공업으로 객체를 만들 때의 단점을 소개합니다. 

 

 

 

코드

object_factory.js (변경사항)

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

 

 

 

강의2

내장된 객체를 통해서 객체 공장의 쓰임을 체험해봅니다. 

 

 

 

코드

object_factory.js (변경사항)

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

var d1 = new Date('2019-4-10');
console.log('d1.getFullYear()', d1.getFullYear());
console.log('d1.getMonth()', d1.getMonth());

 

 

 

강의3

객체 공장을 우리도 이용해봅시다!

 

 

 

코드

object_factory.js (변경사항

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

var kim = new Person('kim', 10, 20);
var lee = new Person('lee', 10, 10);
console.log("kim.sum()", kim.sum());
console.log("lee.sum()", lee.sum());

 

댓글

댓글 본문
  1. 코딩중독
    this.name은 Person함수의 객체를 가르키고, name은 그냥 그 this.name의 값입니다.
    대화보기
    • 잘생김태환
      저 이 내용에서 약간 이해가 안 되는 부분이 있는데 6.3동영상에 Person생성자에서 this.name 이랑 매개변수name이랑 다른건가요? 다르다면 어떻게 다른건지 알려주시면 감사하겠습니다
    • 마그마
      새로운 객체를 생성할 때 마다 같은 형태일지라도 속성값을 매번 입력해야했다. 그리고 같은 형태의 객체들의 변수나 메서드의 수정이 필요하면 모든 객체를 일일이 수정해야했다. 하지만 constructor function을 사용하면 같은 형태의 객체를 생성할 때 필요한 시간을 줄여주고, construct function만 수정하면 이 틀을 사용하는 모든 객체를 한번에 바꿀 수 있다.
    • 이정
      constrctor은 말그대로 생성자!!동일한 객체를 여러번 만들게되면 중복과 메모리낭비가 발생함으로 정의해둔 함수앞에 new라는 키워드를 붙여 함수에서 생성자함수로 만들고, 그와 동시에 빈객체를 생성하여 생성자 함수에 있던 프로퍼티들을 상속(?)시켜 생성자 함수로 만들어진 객체를 전역에서 호출하여 유지보수와 메모리낭비를 줄인다
    • younhoso
      /**
      * constructor 생성자 함수
      * 여기서 핵심 Person 생성자 함수를 만들고, new라는 키워드를 통해서 외부에서 재사용할수 있다.
      */

      (function(){
      var Person = function(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;
      },

      // 이 메서드 밑에서 부터는 간단하게 DOM script에 적용해보자.
      this.none = function() { // 엘리먼트 none하기
      this.name.style.display = 'none';
      },

      this.nonelist = function() { // 엘리먼트들(복수) none하기
      for(var i = 0; i < this.name.length; i++){
      this.name[i].style.display = 'none';
      }
      }
      }
      var tesst = new Person('so',10,20,30);
      var tesst2 = new Person('lee',50,20,30);
      console.log(tesst.sum());
      console.log(tesst2.sum());


      var h3Ele = document.querySelector('h3'); //엘리먼트 선택
      var listEle = document.querySelectorAll('ul .list'); //엘리먼트들(복수) 선택

      var h3 = new Person(h3Ele);
      var listnone = new Person(listEle);

      h3.none();
      listnone.nonelist();
      })()

      ----------------------------------------------------
      간단하게 DOM script 응용해 보았습니다.
      매번 감사합니당^^
    • king
      construct function : 생성자함수이다.(객체의 형식 정의 된 틀 역할을 한다.)
      중요한 점은 함수의 인자로 전달받은 값을 개체의 속성에 할당할 때 this를 사용한다.
      그리고 해당함수를 사용 할 때 new키워드를 써 새로운 객체를 만들고 인자를 넣어 사용한다.
    • Giri
      감사합니다.
    • plora
      생성자 함수는 같은 구조로 되어있는 객체를 하나의 객체구조 틀을 만들어 두어 편하게 객체를 만들때 각 변수에 생성합니다.
    • 리아포
      생성자 함수를 이용하면 같은 형식의 객체를 만들 때 하나하나 변수를 지정해줄 필요 없으며, 생성자 함수에서 값을 변경함에 따라 생성자 함수를 통해 만들어진 모든 객체가 한번에 바뀜
    • Young Kwang Cho
      생성자를 이용하면 같은 형태의 객체를 쉽게 만들 수 있다.
      같은 객체를 여러 번 반복하는 것보다 하나의 생성자 함수에서 하는게 코드 관리에 용이하다.
    • 어쩌다보이
      new로 생성하면 this로 찍어낸다..
    • 0cool
      functino 이 빵틀이라면 new 키워드를 사용해서 빵틀의 모양대로 찍어내는 빵이라고 볼 수 있겠네요 ㅎㅎ
    • hyuna lee
      생성자로 객체를 만들면 대량으로 객체를 만들어내기가 쉽네요. 위의 코드에서 1000명의 Person을 만든다고 생각하면.. 코드길이도 엄청 짧아질 것 같아요.
    • 답변 감사합니다!
      대화보기
      • 폭스킴
        es6에서 도입된 화살표 함수 ()=> 는 자신의 this를 바인딩하지 않는 익명함수로 this가 전역객체인 window객체가 됩니다. function()과 this가 틀려요! 중요한 문법이니까 구글에서 "화살표 함수 this" 정도로 검색해보세요~ 자세한 정보를 보실 수 있어요!
        대화보기
        • 강의와 크게 관련없는 내용이지만

          kim.sum = () => {
          return this
          }
          console.log(kim.sum()) // {}
          kim.sum = function() {
          return this
          }
          console.log(kim.sum()) // 재대로 나옴

          다른 이유가 무엇일까요??..
        • 꽈당진
          감사합니다 !귀에쏙쏙
        graphittie 자세히 보기