Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
허 영남
JavaScript
목표
• 자바 스크립트로 객체지향적인 프로그램을 하는 방법 습득 .
• 자바스크립트의 생성자 , 객체 리터럴 , 모듈화 , 컨텍스트 등
의 사용
• 자신만의 framework 설계
목차
1. 객체
2. 싱글톤과 네임스페이스
3. 함수
4. 클로저
5. 컨텍스트
6. 내장 타입 확장하기
7. DOM
8. 클래스 설계
9. Q & A
1. 객 체
1-1. 객체란
• 자바스크립트의 객체는 프로퍼티의 집합으로 이름과 값이 있는
해시구조이다 . C# 에선 Dictionary 클래스로 해시객체를 생성
할 수 있다 . 하지만 자바스크립트에선 모든 객체 그 자체가 해
시이...
1-1. 객체란
1-2. 객체를 생성하는 두가지 방법
1-3. JSON ( 객체 리터럴 )
• 자바스크립트 객체 표기법을 일컫는 말이다 .
• new Object(); 선언한 객체와 { } 로 선언한 객체는 완전히 동
일하다 . 다만 { } 로 선언한 객체가 확장이 더 용...
1-3. 객체 열거 ( 리플렉션 )
• 리플렉션이란 객체가 어떤 속성과 메소드을 가지고 있는지 런
타임에 검사하는 것을 말한다 .
• C# 에서는 System.Type Class 와 System.Reflection
na...
1-4. 객체 열거 예 – Ext.apply
Ext.apply = function(object, config, defaults) {
if (defaults) {
Ext.apply(object, defaults);
}
i...
1-4. 객체 열거 예 – jquery extend
$.extend
2. 싱글톤과 네임스페이스
2-1. 싱글톤 패턴이란
• 전역에 단 하나의 인스턴스를 보장하는 디자인 패턴 중 하나이
다 .
• 기존 OO 언어에선 static 키워드로 구현된다 .
• 자바스크립트에선 전역 객체를 기술하는 것만으로도 이를 구
현할...
2-2. 네임스페이스
GiantCorp 네임스페이스에 Common 과 ErrorCodes 하위
패키지를 생성하고 ErrorCodes 의 하위에 다시
DetailErrorCode 를 생성한다 . 이러한 방법으로 코드를 조...
실습
• 네임스페이스를 생성하고 버전 정보를 담는 프로퍼티와 객체
열거를 위함 메소드를 정의한다 .
• 객체 열거를 위한 메소드는 객체 두개를 인자로 받아 두번째 인
자의 속성 전부를 첫번째 인자에 추가하는 메소드이다 ...
3. 함수
3-1. 함수란
• 함수는 객체이다 . 객체가 자신만의 메소드와 속성을 가질 수
있듯이 함수 또한 객체이므로 자신만의 메소드와 속성을 가질
수 있다 . 이렇게 정의된 메소드와 속성은 기존 OO 언어의
static 한 것...
3-2. 함수의 두 가지 인스턴스 레벨 메소
드
• Function 개체는 apply(), call() 메소드를 제공하여 준다 .
이 두 메소드는 인자를 넘기는 방법만 다를뿐 동일한 기능을 수
행한다
• 두 메소드는 함...
3-2. 함수의 두 가지 인스턴스 레벨 메소
드
var Parent = function(){ }
var Child = function(){
Parent.apply(this, arguments);
}
Var O = new...
4. 클로저
4. 클로저
• Scope 의 제약을 받지 않는 변수들을 포함한 코드 블록이다 .
• 실행할 코드 블럭과 자유 변수들에 대한 바인딩을 제공하는 평
가환경의 결합에서 탄생한 것으로 함수가 실행되는데 필요한
정보를 담고 있...
4. 클로저
var obj = { };
var A = function(){
var str = " 나는 누구인가 ?";
obj.method = function(){
return str;
}
};
A();
obj.metho...
5. 컨텍스트
5. 컨텍스트
• 자바스크립트는 어떤 형태로든 컨텍스트에 속해 코드가 실행된
다 . 컨텍스트란 해당 코드가 실행된 범위 인 this 를 통해 작동
한다 . 이는 일반 OO 언어에서도 있는 개념이지만 자바스크립
트는 극단...
실습
• 익명함수를 정의하고 내부에 private 멤버를 구현한다 .
• Public 멤버는 네임스페이스의 하위에 추가함으로써 외부에 드
러낸다
(function($){
var privateMember;
$.apply(...
6. Butill – in 확장
6. Butill – in 확장
String.prototype.trim = function(){
var reg = /^[sxA0]+|
[sxA0]+$/g;
return function(){
this.replace(reg...
실습
• 기존에 제공되는 메서드 외에 추가로 원하는 메서드를 추가한
다 .
• 실습으로 String, Array 에만 메서드를 확장해 본다 .
MyFrameWork.apply(String.prototype, {
trim...
7. DOM
7-1. DOM 이란
• DOM 이란 HTML 문서를 조작하기 위한 방법을 제공하여 주는 인터
페이스이다 . 언어에 종속적이지 않으며 다른 언어에서도 사용할 수
있다고 한다 .
• document.getElementBy...
7-2. DOM 확장하기
• DOM 이 제공해 주는 기능들은 그다지 유용하지가 않다 . 그러므로
DOM 을 조작하는 확장 메소드를 정의 할 수 있다 .
• 대표적인 DOM 메소드는 다음과 같다 .
• getElement...
실습
• DOM 이 제공하는 기능이 제한적이므로 추가로 엘리먼트를 다
룰 수 있는 메서드를 정의해 본다 .
(function($){
// 확장 메소드 정의
})(MyFrameWork);
8. 클래스 설계하기
8-1. 클래스 설계
var MyClass = function(){
// 멤버 초기화는 이곳에
}
MyClass.prototpype = {
// 메소드와 상수는 이곳에
}
8-2. 상속
var ParentClass = function(){
// 멤버 초기화는 이곳에
}
ParentClass.prototpype = {
// 메소드와 상수는 이곳에
}
var ChildClass = funct...
8-3. prototype 란
• Function 개체는 apply(), call() 메소드 외에 prototype 라는
객체를 자신의 프로퍼티로 가지고 있다 . 이 객체는
constructor 라는 속성을 가진 객체로...
• Ext.extend
• Backbone.Model.extend
• Backbone.Collection.extend
8-2. 상속의 예
실습
• Ajax 요청 클래스를 설계한다 . 이 클래스는
MyFrameWork.data 패키지 밑에 하위로 들어간다 .
MyFrameWork.Data.XHRObject = (function(){
return {
}
})...
Q & A
Prochain SlideShare
Chargement dans…5
×

Java script

Java script OOP

  • Soyez le premier à commenter

Java script

  1. 1. 허 영남 JavaScript
  2. 2. 목표 • 자바 스크립트로 객체지향적인 프로그램을 하는 방법 습득 . • 자바스크립트의 생성자 , 객체 리터럴 , 모듈화 , 컨텍스트 등 의 사용 • 자신만의 framework 설계
  3. 3. 목차 1. 객체 2. 싱글톤과 네임스페이스 3. 함수 4. 클로저 5. 컨텍스트 6. 내장 타입 확장하기 7. DOM 8. 클래스 설계 9. Q & A
  4. 4. 1. 객 체
  5. 5. 1-1. 객체란 • 자바스크립트의 객체는 프로퍼티의 집합으로 이름과 값이 있는 해시구조이다 . C# 에선 Dictionary 클래스로 해시객체를 생성 할 수 있다 . 하지만 자바스크립트에선 모든 객체 그 자체가 해 시이다 . • 해시 이므로 문자열을 key 로 사용하여 value 에 접근할 수있 다 . 이러한 형태를 연관배열이라 하며 이것을 이용하여 리플렉 션에 유용하게 사용할 수 있다 . • 해시 (Hash) 란 키 (Key) 와 값 (value) 이 짝을 이루는 데이터 타입을 말한다 .
  6. 6. 1-1. 객체란
  7. 7. 1-2. 객체를 생성하는 두가지 방법
  8. 8. 1-3. JSON ( 객체 리터럴 ) • 자바스크립트 객체 표기법을 일컫는 말이다 . • new Object(); 선언한 객체와 { } 로 선언한 객체는 완전히 동 일하다 . 다만 { } 로 선언한 객체가 확장이 더 용이하며 구조 적인 모습을 띄게 된다 . var obj = { property: ‘ 속성’ , method: function(){}, obj2: { obj2Property: “ 속성” } }
  9. 9. 1-3. 객체 열거 ( 리플렉션 ) • 리플렉션이란 객체가 어떤 속성과 메소드을 가지고 있는지 런 타임에 검사하는 것을 말한다 . • C# 에서는 System.Type Class 와 System.Reflection namespace 가 리플렉션 서비스에 이용된다 . • for/in 루프를 이용하여 객체의 모든 프로퍼티를 열거 할 수 있 다 . 이는 임의의 속성에 접근하거나 특정 타입에 대한 반복 작 업을 한다거나 상속 등에 유용하게 사용될 수 있다 . for (var attr in obj){ obj[attr]; }
  10. 10. 1-4. 객체 열거 예 – Ext.apply Ext.apply = function(object, config, defaults) { if (defaults) { Ext.apply(object, defaults); } if (object && config && typeof config === 'object') { var i, j, k; for (i in config) { object[i] = config[i]; } if (enumerables) { for (j = enumerables.length; j--;) { k = enumerables[j]; if (config.hasOwnProperty(k)) { object[k] = config[k]; } } } } return object; };
  11. 11. 1-4. 객체 열거 예 – jquery extend $.extend
  12. 12. 2. 싱글톤과 네임스페이스
  13. 13. 2-1. 싱글톤 패턴이란 • 전역에 단 하나의 인스턴스를 보장하는 디자인 패턴 중 하나이 다 . • 기존 OO 언어에선 static 키워드로 구현된다 . • 자바스크립트에선 전역 객체를 기술하는 것만으로도 이를 구 현할 수 있다 .
  14. 14. 2-2. 네임스페이스 GiantCorp 네임스페이스에 Common 과 ErrorCodes 하위 패키지를 생성하고 ErrorCodes 의 하위에 다시 DetailErrorCode 를 생성한다 . 이러한 방법으로 코드를 조직 화하고 모듈화 할 수 있다 . Ext.namespace(“GiantCorp”, “GiantCorp.Common”, “GiantCorp.ErrorCodes”); var GiantCorp = { }; GiantCorp.Common = { }; GiantCorp.ErrorCodes = { }; GiantCorp.ErrorCodes.DetailErrorCode = {};
  15. 15. 실습 • 네임스페이스를 생성하고 버전 정보를 담는 프로퍼티와 객체 열거를 위함 메소드를 정의한다 . • 객체 열거를 위한 메소드는 객체 두개를 인자로 받아 두번째 인 자의 속성 전부를 첫번째 인자에 추가하는 메소드이다 . var MyFrameWork = { version: ‘’, apply: function(){ } }
  16. 16. 3. 함수
  17. 17. 3-1. 함수란 • 함수는 객체이다 . 객체가 자신만의 메소드와 속성을 가질 수 있듯이 함수 또한 객체이므로 자신만의 메소드와 속성을 가질 수 있다 . 이렇게 정의된 메소드와 속성은 기존 OO 언어의 static 한 것들과 동일하다 할 수 있다 . • 또한 함수는 그 자체로 생성자이기도 하다 . • 익명함수를 사용하여 코드를 캡슐화할 수도 있다 . (function(){ // 구현 })();
  18. 18. 3-2. 함수의 두 가지 인스턴스 레벨 메소 드 • Function 개체는 apply(), call() 메소드를 제공하여 준다 . 이 두 메소드는 인자를 넘기는 방법만 다를뿐 동일한 기능을 수 행한다 • 두 메소드는 함수가 생성자의 역할을 할 때 해당 생성자 내부의 this 키워드가 포커싱하는 객체를 강제할 수 있는 역할을 한다 . 이를 컨텍스트의 강제라고 표현할 수 있다 . 이들 메소드는 상속을 구현할 시 부모 클래스의 멤버를 초기화 하는 용도로 사용되는 중요 메소드이다 .
  19. 19. 3-2. 함수의 두 가지 인스턴스 레벨 메소 드 var Parent = function(){ } var Child = function(){ Parent.apply(this, arguments); } Var O = new Child(); * Sencha – Ext.extend 함수 내 subclass = overrides.constructor !== objectConstructor ? overrides.constructor : function() { superclass.apply(this, arguments); };
  20. 20. 4. 클로저
  21. 21. 4. 클로저 • Scope 의 제약을 받지 않는 변수들을 포함한 코드 블록이다 . • 실행할 코드 블럭과 자유 변수들에 대한 바인딩을 제공하는 평 가환경의 결합에서 탄생한 것으로 함수가 실행되는데 필요한 정보를 담고 있다 . • 쉽게 중첩함수에서 상위함수의 변수를 하위 함수가 접근하게 되고 하위 함수가 어떤 형태로든 밖으로 살아나가면 이는 클로 저가 된다 . • 클로저는 이벤트지향 프로그래밍과 캡슐화에 필수적이지만 절 대로 남발되서는 안된다 . 이는 곧 메모리 누수와 연결되기 때 문이다
  22. 22. 4. 클로저 var obj = { }; var A = function(){ var str = " 나는 누구인가 ?"; obj.method = function(){ return str; } }; A(); obj.method();
  23. 23. 5. 컨텍스트
  24. 24. 5. 컨텍스트 • 자바스크립트는 어떤 형태로든 컨텍스트에 속해 코드가 실행된 다 . 컨텍스트란 해당 코드가 실행된 범위 인 this 를 통해 작동 한다 . 이는 일반 OO 언어에서도 있는 개념이지만 자바스크립 트는 극단적인 모습을 띈다 . 쉽게 말해 해당 블럭내에서 this 가 무엇을 레퍼런스하는 가를 뜻하는 것이 컨텍스트이다 . 함수에서 했던 apply(), call() 은 이 컨텍스트를 강제로 바꿀 수 있는 역할을 하는 메소드이다 .
  25. 25. 실습 • 익명함수를 정의하고 내부에 private 멤버를 구현한다 . • Public 멤버는 네임스페이스의 하위에 추가함으로써 외부에 드 러낸다 (function($){ var privateMember; $.apply($, extend: function(){} ); })(MyFrmaeWork);
  26. 26. 6. Butill – in 확장
  27. 27. 6. Butill – in 확장 String.prototype.trim = function(){ var reg = /^[sxA0]+| [sxA0]+$/g; return function(){ this.replace(reg,''); }; }();
  28. 28. 실습 • 기존에 제공되는 메서드 외에 추가로 원하는 메서드를 추가한 다 . • 실습으로 String, Array 에만 메서드를 확장해 본다 . MyFrameWork.apply(String.prototype, { trim : function(){}, stripTag : function(){} }); MyFrameWork.apply(Array.prototype, { reverse : function(){}, each : function(){} });
  29. 29. 7. DOM
  30. 30. 7-1. DOM 이란 • DOM 이란 HTML 문서를 조작하기 위한 방법을 제공하여 주는 인터 페이스이다 . 언어에 종속적이지 않으며 다른 언어에서도 사용할 수 있다고 한다 . • document.getElementById() 의 실행결과로 htmlElement 객체를 리턴한다 . 우리가 흔히 사용하는 innerHTML, value 등의 속성들을 가지고 있는 객체를 HtmlElement 라고 부른다 . //el 은 HtmlElement var el = document.getElementById(“id”);
  31. 31. 7-2. DOM 확장하기 • DOM 이 제공해 주는 기능들은 그다지 유용하지가 않다 . 그러므로 DOM 을 조작하는 확장 메소드를 정의 할 수 있다 . • 대표적인 DOM 메소드는 다음과 같다 . • getElementById(), createElement(), appendChild(), insertBerfore() 등
  32. 32. 실습 • DOM 이 제공하는 기능이 제한적이므로 추가로 엘리먼트를 다 룰 수 있는 메서드를 정의해 본다 . (function($){ // 확장 메소드 정의 })(MyFrameWork);
  33. 33. 8. 클래스 설계하기
  34. 34. 8-1. 클래스 설계 var MyClass = function(){ // 멤버 초기화는 이곳에 } MyClass.prototpype = { // 메소드와 상수는 이곳에 }
  35. 35. 8-2. 상속 var ParentClass = function(){ // 멤버 초기화는 이곳에 } ParentClass.prototpype = { // 메소드와 상수는 이곳에 } var ChildClass = function(){ // 부모생성자 호출 생성자에서 base() 를 호출하는 것과 동일 ParentClass.apply(this); } ChildClass.prototype = new ParentClass(); ChildClass.prototype.constructor = ChildClass; ChildClass.prototype.childMethod = function(){ }
  36. 36. 8-3. prototype 란 • Function 개체는 apply(), call() 메소드 외에 prototype 라는 객체를 자신의 프로퍼티로 가지고 있다 . 이 객체는 constructor 라는 속성을 가진 객체로 초기화된다 • 자바스크립트 객체는 자신의 생성자의 prototype 를 가르키는 __proto__ 을 가진다 . • 객체가 속성을 읽으려 할 때 일단 자기 자신을 뒤져 해당 속성이 있는 지 검사하고 있으면 이를 반환한다 ( 속성을 this 에서 검색 ). 만약 없 으면 자신의 생성자 함수의 prototype 을 뒤진다 . 여기에도 없으면 또다시 생성자 함수의 __proto__ 로 가서 부모클래스의 prototype var MyClass = function(){} MyClass.prototype.constructor -> MyClass
  37. 37. • Ext.extend • Backbone.Model.extend • Backbone.Collection.extend 8-2. 상속의 예
  38. 38. 실습 • Ajax 요청 클래스를 설계한다 . 이 클래스는 MyFrameWork.data 패키지 밑에 하위로 들어간다 . MyFrameWork.Data.XHRObject = (function(){ return { } })(); MyFrameWork.Data.Connection = function(){ } MyFrameWork.Data.Connection.prototype = { }
  39. 39. Q & A

×