JavaScript - Class, Instance, new ,

클래스

 

자바스크립트 클래스는 객체를 생성하기위한 템플릿이다. 객체를 만들기 위해 특정한 속성과 동작을 함수안에 정의하는것을 의미한다.

 

클래서 생성

 

클래스는 하나의 함수로 정의할수 있다(ES5)

function Car( model, colour, maxSpeed ){


}

 

클래스는 객체를 만들기 위한 constructor포함한 함수 이다.(ES6)

class Car {

constructor( model, color, maxSpeed){

this.model = model;

this.model = model;

    this.color = color;

    this.maxSpeed = maxSpeed;

  }

  accelerate() {

    console.log(`The ${this.color} ${this.model} is accelerating!`);

  }

  brake() {

    console.log(`The ${this.color} ${this.model} is braking!`);

}

}

 

 

 

인스턴스 

 

 

인스턴스는 해당 클래스로 부터 만들어진 객체를 말한다 즉, 클래스를 사용하여 객체를 생성할 때, 생성된 객체를  인스턴스라고 한다. 인스턴스는 클래스 속성과 메소드를 상속받는다. 

 

const myCar = new Car('BMW', 'black', 200);

const yourCar = new Car('Audi', 'white', 180);

 

예제로 사용한 Car 클래스에서 만들어진 myCar 객체는 model, color, maxSpeed 속성과 accelerate(), brake() 메서드를 가진 인스턴스입니다.

 

 

new 연산자 

 

new는 자바스크립트에서 인스턴스를 생성할 때 사용하는 특별한 연산자이다. new 연산자는 다음과 같은 역할을 한다

 

클래스로부터 새로운 객체(인스턴스)를 생성한다

객체를 초기화하는 constructor 메서드를 호출한다.

생성된 객체를 반환한다.

 

new 연산자는 클래스를 호출하여 새로운 인스턴스를 생성할 때 사용됩니다. new 연산자 뒤에는 클래스의 생성자 함수와 생성자 함수에 전달할 인수가 포함됩니다. new 연산자가 호출되면, 자바스크립트는 클래스의 constructor 메서드를 호출하여 객체를 초기화하고, 이를 새로운 인스턴스로 반환합니다.

 

 

생성자 함수

 

생성자함수는 클래스를 정의한 함수이며, 객체를 생성하고 초기화하는 역할을 한다. 

생성자함수는 일반적으로 대문자로 시작하는 이름을 사용하며, “new”연산자를 사용하여 객체를 생성할수 있는 함수를 의미한다. 

 

생성자 함수 내부에서는 this키워드를 사용하여 객체의 프로퍼티를 초기화 할수 있다 이렇게 생성된 객체는 해당 생성자 함수와 연결된 프로토타입 객체를 상속 받으며 생성자 함수 내부에서 정의된 메서드를 사용할수 있다.

function Person(name, age) {

  this.name = name;

  this.age = age;


  this.sayHello = function() {

    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);

  };

} // Person은 name 과 age 프로퍼티를 가지는 객체를 생성하고 sayHello 메서드를 정의한다.


const john = new Person('John', 30);

john.sayHello(); // "Hello, my name is John and I'm 30 years old.”

 

john은 Person 생성자 함수를 사용하여 생성된 새로운 객체.(인스턴스)

john.sayHello()는 Person 생성자 함수 내부에서 정의된 sayHello 메서드

 

 

 

ES5 클래스 작성 문법

 

function Person(name, age) {

  this.name = name;

  this.age = age;

}

Person.prototype.sayHello = function() {

  console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);

};

 

 

ES6 클래스 작성 문법

 

class Person {
  constructor(name, age) {

    this.name = name;

    this.age = age;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);

  }
}