모바일 부터 하드웨어까지 가능하게 하는 가장 강력한 언어, GITHUB 에서 가장 많은 프로젝트, 해커톤에서 가장 많이 사용되는 언어, 오바마 대통령도 배웠던 언어, 바로 자바스크립트입니다.

1. Welcome to
Javascript
Prototype

2. 1. Prototype
2. Prototype 장점
3. Prototype 설정
4. Prototype Chain
5. Private 멤버
6. Namespace
Javascript 기초 6
선수 추천 과정
HTML5
CSS3

3. Prototype
Prototype 이란, 어떤 객체의 원본이 되는 객체로서 Javascript 는 이를 통하여 프로
토타입 베이스의 객체지향언어로 불림. Class 베이스의 객체 지향에 비해 보다 속박이
약한 클래스라고 생각하면 됨
Javascript 기초1
Class 베이스의 객체지향 언어 Prototype 베이스의 객체지향 언어
Method A
Class
Method B
Property X
Property Y
Method A
Class
Method B
Property X
Property Y
Method A
Class 1
Method B
Property X
Property Y
Method A
Class 2
Method B
Property X
Property Y
Method A
Instance 1
Property X
Property Y
Method A
Instance
2
Method B
Property XProperty Z
Method C

4. Prototype
JavaScript 에서는 함수에 클래스로서의 역할을 부여하고 있다. 동일한 클래스를 기초
로 생성된 인스턴스라 할지라도 각각이 가지는 멤버가 동일하다고 볼수는 없다.
Javascript 기초1
간단한 클래스 선언
Javascript 에서는 Function 객체에
클래스로서의 역할을 부여하고 있음
생성자로 초기화하기
new 연산자에 의해 객체를 생성하는
것을 규정한 함수를 생성자라고 함. 생
성자의 이름은 보통 함수와 구분하기
위해 대문자로 시작함
동적으로 Method 추가
Method는 생성자에서만 정의할 수
있는 것이 아니라, new 연산자로
instance 화 한 객체에 대해 나중에도
추가할 수 있음

5. Prototype
일반 생성자로 Method 를 정의하면 쓸데 없이 메모리를 소비함. Prototype 으로 선
언하게 되면, 베이스 객체의 Prototype method 에 대해 참조할 수 있게 됨.
Javascript 기초1
생성자 메소드를 정의하는 것의 문제 Prototype 객체
Method A
Class
Method B
Property X
Method A
Class
Method B
Property X
Method A
Class 1
Method B
Property X
Method A
Class 2
Method B
Property X
Class 1
Property X
Class 2
Property X
인스턴스에 복사되는 함수 객체는
모두 동일한 내용
인스턴스는 프로토타입의 참조만을 유지
자신이 Method 를 가진 것 처럼 이용

6. Prototype 장점
Prototype 객체를 개입시켜 Method 를 정의하면, 메모리 사용량을 절감할 수 있고,
멤버의 추가나 변경을 Instance 가 실시간으로 인식할 수 있음
메모리 사용량 절감
베이스가 되는 객체로 부터 참조하기
만 하고 인스턴스에 복제 되지 않음.
이로써 생성자 경유로 Method를 생
성시 발생하는 메모리 낭비 문제 회피
멤버 추가/변경 실시간 인식
인스턴스에 멤버를 복사하지 않음으
로서, 프로토타입 객체에의 변경을 인
스턴스 측에서 동적으로 인식 함
Javascript 기초1
Instance
Property X
Method A
Class
Method B
Property X
1. Instance 자신을 검
색
2. Prototyp을 검색
Instance
Property X
Method A
Class
Method B
Property X
멤버의 추가나 삭제도 실시간으로 인식할 수 있음

7. Prototype 의 Property 설정
Property의 값은 모든 인스턴스에 공유되는 것 처럼 보임. 프로토타입 객체가 사용되
는 것은 값을 참조할 때뿐이다. 값의 설정은 항상 인스턴스에서 행해 짐.
즉, Instance 측에서의 멤버 추가나 삭제 조작이 Prototype 에 영향을 미치지 않음.
Property 설정
Property를 Prototype으로 정의해
도 동작상으로는 인스턴스가 개별적
으로 Property 를 보유하고 있는 것
과 같음.
Property 삭제
삭제하는 경우에도 Instance 단위로
행해짐. 즉 Instance 내의 Property
값을 삭제하면, Prototype 에 전의된
값이 반환 됨
Javascript 기초1
프로퍼티 선언은 생성자
메소드의 선언은 프로토타입으로

