Programming/Javascript (78) 썸네일형 리스트형 13. Javascript 객체지향 프로그래밍(5) - subClass 구현하기 2 먼저 앞서 만들어본 예제 코드를 도식화해보도록 하겠습니다. function subClass(obj) { var parent = this; var F = function() {}; var child = function() {}; F.prototype = parent.prototype; child.prototype = new F(); child.prototype.constructor = child; child.parent = parent.prototype; child.parent_constructor = parent; return child; } 이번에 추가할 라인은, 우리가 subClass에 인자로 전달하는 obj 객체에 대한 처리입니다. 여기서는 자식 클래스에 새로운 프로퍼티를 추가하여 자식 클래스를 확.. 13. Javascript 객체지향 프로그래밍(5) - subClass 구현하기 1 이제부터는 앞서 배운 프로토타입 체이닝, extend 함수, 인스턴스 생성 시점의 생성자 호출 기능 등을 활용하여 subClass 함수를 만드는 예제를 하나씩 살펴볼 예정입니다. subClass의 기능을 먼저 정의해 보도록 하겠습니다. subClass라는 함수는 우선 객체(변수, 메서드)를 파라미터 인자로 받습니다. 부모 함수에서 subClass를 실행하게 되면, 인자로 전달된 객체의 프로퍼티를 포함하는 자식 클래스를 생성하는 기능을 하게 됩니다. 예시를 보겠습니다. 우선, 부모 클래스를 하나 생성해 보겠습니다. var SuperClass = subClass(obj); 위에서 subClass(obj)라는 라인은 명시적으로 부모 클래스를 표시하지 않았습니다. 이는 결국, 최상위 함수 클래스 Function.. 13. Javascript 객체지향 프로그래밍(4) - 캡슐화 구현 2 앞선 아티클에서 작성한 예제 코드를 다시 한번 살펴보겠습니다. 이 코드는 사용하는 데 있어서 한 가지 문제점이 있다는 말씀을 드렸죠? var Rapper = function(arg) { var rapName = arg ? arg : "MC JOHN DOE"; return { getName : function() { return rapName; }, setName : function(arg) { rapName = arg; } }; }; var hype = Rapper(); // var hype = new Rapper(); 도 가능 console.log(hype.getName()); hype.setName("JAMBINO"); console.log(hype.getName()); 여기서 반환받은 객체는 Rap.. 13. Javascript 객체지향 프로그래밍(4) - 캡슐화 구현 1 Javascript 역시 클래스와 같은 일정 단위에서 변수와 메서드 같은 정보 값들에 대한 정보 공개 여부를 결정할 수 있어야 합니다. 일반적으로 JAVA나 C# 등의 언어에서는 public / private와 같은 키워드를 통해서 단위 별 정보 공개 여부를 결정합니다. 하지만 Javascript에는 이러한 키워드를 지원하지 않기 때문에, 다른 방법으로 정보 은닉을 설정해야 합니다. 우선 가장 기본적으로 사용하는 방식은, [var]의 사용입니다. (생성자)함수를 선언할 때, 특정 프로퍼티를 var로 선언하게 되면 이는 다른 OOP 언어들의 private와 같은 역할을 하게 됩니다. 외부에서 직접 접근할 수 없게 되고, get/set 성격의 해당 클래스 내의 메서드를 통해서만 접근할 수 있게 되는 구조를 .. 13. Javascript 객체지향 프로그래밍(3) - 클래스 기반 상속 구현 4 앞서 작성했던 코드를 다시 한번 되짚어 보겠습니다. 이전에 작성했던 예제는, 자식 객체에서 자식 객체만의 프로퍼티를 prototype을 통해 선언하게 될 경우 부모 객체에 간섭이 발생하는 점을 문제점으로 지적했습니다. 이 코드를 도식화해서 문제가 해결되었는지를 살펴봅시다. function Rapper(arg) { this.rapName = arg; } Function.prototype.method = function(name, func){ this.prototype[name] = func; }; Rapper.method("setName", function(value){ this.rapName = value; }); Rapper.method("getName", function(){ return this.r.. 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(.. 이전 1 2 3 4 5 6 ··· 10 다음
