소년코딩

자바스크립트의 여러가지 특성으로 객체지향 언어의 특성을 구현해낼 수 있다.

프로토타입 기반인 자바스크립트는 객체의 자료구조, 메서드등을 동적으로 바꿀수 있다.

자바스크립트는 거의 모든 것이 객체이고, 특히 함수 객체로 많은 것을 구현해 낼 수 있는데

클래스, 생성자, 메서드도 모두 함수로 구현이 가능하다.

function Blog(name) {
     this.name = name;
 
     this.getName = function() {
          return this.name;
     }
 
     this.setName = function(name) {
          this.name = name;
     }
}
 
var blog = new Blog('oppa');
console.log(blog.getName());   // 'oppa'
 
blog.setName('coding');
console.log(blog.getName());   // 'coding'

var blog = new Blog('oppa');

이 형태는 기존 객체지향 프로그래밍 언어에서 한 클래스의 인스턴스를 생성하는 코드와 매우 유사하다.

함수 Blog가 클래스이자 생성자의 역할을 한다.

생성된 blog 객체는 Blog의 인스턴스로서 name 변수와 getName(), setName() 메서드가 있다.

- 중복 문제점

var blog1 = new Blog('oppa');
var blog2 = new Blog('coding');
var blog3 = new Blog('blog');

위 코드에서 각 객체는 자기 영역에서 공통적으로 사용할 수 있는ㄷ setName() 함수와 getName() 함수를 따로 생성하고있다.

이는 불필요하게 중복되는 영역을 메모리에 올려놓고 사용함을 의미하므로 자원 낭비를 가져온다.

따라서 이 중복 문제를 해결하려면 자바스크립트의 특성인 함수 객체의 프로토타입을 사용하는 것이 좋다.

1. 프로토타입 패턴

function Blog(name) {
     this.name = name;
}
 
Blog.prototpe.getName = function() {
     return this.name;
};
 
Blog.prototype.setName = function(name) {
     this.name = name;
};
 
var blog1 = new Blog('oppa');
var blog2 = new Blog('coding');
var blog3 = new Blog('blog');

console.log(blog1.getName());   // 'oppa'
console.log(blog2.getName());   // 'coding'
console.log(blog3.getName());   // 'blog'

Blog 함수 객체의 prototype 프로퍼티에 getName() 과 setName() 함수를 정의하였다.

Blog 생성자 함수로 객체를 생성한다면 각 객체는 각자 따로 함수 객체를 생성할 필요없이

프로토타입 체인으로 getName(), setName()함수에 접근할 수 있다.

이와 같이 자바스크립트에서 클래스 안의 메서드를 정의할 떄는 프로토타입 객체에 정의한 후,

new로 생성한 객체에서 프로토타입 체인을 이용한 접근방법을 쓰는게 좋다.

by 소년코딩

추천은 글쓴이에게 큰 도움이 됩니다.

악플보다 무서운 무플, 댓글은 블로그 운영에 큰 힘이됩니다.