JS는 객체지향 언어가 아니다. 그래서 상속도 없다!
Prototype을 통해 객체지향기술과 비슷한 것을 구현할 수 없다.
함수가 정의될 때 발생하는 2가지 동작
- 해당 함수에 Constructor 자격이 부여되고, 이 자격이 부여된 것만 new를 통해 객체 생성 가능
- 해당 함수의 Prototype Object 생성하고 연결
Prototype Link, Prototype Object
- 이 두가지를 통틀어 Prototype 이라고 부른다.
점점 최상위로 타고타고 올라가면 결국 js도 Object가 최상위
타고 타고 올라가는 것을 Prototype Chain이라고 부른다.
1. 객체 생성과 생성자 함수
JavaScript에서 객체를 생성하는 가장 기본적인 방법은 생성자 함수를 사용하는 것이다. 생성자 함수는 객체를 만드는 틀이 되며, 이를 통해 생성된 객체를 인스턴스라고 한다.
기본적인 생성자 함수
function Person() {}
const person = new Person(); // Person 객체 생성
console.log(person, typeof person); // Person {} 'object'속성이 있는 생성자 함수
function Person(name, age) {
this.name = name;
this.age = age;
this.hello = function() {
console.log(`Hello, I'm ${this.name}`);
};
}
const person = new Person('Mark', 37);
person.hello(); // "Hello, I'm Mark"2. 프로토타입과 상속
JavaScript는 프로토타입을 통해 객체 간의 상속을 구현한다. 모든 객체는 프로토타입 체인을 통해 다른 객체의 속성과 메서드를 상속받을 수 있다.
프로토타입을 이용한 메서드 정의
function Animal(type, name, sound) {
this.type = type;
this.name = name;
this.sound = sound;
}
Animal.prototype.say = function() {
console.log(this.sound);
};
function Dog(name, sound) {
Animal.call(this, '개', name, sound);
}
Dog.prototype = Animal.prototype;
const dog = new Dog('멍멍이', '왈왈');
dog.say(); // "왈왈"3. 클래스 문법
ES6부터는 class 키워드를 사용하여 더 명확하고 직관적인 객체 지향 프로그래밍이 가능해졌다.
기본 클래스 정의
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
hello() {
console.log(`Hello, I'm ${this.name}`);
}
}
const person = new Person('Mark', 37);
person.hello();getter와 setter
class User {
_name = 'no name';
get name() {
return this._name + "!";
}
set name(value) {
this._name = value;
}
}정적 메서드와 속성
class Calculator {
static PI = 3.14159;
static sum(a, b) {
return a + b;
}
}
console.log(Calculator.PI); // 3.14159
console.log(Calculator.sum(1, 2)); // 3클래스 상속
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} makes a sound.`);
}
}
class Dog extends Animal {
constructor(name) {
super(name);
}
speak() {
console.log(`${this.name} barks.`);
}
}
const dog = new Dog('Rex');
dog.speak(); // "Rex barks."주요 특징 정리
- 클래스는 호이스팅되지 않으므로 선언 전에 사용할 수 없다.
- 클래스 내의 모든 메서드는 엄격 모드(strict mode)에서 실행된다.
- 상속을 사용할 때는 반드시
super()를 호출해야 한다. - 정적 메서드는 인스턴스가 아닌 클래스 자체에서 호출한다.
결론
JavaScript의 객체 지향 프로그래밍은 프로토타입 기반으로 동작하며, ES6의 클래스 문법은 이를 더 편리하게 사용할 수 있게 해준다. 클래스는 실제로 프로토타입 상속의 문법적 설탕(Syntactic Sugar)이지만, 코드의 가독성과 유지보수성을 크게 향상시킨다.
Junior Backend Developer