[Javascript] 클래스와 인스턴스

클래스란?

객체를 생성하기 위한 템플릿(틀), 클래스는 데이터와 이를 조작하는 코드를 하나로 추상화한다.

인스턴스란?

클래스로인해 생성된것을 말한다.

new 키워드

함수를 생성자 함수로 동작할수 있게 하는 키워드
new 연산자와 함께 호출하는 함수는 constructor이어야 한다.

// 생성자 함수로 정의하지 않은 일반 함수
function add(x, y) {
	return x + y;
}

// 생성자 함수로서 정의하지 않은 일반 함수를 new 연산자와 함께 호출
let inst = new add();

// 함수가 객체를 반환하지 않았으므로 반환문이 무시된다. 따라서 빈 객체가 생성되어 반환된다.
console.log(inse); // {}

// 객체를 반환하는 일반 함수
function createUser(name, role) {
	return { name, role };
    
// 일반 함수를 new 연산자와 함께 호출
inst = new createUser('Lee', 'admin');

//함수가 생성한 객체를 반환한다.
console.log(inst); // {name: "Lee", role: "admin"}

생성자 함수란?

new 연산자와 함께 호출하여 인스턴스를 생성하는 함수
반대로 new 연산자 없이 생성자 함수를 호출하면 일반 함수로 호출된다.

// 생성자 함수
function Circle(radius) {
	this.radius = radius;
    this.getDiameter = function() {
    	return 2 * this.radius;
    };
}

// new 연산자 없이 생성자 함수를 호출하면 일반 함수로서 호출된다.
const circle = Circle(5);
console.log(circle) // undefined

// 일반 함수 내부의 thi는 전역 객체 window를 가리킨다.
console.log(radius); // 5
console.log(getDiameter()); // 10

circle.getDiameter();
// TypeError

ES5 클래스 작성 문법

// ES5 생성자 함수
let Person = (function () {
  // 생성자 함수
  function Person(name) {
    this.name = name;
  }

  // 프로토타입 메서드
  Person.prototype.sayHi = function () {
    console.log('Hi! My name is ' + this.name);
  };

  // 생성자 함수 반환
  return Person;
}());

// 인스턴스 생성
let me = new Person('Lee');
me.sayHi(); // Hi! My name is Lee

ES6 클래스 작성 문법

// 클래스 선언문
class Person {
  // 생성자
  constructor(name) {
    // 인스턴스 생성 및 초기화
    this.name = name; // name 프로퍼티는 public하다.
  }

  // 프로토타입 메서드
  sayHi() {
    console.log(`Hi! My name is ${this.name}`);
  }

  // 정적 메서드
  static sayHello() {
    console.log('Hello!');
  }
}

// 인스턴스 생성
const me = new Person('Lee');

// 인스턴스의 프로퍼티 참조
console.log(me.name); // Lee
// 프로토타입 메서드 호출
me.sayHi(); // Hi! My name is Lee
// 정적 메서드 호출
Person.sayHello(); // Hello!```