17
Javascript 객체생성패턴 NHN NEXT 김희재

Javascript 객체생성패턴

Embed Size (px)

Citation preview

Page 1: Javascript 객체생성패턴

Javascript����������� ������������������  객체생성패턴����������� ������������������  

NHN  NEXT    김희재  

Page 2: Javascript 객체생성패턴

팩토리패턴����������� ������������������  

장점����������� ������������������  •  비슷한����������� ������������������  객체����������� ������������������  생성시����������� ������������������  코드의����������� ������������������  중복문제����������� ������������������  해결����������� ������������������  

단점����������� ������������������  •  객체의����������� ������������������  메서드가����������� ������������������  중복생성되어����������� ������������������  리소스를����������� ������������������  불필요하게����������� ������������������  차지����������� ������������������  •  객체����������� ������������������  인스턴스의����������� ������������������  타입을����������� ������������������  알����������� ������������������  수����������� ������������������  없음����������� ������������������  ����������� ������������������  ����������� ������������������  

요즘����������� ������������������  잘����������� ������������������  안씀!����������� ������������������  

Page 3: Javascript 객체생성패턴

생성자패턴����������� ������������������  

장점����������� ������������������  •  객체����������� ������������������  인스턴스의����������� ������������������  타입을����������� ������������������  생성자이름으로����������� ������������������  식별가능����������� ������������������  

단점����������� ������������������  •  객체����������� ������������������  인스턴스����������� ������������������  생성����������� ������������������  시����������� ������������������  마다����������� ������������������  메서드����������� ������������������  중복생성����������� ������������������  문제가����������� ������������������  여전히����������� ������������������  

존재함����������� ������������������  ����������� ������������������  

생성자����������� ������������������  함수����������� ������������������  안에����������� ������������������  this.����������� ������������������  로����������� ������������������  객체����������� ������������������  인스턴스의����������� ������������������  프로퍼티와����������� ������������������  메서드를����������� ������������������  할당하고����������� ������������������  ����������� ������������������  new����������� ������������������  연산자로����������� ������������������  객체����������� ������������������  인스턴스를����������� ������������������  생성����������� ������������������  

Page 4: Javascript 객체생성패턴

var  object  =  new  Object();  this  =  object;  

new����������� ������������������  연산자로����������� ������������������  생성자(=함수)����������� ������������������  실행����������� ������������������  시����������� ������������������  ����������� ������������������  

1.  객체를����������� ������������������  하나����������� ������������������  만들어서����������� ������������������  생성자의����������� ������������������  this가����������� ������������������  가리키도록����������� ������������������  한다.����������� ������������������  

2.  생성자����������� ������������������  내부의����������� ������������������  코드가����������� ������������������  실행된다.����������� ������������������  

3.  생성된����������� ������������������  객체를����������� ������������������  반환한다.����������� ������������������  

그냥����������� ������������������  생성자(=함수)����������� ������������������  실행����������� ������������������  시����������� ������������������  ����������� ������������������  

1.  생성자����������� ������������������  내부의����������� ������������������  코드가����������� ������������������  실행된다.����������� ������������������  ����������� ������������������  

전역����������� ������������������  스코프에서����������� ������������������  실행����������� ������������������  시����������� ������������������  ����������� ������������������  this는����������� ������������������  글로벌����������� ������������������  객체(브라우저에선����������� ������������������  window객체)를����������� ������������������  가리킨다.����������� ������������������  

return  object;    

Page 5: Javascript 객체생성패턴

세가지����������� ������������������  모두����������� ������������������  함수가����������� ������������������  실행될����������� ������������������  때����������� ������������������  this����������� ������������������  (����������� ������������������  실행����������� ������������������  컨텍스트����������� ������������������  )����������� ������������������  가����������� ������������������  모두����������� ������������������  다르며����������� ������������������  효과도����������� ������������������  다릅니다.����������� ������������������  

Page 6: Javascript 객체생성패턴

