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. 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 응용해 보았습니다.
    매번 감사합니당^^
  2. construct function : 생성자함수이다.(객체의 형식 정의 된 틀 역할을 한다.)
    중요한 점은 함수의 인자로 전달받은 값을 개체의 속성에 할당할 때 this를 사용한다.
    그리고 해당함수를 사용 할 때 new키워드를 써 새로운 객체를 만들고 인자를 넣어 사용한다.
  3. 감사합니다.
  4. 생성자 함수는 같은 구조로 되어있는 객체를 하나의 객체구조 틀을 만들어 두어 편하게 객체를 만들때 각 변수에 생성합니다.
  5. 리아포
    생성자 함수를 이용하면 같은 형식의 객체를 만들 때 하나하나 변수를 지정해줄 필요 없으며, 생성자 함수에서 값을 변경함에 따라 생성자 함수를 통해 만들어진 모든 객체가 한번에 바뀜
  6. Young Kwang Cho
    생성자를 이용하면 같은 형태의 객체를 쉽게 만들 수 있다.
    같은 객체를 여러 번 반복하는 것보다 하나의 생성자 함수에서 하는게 코드 관리에 용이하다.
  7. 어쩌다보이
    new로 생성하면 this로 찍어낸다..
  8. functino 이 빵틀이라면 new 키워드를 사용해서 빵틀의 모양대로 찍어내는 빵이라고 볼 수 있겠네요 ㅎㅎ
  9. hyuna lee
    생성자로 객체를 만들면 대량으로 객체를 만들어내기가 쉽네요. 위의 코드에서 1000명의 Person을 만든다고 생각하면.. 코드길이도 엄청 짧아질 것 같아요.
  10. 답변 감사합니다!
    대화보기
    • 폭스킴
      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 자세히 보기