8. Prototype Chain
객체 지향언어의 중요 개념중 하나가 상속인데, 모 객체의 기능을 상속받아 새로운 클
래스를 정의하는 기능임. 부모를 superclass, 자식 클래스를 sub class 라고 말함.
Javascript 에서는 Prototype Chain 을 통하여 상속 관계를 구현 함
Javascript 기초1
Child Instance
call
Prototype
Child Object
run
reference
Child Instance
Prototype
Child Object
walk
인스턴스화
인스턴스화
walk 메소드 호출
1.인스턴스 자신의
멤버를 검색
2.그 프로토타입의
멤버를 검색
4. 프로토타입에
등록된 인스턴스의
멤버를 검색
3. 프로토타입에
등록된 인스턴스의
멤버를 검색
프로토타입에
인스턴스 등
록
Prototype
Chain

9. Prototype Chain
Javascript 에서는 프로토타입에 인스턴스를 설정함으로써 인스턴스끼리 암묵의 참조
하에 서로 연결됭 계승관계를 갖게 됨. 이러한 프로토타입의 연결을 프로토타입 체인이
라고 하고, 프로토타입 체인의 종점은 Object 객체임
Prototype Chain
1. Dog 객체의 인스턴스 d 로 부터
멤버의 유무를 검색
2. 해당하는 멤버가 존재하지 않는
경우에는 Dog 객체의 프로토타입,
Animal 객체의 인스턴스 검색
3. 거기서도 목적 멤버가 발견되지
않는 경우에는 윗 단계의 Animal
객체의 프로토타입을 검색 함
동적 상속 변경
Javascript가 동적인 성질을 가지고
있으나, 프로토타입 체인은 인스턴스
가 생성된 시점에서 고정되어 그 후의
변경에는 관여하지 않고 보존된다.
Javascript 기초1
프로토타입 종단:
Object.prototype

10. Private 멤버는 클래스 내부에서 호출되는 멤버로, 외부에서 Access 할 염려를 하지
않아도 됨. 아무런 고려 없이 멤버를 생성하면 클래스 내외로 부터 자유롭게 접근할 수
있는 Public 멤버가 됨
Javascript 기초1
private 프로퍼티
Private 멤버
클래스
public 프로퍼티
public 멤버 : 클래스 내외에서 자유로이 액세
스
public 메소드
private 메소드
외부
접근
O
O
X
X
내부
접근
O
O
O
O
private 멤버 : 클래스 내부에서의 액세스만
가능
클래스
public 프로퍼티
public 메소드 (Setter)
private 메소드
값의 가공이 가능
public 메소드
(Getter)
값의 참조
값의 검증이 가능
값의 설정
직접 액세스는 불
가
직접 액세스
값의 가공/검증 불가
읽기/쓰기 제어 불가

11. Private 멤버
Javascript 에서는 엄밀하게 private 멤버를 정의하기 위한 구문은 없으니, 클로저를
이용하여 유사하게 private 멤버를 정의할 수 있음
Private 멤버는 생성자에 정의
- private 멤버는 다음의 구문으로
생성자 함수 안에서 정의함.
- private 멤버를 정의하는 경우 this.
프로퍼티명, this.메소드명이 아닌
var 키워드로 선언해 주어야 함
privileged 메소드 정의
- private 멤버에 액세서 할 수 있는
메소드를 privileged 메소드라 함
- privileged 메소드는 생성자 함수
안에 정의 함
Javascript 기초1
private - 생성자
public – 프로토타입 객체
privileged – 생성자

12. 클래스의 수가 많아지면 이름이 충돌하는 케이스가 발생할 수 있음. 규모가 있는 클래
스 라이브러리를 작성하는 경우 네임스페이스(패키지)화 하여 정리하는 것이 좋음.
Javascript 에는 표준 구조가 없으므로 빈 객체로 유사하게 구현 함
Javascript 기초1
Namespace 생성
빈 생성자 함수를 생성하여 네임스페
이스를 정의 함. 네임스페이스 하위 클
래스를 인스턴스화 하는 경우, 네임스
페이스도 포함한 이름으로 클래스명
을 지정해야 함
Namespace
클래스 네임스페이스가 잇는 경우
public 프로퍼티 Apple 이름공간
Member Object
Graps 이름공간
Member Object
객체의 이름이 충돌할 가능성이 높음 이름으 충돌 위험이 적어짐
public 메소드
Animal Objectpublic 메소드

13. Expand your dimension!
Let’s Start!