객체와����������� ������������������  함수의����������� ������������������  생성����������� ������������������  시����������� ������������������  차이����������� ������������������  

참조타입(=����������� ������������������  객체)����������� ������������������  

객체, 배열, 함수  

원시타입����������� ������������������  

모든 참조타입은 생성 시 __proto__  프로퍼티를 가지며  모든 함수는 생성 시 prototype  프로퍼티를 가진다.  

__proto__����������� ������������������  :����������� ������������������  해당����������� ������������������  인스턴스가����������� ������������������  상속받는����������� ������������������  객체를����������� ������������������  가리킴.����������� ������������������  가리키는����������� ������������������  객체의����������� ������������������  모든����������� ������������������  프로퍼티와����������� ������������������  메서드를����������� ������������������  접근하여����������� ������������������  사용가능����������� ������������������  prototype����������� ������������������  :����������� ������������������  ����������� ������������������  ??����������� ������������������  

숫자, 문자열,  boolean  

Page 7: Javascript 객체생성패턴

함수의����������� ������������������  생성����������� ������������������  특성����������� ������������������  

함수를 하나 만들면 함수라는 객체만 생성되는것이 아니라 동시에  함수의 prototype 프로퍼티가 가리키는 빈 객체도 함께 생성된다.  

prototype  

함수  

constructor  

객체  함수의 프로토타입 객체  

Page 8: Javascript 객체생성패턴

인스턴스의����������� ������������������  생성����������� ������������������  

이 함수를 new  연산자를 이용하여 실행해서 만든 인스턴스 객체는  함수의 prototype 프로퍼티가 가리키는 객체를 __proto__가 가리키는 채로 생성된다.    

prototype  

함수 (생성자)  

constructor  

객체  

__proto__  

인스턴스 객체  

new����������� ������������������  함수()����������� ������������������  가����������� ������������������  반

환����������� ������������������  

Page 9: Javascript 객체생성패턴

프로토타입����������� ������������������  체인����������� ������������������  

객체의 인스턴스의 프로퍼티나 메서드에 식별자 문자열로 접근 할 때,    인스턴스 객체 스스로가 가지고 있는지 둘러보고 없으면  인스턴스객체의 __proto__ 가 가리키는 객체에서 찾아본다.  

prototype  

함수1����������� ������������������  (생성자)����������� ������������������  

Constructor  __proto__  

함수1의 prototype객체  

__proto__  

인스턴스 객체  new����������� ������������������  함수

1()����������� ������������������  가����������� ������������������  반환한����������� ������������������  

prototype  

함수2����������� ������������������  (생성자)����������� ������������������  

Constructor  __proto__  

함수2의 prototype객체  

instance.getName()����������� ������������������  처럼����������� ������������������  

Object.prototype    

Page 10: Javascript 객체생성패턴

프로토타입패턴����������� ������������������  ����������� ������������������  

장점����������� ������������������  •  메서드����������� ������������������  중복문제����������� ������������������  해결����������� ������������������  

단점����������� ������������������  •  프로토타입의����������� ������������������  프로퍼티중����������� ������������������  객체는����������� ������������������  인스턴스객체에����������� ������������������  참조로����������� ������������������  상

속이����������� ������������������  되므로����������� ������������������  인스턴스끼리����������� ������������������  프로퍼티가����������� ������������������  공유되는����������� ������������������  문제가����������� ������������������  발생!����������� ������������������  클래스의����������� ������������������  스태틱����������� ������������������  멤버����������� ������������������  처럼����������� ������������������  ㅠ����������� ������������������  

객체����������� ������������������  리터럴을����������� ������������������  사용하면����������� ������������������  ����������� ������������������  새로운����������� ������������������  객체로����������� ������������������  덮어씌우게����������� ������������������  되므로����������� ������������������  주의!����������� ������������������  

