[2019.02.28] javascript의 prototype 개념, 그리고 this.

자바스크립트를 몇번 다뤄봤었지만, 이번에 prototype이란 개념이 있는지는 처음 알았다..!!

역시..!! 퀵패스 말고 프리코스부터 하기 잘했다..!! 모르는 기초개념 부분이 참 많다...! (역시 아직 많이 멀었구나..)

Prototype이란?

코딩 객체지향 개념에서 맨 처음 배우는 그 유명한 '붕어빵 틀'.

바로 클래스가 자바스크립트에서는 prototype이였던 것이다!

# Function.Prototype

function Person(){
  this.name;
  this.age;
  this.address; 
}
 
var inyong = new Person();

위 코드에서는 prototype이 Person이다. new Person();이 인스턴스이다. (인스턴스라는 용어의 개념도 이번에 알게 되었다.)

this의 개념도 엄청 다양하다. 위 코드에서는 this 자체가 인스턴스를 가리키므로, name, age, address가 각 인스턴스의 객체 키가 되는 것이다.

javascript에서의 this

자바에서나 C#등 다른 객체지향 언어에서는 this 개념이 즉 전역변수을 가리키는 의미였는데, 자바스크립트에서는 this의 개념이 너무 다양하다.

# this의 여러 사용 방법

console.log(this); // 최상위 window
 
var Person = function(){
  console.log(this);
};
 
new Person(); // -> 새로 만든 인스턴스 자체
 
Person(); // -> 최상위 Object인 Window
 
Person.call(obj); // -> Person 안의 this는 obj
 
Person.apply(obj); // -> Person안의 this는 obj

this가 어떻게 사용되는지에 따라 가리키는 내용이 달라진다.

그리고 call, apply뿐 아니라 bind라는 개념도 있다.

# call, apply, 그리고 bind

var Person = function(a, b){
  console.log(a + b);
};
 
Person.call(obj, a, b); // -> call의 첫번째 매개변수는 this, 두번째부터는 argument.
 
Person.apply(obj, [a, b]); // -> apply의 첫번째 매개변수는 this, 두번째는, arguments에 들어갈 Array.
 
var run = Person.bind(obj, a, b); // -> call과 같으나, 실행이 아니라, 실행을 할 수 있는 함수를 반환.

bind가 중요하다. call과 apply는 적용하면 바로 실행하는 함수지만, bind는 세팅만 하고, 실행은 하지 않는다. 실행을 시킬 수 있는 함수를 반환한다.