Prototype

Constructor Function

new 키워드와 함께 어떤 함수를 실행할 경우, 이 함수를 생성자 함수라고 한다.

function Animal (name, age) {
  this.name = name;
  this.age = age;
}

const cat = new Animal("jane", 3);

console.log(cat); // ?

JS에서 보통 함수의 return 값이 명시되지 않으면, 기본적으로 undefined가 반환된다. 하지만 위의 코드를 실행시키면 알 수 있듯이, 특정 객체가 반환된다.

 

함수 뿐만 아니라, 거의 모든 것이 생성자를 통해서 선언이 가능하다. 심지어 우리가 알고 있는, numbers 와 string도 그렇다.

 

const obj = {};
const arr = [];
const func = function () {};

const newObj = new Object();
const newArr = new Array();
const newFunc = new Function();

 

 

Object, Array, Function도 JS에 내장된 생성자 함수이다.

obj, arr, func와 같은 간결하게 작성된 코드로 작성한다 해도, JS는 사실상 내부적으로 함수를 이용해 만드는 것과 동일하게 객체를 생성한다.

 

Every Function has prototype property

function add(a, b) {
  return a + b;
}

function multiply(a, b) {
  return a * b;
}

function foo() {
  console.log("hello, world");
}

const doSomething = function () {
  console.log("do something");
};

console.log(add.prototype);
console.log(multiply.prototype);
console.log(foo.prototype);
console.log(doSomething.prototype);

위 코드를 실행해보면, 어떠한 방식으로 함수를 생성하였던, prototype 속성이 내장되어 있다는 것을 알 수 있다. 그리고 각자의 prototype은 독자적이다.

function foo () {
  console.log("hello");
}

const something = new foo();

또한, 생성자 함수는 기본 반환값이 this이다. 생성자 함수 내에서 this 값은 새로운 빈 객체이다. 이 부분은 과거 this에 관련하여 작성한 글에서 볼 수 있다.

 

function foo () {
  console.log("I am foo.");
}

const something = new foo();

console.log(something.hello); // undefined

foo.prototype.hello = "Hello, World";

console.log(something.hello); // Hello, World

something이라는 변수에 담긴 존재는 foo 함수를 생성자 함수로 실행한 반환값인 빈 객체이다.

그러기에 처음에는 something.hello가 없지만, foo.prototype을 통하여 선언 후 에는, something.hello가 존재하게 된다.

 

Instance

JS의 모든 Instance 객체는 해당 객체의 prototype에 존재하는 속성 및 메소드에 접근하여 사용할 수 있습니다.

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

Person.prototype.age = 22;

const john = new Person("John");

console.log(john.age); // 22

Instance는 john입니다. john은 Person이라는 생성자 함수를 이용해서 만들어졌기 때문에, Person.prototype에 존재하는 속성을 사용할 수 있습니다.

 

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

Person.prototype.age = 2;

const john = new Person("John", 22);

console.log(john.age); // 22

비록 Person에서 prototype에 age라는 속성이 존재하더라도, john은 본인이 age 속성을 가지고 있으면, 본인의 것을 사용한다. 쉽게 말해서 본인에게 없을 경우에만 prototype에 있는 속성을 사용한다.

 

Prototypal Inheritance

거의 모든 객체는 prototype chain을 통하여 자식에게 속성을 전달한다. 우리는 그리고 이 chain을 Prototypal Inheritance라고 한다. 자식인 객체는 부모의 속성들을 상속 받는다. 그리고 상속받는 속성들은 부모의 prototype에 저장되어있다. 그리고 자식은 이것을 __proto__를 통하여 접근한다.

 

 

Udemy: JavaScript: The Advanced Concept