[자바스크립트] 객체 그리고 프로토타입

[먼저 보면 좋은 게시글]

- [자바스크립트] 객체란 무엇인가 그리고 함수는 객체다 : http://jinbroing.tistory.com/113

[객체란]

- 객체란 변수프로퍼티와 메서드들이 모여 이룬 하나의 꾸러미

- 추상적 객체와 구체적 객체(인스턴스 객체) 구분지어 사용: 한 종류지만 각자의 개성에 맞는 값, 구체적 행동 방식을 가짐(다양성)

- 객체간의 관계를 만들어 프로그래밍하는 방식을 객체지향 프로그래밍이라 함

- 객체는 레퍼런스 타입 : 변수에 값을 직접 대입하는 것이 아니라 객체 메모리 주소를 대입함

[자바스크립트의 객체지향]

- 객체지향 프로그래밍 : 객체 사이에 관계를 형성하여(추상화된 객체 - 구체화된 객체) 프로그래밍 하는 방식

- 자바스크립트는 객체지향이긴한데, class가 없다

- 자바스크립트는 직접적으로 상속 개념이 없다

- 하지만 객체지향 구현가능하며, 상속 개념 또한 만들 수 있음

- [[Scopes]]처럼 자바스크립트 상속 개념은 연결형태로 연결된 객체를 참고하는 형식

- 자바스크립트에서 객체 간의 관계(추상화 - 구체화 객체)를 만들 수 있는 것은 프로토타입이라는 속성 덕분임

[구체화된 객체 생성 방법]

1) 객체리터럴 : 변수에 객체를 선언하는 방식, 2번 방식의 숏컷

var obj = {
     option1: "프로퍼티1",
     option2: "프로퍼티2",
     foo: function(){
          console.log("메서드");
     }
}

2) 생성자함수 new 키워드 사용 : Object 생성자함수(추상화 객체)의 인스턴스(구체화 객체, 특정 객체)를 생성

var obj = new Object(); // Object 함수

- 객체를 만드는 방식은 2가지가 있음

- 객체 사이에 관계를 형성하여 프로그래밍 하는 방식(객체지향)은 아래에서 알아볼 것임

[프로토타입]

- 프로토타입 속성은 객체를 만들 때 기본적으로 만들어지는 속성 : console.dir()로 콘솔창을 통해 확인 가능

- 객체 간의 관계를 만들 때 사용하는 속성 : 자신의 본 모습을 가지고(prototype), 자신과 연결된 상위개념의 객체를 가짐(__proto__)

- 자신의 본 모습 : 추상화된 객체(큰 카테고리)가 꼭 가져야하는 프로퍼티 혹은 메서드

- 자신과 연결된 상위개념의 객체 모습 : 상위 개념의 객체의 본 모습이 담김

[프로토타입 들여다보기 - 추상화된 객체 / 구체화된 객체]

1) 추상화된 객체는 자신의 본 모습을 나타내는 프로퍼티(객체 형태)를 가지고 있음

- 자바스크립트는 추상화된 객체를 담을 장소로 함수(function)를 택함 : 함수는 객체다(함수의 prototype 객체)

- 자바스크립트의 함수의 내부구성을 보기위해 console.dir로 콘솔창에 찍어보면 아래 이미지와 같이 나옴

- 함수는 자신의 본 모습을 나타내는 프로퍼티 protoype(자료형 : Object)를 가지고 있음

- protoype 속성을 통해서 class 대신 자바스크립트가 추상화된 객체 형태를 만들 수 있음

- prototype 속성(자료형 : Object)에 공통 프로퍼티, 메서드를 저장함으로서 추상화된 객체를 완성

2) 구체화된 객체는 자신과 연결된 상위개념의 객체 모습을 나타내는 프로토타입 속성(__proto__)을 가지고 있음

- prototype, __proto__ 속성 모두 생성될 때 추가되는 프로퍼티 : prototype은 함수 생성, __proto__는 객체 생성될 때 생성

2-1) 객체리터럴로 생성된 객체 : Object 함수(추상화된 객체)의 객체(특정 객체, 인스턴스)

- 객체리터럴로 생성된 객체끼리 관계맺는 방법

/* __proto__ 직접 대입하는 방식 : 이렇게 사용하지않음, 추천도 안함 */
var a = {
     var1: "hello"
}
 
var b = {}
 
b.__proto__ = a;
console.log(b.var1); // "hello"
 
/* 표준 API 활용 방식(Object.create(상위개념객체) - 브라우저마다 지원여부가 다름, 크롬 지원) */
var a = {
     var1: "hello"
}
 
var b = Object.create(a); 
// a를 참조하는 빈객체 생성 후 b에 할당, __proto__ 프로퍼티에 직접 접근하지않고 연결시키는 방식
 
console.log(b.var1); // "hello"

2-2) 생성자함수(추상화된 객체)의 객체(특정 객체, 인스턴스)

- new 키워드를 사용하면 자바스크립트 엔진 내부에서는 위의 이미지와 같은 연결 작업을 함

- 생성자로 사용할 함수는 일반 함수와 구분하기위해 첫글자를 대문자로 쓰자

- 함수는 prototype 객체 내 constructor 속성을 가지고 있음 : new를 통해 객체를 만들 수 있음

function Person(name){
    this.name = name;
}
 
Person.prototype.getName = function(){
    return this.name;
}
 
var jinbro = new Person("jinbro");
/* 엔진 내부 동작
var jinbro = {};
Person.call(jinbro, "jinbro"); // call 함수를 사용하여 Person의 this를 jinbro로 실행(this 바인딩)
jinbro.__proto__ = Person.prototype; //프로토타입 체인
*/
 
jinbro.getName(); // "jinbro" 

[프로토타입 체인이란]

- 각각의 프로토타입 속성을 통해 연결된 형태를 프로토타입 체인이라 함

[더 알아보기]

- Function의 prototype call, apply 을 통한 this 바인딩 : 빌려쓰기 개념

- 객체 멤버(변수, 메서드)의 캡슐화 

[참고자료]

- Toast Meetup, 쉽게 이해하는 자바스크립트 프로토타입 체인 : http://meetup.toast.com/posts/104