본문 바로가기

Programming/Javascript

 (78)
13. Javascript 객체지향 프로그래밍(2) - 프로토타입 상속 구현 3 이번에는 앞서 진행했던 extend( ) 함수의 작성 예제를 사용해, 우리가 예제로 만들어 보았던 Rapper 객체를 통한 자식 객체를 생성한 후 해당 자식 객체를 확장하는 사례를 만들어 보겠습니다. var Rapper = { name : "QM", getName : function() { return this.name; }, setName : function(value) { this.name = value; } }; function create_object(o) { function F() {} F.prototype = o; return new F(); } function extend(obj, prop) { if( !prop ) { prop = obj; obj = this; console.log(this..
13. Javascript 객체지향 프로그래밍(2) - 프로토타입 상속 구현 2 지금까지 새로 생성된 객체(자식 객체) 들이 부모 객체(생성자 함수)의 메서드를 그대로 '상속'받아 사용하는 케이스를 살펴보았습니다. 여기에 하나 더 필요한 기능이 있죠. 부모 객체를 상속하는 자식 객체들이 자신들만의 고유의 메서드를 추가하는 기능입니다(또는 기존 메서드를 재정의하여 자신만의 메서드로 사용). 사실 이 기능은 크게 어려울 것이 없습니다. 아래와 같이 특정 객체의 메서드를 선언하고 정의하면 끝나는 일이니까요. hypeBoy.setName = function(value) { //... }; hypeBoy.getName = function() { //... }; 하지만 이 단순한 방법은 코드가 복잡해지게 만드는 원인이 됩니다. 이제부터는 jQuery의 extend( ) 함수를 사용하는 방법과 ..
13. Javascript 객체지향 프로그래밍(2) - 프로토타입 상속 구현 1 우선은 상속 개념을 구현하는 데 있어서 Javascript의 프로토타입 개념을 이용해 구현하는 방식을 살펴보도록 하겠습니다. 다시 한번 미리 말씀드리지만, 이 챕터의 내용들을 원활하게 이해하기 위해서는 Javascript의 프로토타입에 대한 기본 동작 원리를 이해하고 있어야 합니다. 아직 이해가 부족하거나 잘 생각이 나지 않는다면, 앞서서 살펴보았던 내용들을 다시 한번 복습하고 오시기 바랍니다. 우선은 아래의 코드를 프로토타입 동작 기본 원리에 의거해 해석해 보도록 하겠습니다. function create_object(o) { function F() {} F.prototype = o; return new F(); } 위의 코드는 더글라스 크락포드의 Javascript에서의 객체 상속 방법 예제 코드입니다..
13. Javascript 객체지향 프로그래밍(1) - 클래스 구현 2 앞서 살펴본 클래스 구현 예시는, 생성자 함수를 선언하고 나서 new 키워드를 통해 이 생성자 함수를 [[Prototype]]으로 바라보게 되는 객체를 생성해 부모-자식의 관계를 형성하는 기본적인 예제를 살펴보았습니다. 이와 관련하여, 더글라스 크락포드가 제시한 prototype 기반의 메서드 선언 방식도 살펴보도록 하겠습니다. 아래 예제 코드는 최상위 Function 객체의 프로토타입에 정의한 메서드입니다. 해당 메서드를 통해, 특정 객체의 프로토타입 메서드를 선언하는 구조를 살펴봅시다. Function.prototype.method = function(name, func) { if(!this.prototype[name]){ this.prototype[name] = func; } }; 위에서 선언한 m..
13. Javascript 객체지향 프로그래밍(1) - 클래스 구현 1 우선 JAVA나 C# 등의 객체지향 프로그래밍 언어와 Javascript에서의 클래스 구현 방식과 개념은, 상당히 다른 구조로 설계되어 있습니다. 전자가 기본적으로 클래스 구조가 설계도로서 존재하고, 이를 바탕으로 인스턴스가 생성되는 구조인데 반해 Javascript는 모든 것이 객체를 중심으로 돌아갑니다. 현재로서는 자세히 이해가 가지 않을 수 있지만, 일단은 이렇게 기억합시다. Javascript의 객체 중심의 구조를 통해, 다른 프로그래밍 언어에서 사용하는 클래스의 개념을 구현한다 - 정도로요. 우선, 이 챕터의 아티클을 학습하기 위해서는 앞서 배웠던 프로토타입( [[Prototype]], prototype )에 대한 이해가 선행되어야 합니다. 중간에 이해가 가지 않는 부분이 있다면, Javascr..
12. Javascript 클로저(Closure)(3) - 클로저 주의사항 이번 아티클에서는 이제까지 살펴본 클로저의 기본 특성 이외에, 주의하거나 기억해야 할 예외적인 상황들에 대해서 하나씩 살펴보도록 하겠습니다. 우선, 클로저의 프로퍼티 값 - 즉 클로저가 참조하게 되는 자유 변수는 무의식적으로 '읽기'를 통한 참조만 가능하다고 생각하기 쉽습니다. 하지만 이 자유 변수는 클로저(함수)를 통해서 쓰기도 가능하다는 특징을 갖고 있습니다. 만일 클로저 함수를 반복해서 호출하여 실행할 경우에는 그 값이 바뀔 수 있다는 점을 기억해야 합니다. 예제를 통해서 살펴보겠습니다. function outerFunc(argNum) { var num = argNum; return function(x) { num += x; console.log('num: ' + num); } } var resul..
12. Javascript 클로저(Closure)(2) - 클로저의 활용 3 지금까지 배운 클로저 함수 활용 예제의 마지막입니다. 이번에는 흔히 사용하게 되는 setTimeout( ) 함수와 연계하여, 클로저를 활용하는 예제를 살펴보도록 하겠습니다. 우선 setTimeout( ) 함수의 가장 기본적인 사용 형태인 두 개의 인자 - 즉 function / delay만을 사용하는 상황을 가정해 봅시다. 첫 번째 인자 function은 말 그대로 함수를 입력하게 됩니다. 이 함수의 실행을 통제하려는 목적을 갖게 되지요. 이번 아티클에서는 함수 변수 형태로 전달해 보겠습니다. 두 번째 인자 delay에는 밀리 초 단위 숫자의 시간 간격으로 해당 함수를 호출하게 됩니다. 5000을 입력하면 5초 후에 function으로 전달한 함수가 실행되지요. 그리고, 여기서 인자로 사용할 functi..
12. Javascript 클로저(Closure)(2) - 클로저의 활용 2 앞서 살펴본 클로저의 활용 예제 첫 번째는, 사용자가 정의한 함수나 이벤트를 특정 함수의 실행과 연결할 수 있는 수단으로써 사용한 케이스를 다룬 내용입니다. 이번 아티클에서 다룰 클로저의 예제는 함수의 캡슐화를 목적으로 사용하는 예시입니다. 객체지향 언어를 공부하신 분들이라면, 캡슐화의 목적은 잘 알고 계실 것입니다. 쉽게 말해, Javascript에서 중요한 변수나 데이터가 전역 변수로 선언되어 손쉽게 접근해 수정이 발생하거나 다른 라이브러리와 충돌하는 현상을 방지하기 위해 해당 변수의 스코프를 변환하는 등의 방식을 취하는 것을 의미합니다. 한 가지 예제를 생각해 보겠습니다. 어떤 문장을 가진 배열이 있고, 비어있는 인덱스에 사용자로부터 파라미터 값을 받아 해당 인자를 채워 넣는 함수를 작성한다고 가정..

티스토리툴바