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