본문 바로가기

Programming

 (465)
13. Javascript 객체지향 프로그래밍(3) - 클래스 기반 상속 구현 3 앞의 아티클에서 만들어본 예제에 대해, 한 가지 약점이 더 남아있다는 말씀을 드렸습니다. 그럼 예제를 다시 한번 살펴보면서 어떤 점이 보완되어야 하는지 살펴보겠습니다. function Rapper(arg){ this.rapName = arg; } Rapper.prototype.setName = function(value) { this.rapName = value; }; Rapper.prototype.getName = function() { return this.rapName; }; function Smtm(arg){ Rapper.apply(this, arguments); } var hype = new Rapper("SIMON D"); console.dir(hype); Smtm.prototype = hyp..
13. Javascript 객체지향 프로그래밍(3) - 클래스 기반 상속 구현 2 앞서 살펴본 예제에서, 클래스 기반의 상속을 가장 기본적인 형태로 구현해 보았습니다. 그리고 이 구조는 하위 인스턴스 생성 단계에서 부모 클래스의 생성자를 호출하는 과정이 없어서 문제가 된다는 점도 확인했습니다. 예제를 아래와 같이 다시 한번 살펴보겠습니다. function Rapper(arg){ this.rapName = arg; } Rapper.prototype.setName = function(value) { this.rapName = value; }; Rapper.prototype.getName = function() { return this.rapName; }; function Smtm(arg){ } var hype = new Rapper("SIMON D"); console.dir(hype); ..
13. Javascript 객체지향 프로그래밍(3) - 클래스 기반 상속 구현 1 이번 아티클부터는 클래스 기반의 상속 체계를 만들어 보겠습니다. 앞서 배운 프로토타입 기반의 상속 과정과의 차이는, 객체 리터럴이 아닌 클래스 역할을 하는 함수를 통해서 상속을 구현한다는 점입니다. 글로만 읽어서는 와닿는 개념은 아닙니다. 우선 예제를 살펴보도록 합시다. function Rapper(arg){ this.rapName = arg; } Rapper.prototype.setName = function(value) { this.rapName = value; }; Rapper.prototype.getName = function() { return this.rapName; }; function Smtm(arg){ } var hype = new Rapper("SIMON D"); console.dir(..
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..

티스토리툴바