생성자 함수를 통해 만들기, 객체 리터럴을 통해 만들기, object 함수를 통해서 만들기
여기서 생성자 함수와 class 에 대해서 알아보도록 하자.
1. 생성자 함수(constructor functions)
생성자 함수는 새로운 객체를 반환하고 객체의 초기 상태를 설정할 수 있게 도와준다.
생성자 함수를 만들기 위해서는 반드시! new 키워드와 함께 호출이 되어야 하는데,
이때 class 문법의 constructor 와 함께 사용할 수도 있고 일반 함수 형태로 정의할 수도 있다.
두 가지 규칙은 잊지말자!
new 키워드와 함께 호출
함수 이름 대문자로 호출하기
2. 일반 함수 형태 정의
일반 함수 형태에 대해서 생각해보자
// 일반 생성자 함수
function Person(name, age) {
this.name = name;
this.age = age;
this.greet = function() {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};
}
// 일반 생성자 함수 호출
const person1 = new Person('hihilong', 50);
person1.greet();
// "Hello, my name is hihilong and I am 50 years old."
new 키워드를 통해 호출할 때,
함수 내부의 this가 새로 생성된 객체를 가리키게 되며, 이 객체는 자동으로 반환된다.
즉 new 키워드를 통해 일반 생성자 함수를 호출하면
this 안에 빈 객체가 암시적으로 할당된다. => this={ } ;
this 안에 새로운 프로퍼티가 추가된다.
this가 반환된다.
📍 "자동"으로 반환된다 의 의미 생성자 함수엔 보통return문이 없 다 . 반환해야 할 것들은 모두this에 저장되고, this는 자동으로 반환되기 때문에 return 을 따로 써 줄 필요가 없게 되는 것이다.
3. 생성자 함수 형태 정의
ES6 이후 class 문법이 도입되었다.
class를 사용할 때는 constructor 메서드를 통해 생성자 함수를 정의할 수 있다.
이때 constructor는 class의 인스턴스를 만들 때 호출되는 메서드인데 이때 class 는 일반함수형태보다 메서드를 프로토타입에 더 효율적으로 추가할 수 있다.
일반 생성자 함수로 메서드를 정의하면 인스턴스마다 메서드가 생성이 되는거지만, class 의 메서드는 프로토타입에 연결이 된다.
즉 다시 말해서 일반 생성자 함수를 통해 정의하게 되면, 함수 내부에 메서드를 정의하게 될 경우
인스턴스마다 메서드가 복제되어 저장되므로 메모리와 성능면에서 효율적이지 않게 되는데
class 문법은 메서드를 프로토타입에 저장하여 모든 인스턴스가 같은 메서드를 공유하게 될 수 있다.
//클래스 생성자
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
}
}
// 인스턴스 생성
const person1 = new Person('hihilong', 50);
person1.greet(); // "Hello, my name is hihilong and I am 50 years old."
4. 메서드와 프로토타입
메서드와 프로토타입이 뭔데 ? ?
메서드는 객체에 포함된 함수로, 그 객체가 특정 동작을 수행하도록 정의된 함수이다. 메서드는 객체의 속성 중 하나로 존재하며, 객체의 인스턴스에서 호출된다.
프로토타입은 객체가 공유할 수 있는 속성과 메서드를 정의하는 공간이다. 따라서 객체의 인스턴스 공간에 공통적으로 사용할 메서드나 속성을 프로토타입에 정의할 수 있게 된다. 자바스크립트에서 모든 객체는 생성 시점에 프로토타입 객체를 생성받기 때문에 이 안에 메서드를 정의하면 , 해당 객체의 모든 인스턴스가 동일한 메서드를 공유하게 된다.
프로토타입을 사용해야하는 이유 ? ? JavaScript에서 프로토타입을 사용하면 여러 객체가 동일한 메서드를 공유할 수 있어 메모리를 절약할 수 있다. 일반적으로 공통 동작(메서드)은 프로토타입에 정의하여 모든 인스턴스가 이를 공유하게 하고, 특정 상태(속성)는 각 인스턴스에 개별적으로 정의하는 구조가 good~