[JavaScript] prototype과 function

JavaScript.info

1. Function도 생성하자마자 prototype을 갖게 된다.
2. 그 prototype은 객체 형식이다.
3. new Operactor로 넘겨주면, 새로 생성된 객체에도 전달된다.

요 전달된 constructor 정보를 통해서, 누가 이 객체를 만들었는지도 알 수 있다!

function Rabbit() {}

/* 디폴트 prototype
Rabbit.prototype = { constructor: Rabbit };
*/

---

예제 문제를 풀어보자.

1번

function Rabbit() {}
Rabbit.prototype = {
  eats: true
};

let rabbit = new Rabbit();

alert( rabbit.eats );

자동으로 생성된 prototype 객체에 eats: true property를 넣었고, 객체 rabbit을 생성했다.

상속을 통해

let rabbit = {
	rabbit.prototype = {constructor: Rabbit}
}

요런 식이니 true

---

2번

function Rabbit() {}
Rabbit.prototype = { //Rabbit의 prototype에 property 넣음.
  eats: true
};

let rabbit = new Rabbit(); // 객체 rabbit 생성

Rabbit.prototype = {}; // 얜 할당이니까 !!! 그 후에 Rabbit의 prototype 변화

alert( rabbit.eats ); // 그 전에 생성된 rabbit이랑은 관계 읍다.

//alert의 결과는 true.

Rabbit.prototype에 무언가를 할당하면 그 값은 새로운 객체의 [[Prototype]]이 되는거다.

Rabbit의 prototype이 빈 배열로 변경되기 전에 rabbit 객체가 만들어졌으므로, rabbit은 1번과 동일하고,
그 이후에 새로 만들어진 객체는 prototype에 빈 배열을 갖게 된다.

---

3번

function Rabbit() {}
Rabbit.prototype = {
  eats: true
};

let rabbit = new Rabbit();

Rabbit.prototype.eats = false;

alert( rabbit.eats ); // false

객체는 Referencial Type이다.
본체는 하나고, 거기에 맞는 열쇠가 다양할 뿐!
Rabbit.prototype.eats(내부 Property)에 false를 넣었으니, 상속받은 rabbit에도 같은 결과가 적용된다.

---

3번

function Rabbit() {}
Rabbit.prototype = {
  eats: true
};

let rabbit = new Rabbit();

delete rabbit.eats;

alert( rabbit.eats ); // true

delete 연산은 객체에 직접 적용된다. prototype이랑 노상관.
rabbit에는 eats가 없으니, 아무 현상도 일어나지 않음.

---

4번

function Rabbit() {}
Rabbit.prototype = {
  eats: true
};

let rabbit = new Rabbit();

delete Rabbit.prototype.eats;

alert( rabbit.eats ); // undefined

Rabbit에서 직접!! eats를 지웠으니, 이제 상속받은 rabbit에서도 eats를 찾아서 constructor Rabbit으로 올라와도 eats를 찾을 수 없다.
undefined