[멋쟁이 사자처럼 프론트엔드 스쿨] 33일차 TIL - this, 프로토타입, 생성자 함수, call/apply/bind, instance/static method, class

🍰 오늘도... 어려웠다... 한 열 번은 반복해서 보면 이해될 것 같은 느낌? 그래서 일단은 키워드만 적어놓고 이해한 후 다시 내용 추가하러 올 지도...

🍴 this

: this 값은 런타임에 결정됨. 컨텍스트에 따라 달라짐.

🍴 프로토타입

자바스크립트는 객체지향 프로그래밍 능력을 지니고 있는 프로토타입 기반의 객체지향 프로그래밍 언어.

• 객체가 다른 객체로부터 속성과 메서드를 상속받을 수 있게 하는 메커니즘
• 자바스크립트 객체는 [[Prototype]]이라는 숨김 프로퍼티를 가짐
• 이 프로퍼티 값은 null이거나 다른 객체에 대한 참조가 됨
• 다른 객체를 참조하는 경우 => 참조 대상을 프로토타입(prototype)이라고 부름

🍴 생성자 함수

모든 프로토타입은 constructor 프로퍼티를 가짐.

• 이 constructor 프로퍼티는 prototype 프로퍼티로 자신을 참조하고 있는 생성자 함수를 가리킴.

🍴 call(), apply(), bind()

• Function.prototype의 메서드
• 모든 함수가 상속받아 사용할 수 있음
• 함수 호출의 문맥 제어, 재사용 가능한 함수들을 유연하게 사용할 수 있게 도와줌
• call - 함수를 호출하면서 첫 번째 인자로 주어진 값을 this로 설정, 이후 인자들은 개별적으로 전달
• apply - call과 유사, 인자들을 배열 형태로 전달
• bind - 함수의 this 값을 영구적으로 설정한 새 함수 반환

🍴 instance method VS static method

instance method

• 클래스의 인스턴스에 바인딩 됨
• 클래스의 각 인스턴스에서 호출할 수 있음
• 주로 객체 상태 조작, 객체별 동작 정의 시 사용

class Person {
    constructor(name) {
        this.name = name;
    }

    // 인스턴스 메서드
    greet() {
        console.log(`Hello, my name is ${this.name}`);
    }
}

const person1 = new Person('Alice');
const person2 = new Person('Bob');

person1.greet(); // Hello, my name is Alice
person2.greet(); // Hello, my name is Bob

greet 메서드는 Person 클래스의 인스턴스 메서드. 각 인스턴스인 person1, person2에서 호출할 수 있음.

static method

• 클래스 자체에 바인딩 됨
• 클래스 이름을 통해 호출됨
• 주로 유틸리티 함수나 클래스의 인스턴스와 관련 없는 동작 정의 시 사용

class Calculator {
    // 정적 메서드
    static add(a, b) {
        return a + b;
    }

    static multiply(a, b) {
        return a * b;
    }
}

console.log(Calculator.add(5, 3)); // 8
console.log(Calculator.multiply(5, 3)); // 15

add와 multiply 메서드는 Calculator 클래스의 정적 메서드. 클래스 이름을 통해 호출함.

🍴 class

: 기존 프로토타입 기반 상속을 쉽게 사용할 수 있게 함

• 생성자(constructor) - 클래스의 인스턴스를 초기화하는 데 사용됨
• 메서드 - 클래스 내부에서 정의 가능. 인스턴스 메서드와 정적 메서드 정의 가능.
• 'extends' 키워드를 사용하여 상속 가능