JavaScript 객체 지향 프로그래밍

JavaScript 객체 지향 프로그래밍

객체 공장

수업소개

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

 

 

 

강의1

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

 

 

 

코드

object_factory.js (변경사항)

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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 (변경사항)

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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 (변경사항) 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
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. 파시
    230619
    답글
  2. 소뿡이
    constructor function 을 만들게 되면 new 를 사용함으로써 객체가 양성된다!
    반복해서 코드를 쓸 필요 없이 constructor function 을 사용해서
    파라미터 값을 함수안에 작성해주고 미리 만들어 놨던 틀(constructor function)로 객체를 만들 수 있다.
    답글
  3. 소뿡이
    감사합니다.
    답글
  4. Kyu Youn Lee
    감사합니다.
    답글
  5. LLLEE
    constructor function은 this를 사용하여, new function으로 객체 생성시킨다.
    생성 시 획기적인 코드 간편화, 유지, 보수를 용이하게 만든다.
    답글
  6. 분위기
    객체를 1억개를 만들었는데 부장이 와서 객체에 요소를 하나 추가하자고 한다.
    이때 생성자 공부를 했다면 new라는 생성자 키워드로 객체를 만들고 1분 안에 수정하고 퇴근한다!

    항상 프로그래밍은 반복 작업을 줄이려는 철학을 갖고 있는 듯 하다. 그래서 항상 이걸 구현하기 위해서 기술이 나오는 걸로 보인다.
    답글
  7. 개발맨
    완료
    답글
  8. mini
    20211202 감사합니다!

    비슷한 성질(?)의 객체를 만들때는 중괄호를 이용해서 여러개를 만들어야했고, 또 수정이 필요할때마다 하나씩 수정해야야 했지만, Construction function을 이용해서 생성하면, new 키워드로 보다 쉽게 생성 및 수정이 가능하다!
    답글
  9. 장운서
    생성자 함수란?
    같은 동작을 해야하는 객체를 획일화 시켜주는 함수

    장점 - 동일한 data를 양산 가능하게 해줌
    답글
  10. labis98
    20210831 깔끔한 설명 감사합니다.
    답글
  11. Kenna
    function으로 객체를 가진 함수를 생성하고, new 함수이름(); 으로 함수가 가진 객체를 사용할 수 있다.
    답글
  12. js
    New를 사용하여 Construction function을 만들면 객체를 양산할 수 있으며, 변수 지정 시 하나하나의 객체를 수정할 필요없이 적용된 모든 객체를 일괄 수정할 수 있는 장점이 있다.
    답글
  13. 자바바
    Construct Function은 일반 함수를 객체로 만들어 주는 객체 생성자이다.
    Construct Function 을 적용하면 앞에 "new"을 사용하여 실행할때 마다 객체가 양상된다. Construct Function을 바꾸면 Construct Function을 사용하는 모든 객체가 한번에 바뀌는 효과를 얻을수 있다.
    답글
  14. hyun e
    지금까지는 동일한 속성을 지닌 새로운 객체를 만들어줄때마다 새로 입력해주어야 했다. 그로 인해서 코드의 낭비, 중복은 물론 한 번 수정 사항이 발생하면 전체를 바꾸어주어야 하는 아주 비효율적인 구조였다. 하지만 생성자와 new를 통해서 객체를 한 번만 정의하고, 그 객체에 속하게 함으로서 계속 새로 입력해주어야 하는 비효율성을 개선할 수 있게 되었고, 수정 사항이 발생하여도 한 번만 코드를 고쳐주면 바로 그 수정 사항이 모두 적용될 수 있게 되었다. 프로그래밍 과정에서 가장 지양해야 할 중복의 발생을 피할 수 있고, 그때 그때 변경 사항이 반영되는 유연한 코드를 만들 수 있게 된 것이다.
    답글
  15. 금도끼은도끼
    이건 자바랑 거의비슷하네요..
    답글
  16. 박병진
    constructor function의 이점은 new라는 생성자를 사용함으로써 살행할떄마다 객체가 양산된다. 그리고 값을 바꾸면 모든 객체가 한번에 바뀌는 폭팔적인 힘을 가지고 있다. 이로써 코드의 재사용성을 알수있다.
    답글
  17. 최동희
    객체의 생성자는 함수의 일종이지만 new 키워드를 이용해서 객체 생성자로 활용할 수 있다. 객체의 생성자를 호출하면 새로운 객체가 반환되며, 이런 방법으로 유사한 형태의 객체를 반복적으로 생산하는 코드를 비교적 짧은 구문으로 관리할 수 있게 된다.
    답글
  18. 코딩중독
    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
      답변 감사합니다!
      대화보기
        답글 수정 삭제
      • 폭스킴
        es6에서 도입된 화살표 함수 ()=> 는 자신의 this를 바인딩하지 않는 익명함수로 this가 전역객체인 window객체가 됩니다. function()과 this가 틀려요! 중요한 문법이니까 구글에서 "화살표 함수 this" 정도로 검색해보세요~ 자세한 정보를 보실 수 있어요!
        대화보기
          답글
        • es6
          강의와 크게 관련없는 내용이지만

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

          다른 이유가 무엇일까요??..
          답글 수정 삭제
        • 꽈당진
          감사합니다 !귀에쏙쏙
          답글
        공동공부
        graphittie 자세히 보기