프로토타입����������� ������������������  체인의����������� ������������������  탐색은����������� ������������������  런타임����������� ������������������  시����������� ������������������  이루어지므로����������� ������������������  인스턴스가����������� ������������������  참조하고����������� ������������������  있는����������� ������������������  프로토타입의����������� ������������������  프로퍼티나����������� ������������������  메서드가����������� ������������������  변경되면����������� ������������������  즉시����������� ������������������  인스턴스에����������� ������������������  반영되므로����������� ������������������  주의����������� ������������������  

같은����������� ������������������  타입의����������� ������������������  인스턴스라도����������� ������������������  생성된����������� ������������������  타이밍에����������� ������������������  따라����������� ������������������  __proto__가����������� ������������������  가리키는����������� ������������������  프로토타입객체가����������� ������������������  다를����������� ������������������  수����������� ������������������  있다!����������� ������������������  

네이티브����������� ������������������  참조타입(String,����������� ������������������  Array,����������� ������������������  Number����������� ������������������  ..)의����������� ������������������  prototype����������� ������������������  ����������� ������������������  수정은(특히����������� ������������������  오버라이딩은)����������� ������������������  하지말자����������� ������������������  

Page 11: Javascript 객체생성패턴

생성자패턴+프로토타입패턴����������� ������������������  ����������� ������������������  

장점����������� ������������������  •  인스턴스의����������� ������������������  프로퍼티����������� ������������������  공유되는����������� ������������������  

문제����������� ������������������  해결����������� ������������������  

단점����������� ������������������  •  프로토타입의����������� ������������������  생성자와����������� ������������������  프로토

타입의����������� ������������������  블록이����������� ������������������  분리되어있어서����������� ������������������  헷갈려요.����������� ������������������  자바의����������� ������������������  클래스와는����������� ������������������  달라서����������� ������������������  ㅠ����������� ������������������  

커스텀����������� ������������������  참조타입����������� ������������������  정의����������� ������������������  시����������� ������������������  가장����������� ������������������  널리����������� ������������������  쓰이는����������� ������������������  패턴����������� ������������������  

Page 12: Javascript 객체생성패턴

동적프로토타입패턴����������� ������������������  ����������� ������������������  

처음����������� ������������������  인스턴스를����������� ������������������  생성할����������� ������������������  때����������� ������������������  생성자����������� ������������������  자신의����������� ������������������  ����������� ������������������  프로토����������� ������������������  타입을����������� ������������������  확인하고����������� ������������������  원하는����������� ������������������  함수가����������� ������������������  없다면����������� ������������������  설정����������� ������������������  

����������� ������������������  두번째로����������� ������������������  인스턴스를����������� ������������������  생성할����������� ������������������  때����������� ������������������  부터는����������� ������������������  프로토타입

에����������� ������������������  메서드����������� ������������������  할당����������� ������������������  부분이����������� ������������������  실행되지����������� ������������������  않는다����������� ������������������  ����������� ������������������  

하지만����������� ������������������  if의����������� ������������������  조건문����������� ������������������  은����������� ������������������  매번����������� ������������������  ����������� ������������������  실행해야한다는����������� ������������������  비효율은����������� ������������������  존재����������� ������������������  

����������� ������������������  어떻게����������� ������������������  해결할까?����������� ������������������  

장점����������� ������������������  •  자바의����������� ������������������  클래스처럼����������� ������������������  커스텀����������� ������������������  참조타입����������� ������������������  선언을����������� ������������������  생성자����������� ������������������  함수����������� ������������������  한덩어리로����������� ������������������  

끝낼����������� ������������������  수����������� ������������������  있다.����������� ������������������  ����������� ������������������  

단점����������� ������������������  •  프로토타입방식에����������� ������������������  익숙하면����������� ������������������  궂이����������� ������������������  이렇게����������� ������������������  할����������� ������������������  이유가����������� ������������������  전혀����������� ������������������  없다.����������� ������������������  

Page 13: Javascript 객체생성패턴

