자바스크립트의 여러가지 특성으로 객체지향 언어의 특성을 구현해낼 수 있다.
프로토타입 기반인 자바스크립트는 객체의 자료구조, 메서드등을 동적으로 바꿀수 있다.
자바스크립트는 거의 모든 것이 객체이고, 특히 함수 객체로 많은 것을 구현해 낼 수 있는데
클래스
, 생성자
, 메서드
도 모두 함수로 구현이 가능하다.
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 소년코딩
추천은 글쓴이에게 큰 도움이 됩니다.
악플보다 무서운 무플, 댓글은 블로그 운영에 큰 힘이됩니다.