생성자와 객체 타입에 대해서는 일전에 포스팅 한적이 있었지만
이번에 함수를 구현해보면서 또 헷갈리는 부분이 있어 다시 포스팅하고자 한다.
자바스크립트에서 객체를 생성하는 데에는 세가지 방법이 있다.
생성자 함수를 통해 만들기, 객체 리터럴을 통해 만들기, 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~
'Java Script' 카테고리의 다른 글
[JS] 객체의 프로퍼티-getter/setter (1) | 2024.11.03 |
---|---|
[JS] 접근제어자란? (0) | 2024.11.02 |
[JS] 스프레드 연산자(Spread Operator) 란? (4) | 2024.07.24 |
[JS] 자바스크립트 비동기처리(2) - async / await 이해하기 (0) | 2024.06.27 |
[JS] 자바스크립트 비동기처리란? (1) (0) | 2024.06.27 |