생성자����������� ������������������  함수를����������� ������������������  ����������� ������������������  사용하지����������� ������������������  않는����������� ������������������  객체����������� ������������������  생성����������� ������������������  패턴����������� ������������������  

When?����������� ������������������  앞서의����������� ������������������  패턴이����������� ������������������  실패할때나����������� ������������������  꼭����������� ������������������  필요한����������� ������������������  이유가����������� ������������������  있을����������� ������������������  경우����������� ������������������  사용.����������� ������������������  

Page 14: Javascript 객체생성패턴

기생생성자����������� ������������������  패턴����������� ������������������  ����������� ������������������  

장점����������� ������������������  •  New����������� ������������������  연산자가����������� ������������������  하는부분을����������� ������������������  오버라이딩해서����������� ������������������  특정객체를����������� ������������������  상속받는����������� ������������������  커스텀객체를����������� ������������������  

만들수����������� ������������������  있는����������� ������������������  팩토리함수가����������� ������������������  가능하다.����������� ������������������  

단점����������� ������������������  •  기본적으로����������� ������������������  팩토리패턴이므로����������� ������������������  Instanceof����������� ������������������  연산자로����������� ������������������  타입을����������� ������������������  알����������� ������������������  수����������� ������������������  없음.����������� ������������������  ����������� ������������������  

New 로 생성자 실행한다는 점 빼고는 팩토리패턴과 동일    

New로 생성자 실행 시 자동 수행되는 객체 생성,  객체 반환 부분을 오버라이딩한다.  

Page 15: Javascript 객체생성패턴

기생생성자����������� ������������������  패턴����������� ������������������  ����������� ������������������  

Object����������� ������������������  가����������� ������������������  아닌����������� ������������������  ����������� ������������������  네이티브����������� ������������������  참조객체인����������� ������������������  Array����������� ������������������  ����������� ������������������  

의����������� ������������������  프로퍼티와����������� ������������������  메서드를����������� ������������������  상속받고����������� ������������������  커스텀����������� ������������������  함수를����������� ������������������  추가한����������� ������������������  

인스턴스����������� ������������������  객체를����������� ������������������  만들어내는����������� ������������������  ����������� ������������������  팩토리함수를����������� ������������������  만들����������� ������������������  수����������� ������������������  있다.����������� ������������������  

 

Page 16: Javascript 객체생성패턴

방탄����������� ������������������  생성자����������� ������������������  패턴����������� ������������������  ����������� ������������������  

장점����������� ������������������  •  New����������� ������������������  객체����������� ������������������  인스턴스가����������� ������������������  가진����������� ������������������  데이터에����������� ������������������  직접접근����������� ������������������  불가능����������� ������������������  

단점����������� ������������������  •  생성자함수와����������� ������������������  객체인스턴스의����������� ������������������  연결이����������� ������������������  존재하지����������� ������������������  않으므로����������� ������������������  Instanceof����������� ������������������  연산자로����������� ������������������  

타입을����������� ������������������  알����������� ������������������  수����������� ������������������  없음.����������� ������������������  ����������� ������������������  

객체를 생성할 때 넘겨준  초기화 파라메터의 값을 생성자 실행 시 만들어진  

클로저에만 존재하도록 하여  이 값이 위치하는 곳에 접근이 불가능하도록 한다  

 

Page 17: Javascript 객체생성패턴

끝����������� ������������������  ����������� ������������������  

수고하셨습니다����������� ������������������  ����������� ������������������  

이제����������� ������������������  자바스크립트����������� ������������������  상속패턴을����������� ������������������  익히실����������� ������������������  준비가����������� ������������������  되셨습니다.����������� ������������������  ����������� ������������������  

다음����������� ������������������  시간에����������� ������������������  자바스크립트����������� ������������������  상속패턴����������� ������������������  으로����������� ������������������  다시만나요����������� ������������������  ����������� ������������������  

제발~����������� ������������������  ����������� ������������������