[Javascript] Prototype

Prototype

// 화살표 함수 안됨

객체지향 언어는 클래스 기반과 프로토타입 기반으로 구분되는데 자바스크립트는 이 중에서 프로토타입 기반에 속한다.

프로토타입 기반이란 객체의 원형이 되는 형태를 먼저 정의해 놓고 추가적인 기능을 점차 확장하면서 기능을 구성하는 형식이다.

//상속이 필요 없다. 상속의 원 기능이 클래스의 확장이기 때문에...

#01. 생성자 함수

함수를 new 연산자로 호출할 경우 객체를 만들기 위한 함수로 분류된다.

이러한 함수를 생성자(Constructor)라고 한다.

생성자에서 this 예약어를 통해 정의한 변수는 객체의 멤버변수 역할을 한다.

단, 화살표 함수 형식은 생성자로 사용할 수 없다.

1) 생성자 정의하기

function User(){
    this._id = null;
    this._email = null;
};

2) 생성자를 통한 객체 생성

같은 생성자를 통해 할당된 객체는 동일한 자료 구조를 갖지만 각각 다른 정보를 저장할 수 있다.

var foo = new User();
foo._id = "hello";
foo._email = "hello@javascript.com";
console.log(foo);

var bar = new User();
bar._id = "world";
bar._email = "bar@javascript.com";
console.log(bar);

User { _id: 'hello', _email: 'hello@javascript.com' }
User { _id: 'world', _email: 'bar@javascript.com' }

3) 파라미터를 갖는 생성자

객체에 포함되는 멤버변수의 초기값을 설정하기 위한 용도로 생성자 함수는 파라미터를 갖을 수 있다.

생성자 파라미터를 통해 객체 생성시 초기값을 한번에 설정하면, 객체를 생성한 후 개별적으로 파라미터를 지정하는 것 보다 전체 코드가 축약된다.

var User2 = function(id, email){
    this._id = id;
    this._email = email;
};

var foo = new User2("hello", "hello@javascript.com");
var bar = new User2("world", "world@javascript.com");

console.log(foo);
console.log(bar);

User2 { _id: 'hello', _email: 'hello@javascript.com' }
User2 { _id: 'world', _email: 'world@javascript.com' }

#02. 메서드 추가하기

JS의 모든 Object는 prototype이라는 속성을 갖는다.

이 속성을 생성자 함수에 대해 활용하면 생성자 함수에 속한 다른 변수나 함수를 추가할 수 있으며, 이 때 필요하다면 파라미터나 리턴값을 사용할 수 있다.

User2.prototype.login = function(){
    console.log("로그인되었습니다. -> id=%s, email=%s", this._id, this._email);
};

User2.prototype.logout = function(){
    console.log("로그아웃 되었습니다.");
}

var student = new User2("학생", "student@gmail.com");
student.login();
student.logout();

로그인되었습니다. -> id=학생, email=student@gmail.com
로그아웃 되었습니다.

#03. getter, setter 추가하기

Object.defineProperty(함수이름, 멤버변수이름, {getter, setter 정의}) 형식으로 특정 멤버변수에 대한 getter, setter를 정의할 수 있다.

Object.defineProperty(User2, "_id", {
    get:function(){
        return this._id;
    },
    set : function(value){
        this._id = value;
    }
});

Object.defineProperty(User2, "_email", {
    get:function(){
    return this._email;    
    },
    set:function(value){
        this._email = value;
    }                                      
});

foo.id = "world";
foo.email = "world@javascript.com";
console.log(foo.id);
console.log(foo.email);
foo.login();

world
world@javascript.com
로그인되었습니다. -> id=hello, email=hello@javascript.com

#04. JSON 구문 형식을 활용한 Protytype 정의

생성자이름.prototype = { ... } 형식으로 getter, setter, 함수 등을 한번에 추가할 수 있다.

// 생성자와 멤버변수 정의
function Member(username, password){
    this._username = username;
    this._password = password;
}

Member.prototype = {

    get username(){
        return this._username;
    },
    set username(value){
        _username=value;
    },

    get password(){
        return this._password;
    },
    set password(value){
        _password = value;
    },

    login:function(){
        console.log("[Member] 로그인되었습니다. username=%s, password=%s", this.username, this.password);
    },

    logout:function(){
        this.username="";
        this.password="";
        console.log("[Member] 로그아웃 되었습니다. username=%s, password=%s", this.username, this.password);
    }

};

{
  username: [Getter/Setter],
  password: [Getter/Setter],
  login: [Function: login],
  logout: [Function: logout]
}

// 생성자를 통한 객체 생성
var member1 = new Member("hello", "1234");

// setter를 통한 멤버변수 반환받기
console.log(member1.username);
console.log(member1.password);

//메서드 호출
member1.login();
member1.logout();

// setter를 통한 멤버변수 값 변경
member1.username = "world";
member1.password = "5678";

//getter를 통한 멤버변수 반환받기
console.log(member1.username);
console.log(member1.password);

//메서드 호출
member1.login();

hello
1234
[Member] 로그인되었습니다. username=hello, password=1234
[Member] 로그아웃 되었습니다. username=hello, password=1234
hello
1234
[Member] 로그인되었습니다. username=hello, password=1234

#05. Prototype을 통한 기능의 확장

Prototype은 기존에 존재하는 모든 형태의 클래스에 대한 기능 확장이 가능하다.
Javascript 안에 내장되어 있는 String 클래스 원형에 내가 원하는 기능을 추가하여 나만의 자바스크립트를 구성할 수 있다.

// 문자열에서 주어진 길이만큼 내용을 자르고 "..."을 추가
String.prototype.elipsis = function(length) {
    var value = this;

    // 문자열의 길이가 length보다 크다면?
    if(value.length > length){
        // 문자열의 0번째 위치부터 length까지 자름
        value = value.substring(0,length).trim();

        //잘라낸 문자열에 "..." 덧붙임.
        value += "...";
    }

    //결과 리턴
    return value;
}

var msg = "안녕하세요. 자바스크립트 프로그래밍 입니다.";
console.log(msg.elipsis(20));



//ES5 끝 종료 (화살표 빼고)

안녕하세요. 자바스크립트 프로그래밍...