자바스크립트의 Prototype, 객체, this

자바스크립트의 Prototype

Object란?

자바스크립트는 객체기반의 스크립트 언어이고, key :value로 구성된 property들의 집합이다.
그리고 객체는, 데이터를 의미하는 Property와 데이터를 참조하고 조작할수있는 동작을 의미하는 Method(Property값이 함수인 경우)로 구성된 집합이다.

자바스크립트 객체는 객체지향의 상속을 구현하기 위해 prototype이라고 불리는 객체의 프로퍼티, 메소드를 상속받을 수 있다.

1. 객체 리터럴

   let student = {
    name: 'pong',
    score: 100,
    sayHello: function () { console.log('hello' + this.name)}
   }
   student.sayHello();

   사실 자바스크립트 엔진은 객체 리터럴로 객체를 생성하는 코드를 만나면 내부적으로 object 생성자 함수를 사용하여 객체를 생성한다.

2. Object 생성자 함수

   let person = new Object;
   
   

person.name = 'pong';  
person.score = 100;  
person.sayHello = function () { console.log('hello' + this.name)}

console.log(typeof person);  
console.log(person);

person.sayHello();

```

3. 생성자 함수
   생성자함수를 사용하면 객체를 생성하기 위한 클래스처럼 사용하여 프로퍼티가 동일한 객체 여러개를 간편하게 생성이 가능하다!

   
    function Person(name, gender) {  
    this.name = name;  
    this.gender = gender;  
    this.sayHello = function() {  
    console.log('Hi! my name is ' + this.name);  
    };  
    }
   
    let person1 = new Person('Pong', 'female');  
    let person2 = new Person('Gyoo', 'male');
   
    console.log(person1);  
    console.log(typeof(person1));  
    console.log(person2);
   

   그리고 this로 바인딩 되어있는 것은 public, 생성자 함수 내에서 선언된 일반 변수는 private이다.

prototype property 의 존재 유무

function Person(name) {  
this.name = name;  
}

var foo = new Person('Lee');

console.dir(Person); // prototype 프로퍼티가 있다.  
console.dir(foo); // prototype 프로퍼티가 없다.

this

java와 c++과는 달리, 인스턴스 자신을 가리키는 참조변수이다.

프로토타입 객체

자바스크립트는 c++, JAVA와같은 클래스 기반 객체지향 언어가 아닌, 프로토타입 기반 객체지향 언어이다.
클래스 기반 객체지향은 객체생성이전에 클래스를 정의 -> 이 클래스를 통해 인스턴스를 생성한다. 하지만 프로토타입 기반 객체지향은 class-less로 객체를 생성한다.

자바스크립트의 모든 객체는 상속의 개념처럼, 부모 객체의 프로퍼티/메소드를 상속받아 사용할 수 있다. 이러한 부모객체를 Prototype(객체)라고 한다.
이 프로토타입 객체는 생성자 함수에 의해 생성된 각각의 객체에 공유 프로퍼티를 제공하기 위해 사용된다.

자바스크립트의 모든 객체는 [[Prototype]]이라는 internal slot 을 가지는데, 이 값은null 또는 객체고, 상속을 구현하는데 사용된다.
이 [[Prototype]]객체의 데이터 프로퍼티는 get 액세스를 위해 상속되어 자식객체의 프로퍼티처럼 사용이 가능하다.

var student = {  
name: 'Lee',  
score: 90  
}  
console.log(student.**proto** === Object.prototype); // true

이처럼 type이 같고, 객체를 생성할 때 프로토타입은 결정된다. 그리고 그 결정된 프로토타입 객체는 상속을 위해 다른 객체로 변경할 수도 있다.ㅎㅎ

// Prototype : 객체의 입장에서 자신의 부모역할을 하는 프로토타입 객체를 가리키며 함수 객체의 경우 Function.prototype을 가리킨다._  
console.log(Person.**proto** === Function.prototype);

// prototype 프로퍼티 : 함수객체가 생성자로 사용될 때 이 함수를 통해 생성될 객체의 부모 역할을 하는 프로토타입 객체를 가리킨다._  
console.log(Person.prototype === foo.**proto**);